Asked  7 Months ago    Answers:  5   Viewed   27 times

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});

 Answers

36

Bootstrap has a few functions that can be called manually on modals:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

You can see more here: Bootstrap modal component

Specifically the methods section.

So you would need to change:

$('#my-modal').modal({
    show: 'false'
}); 

to:

$('#myModal').modal('show'); 

If you're looking to make a custom popup of your own, here's a suggested video from another community member:

https://www.youtube.com/watch?v=zK4nXa84Km4

Tuesday, June 1, 2021
 
seaders
answered 7 Months ago
18

You need to use Prevent the default action of a submit button

$('#barkod_oku').submit(function () {
    event.preventDefault();
    $('#myModal').modal('show');
 });
Saturday, May 29, 2021
 
Hexaholic
answered 7 Months ago
47

This may seem silly, but did you check you're using the same bootstrap-datetimepicker.js plugin that you're referring to in your question?

There are two versions I know of which are very similar:

  1. The version you provided in your question: http://eonasdan.github.io/bootstrap-datetimepicker/
  2. A slightly different version: http://www.eyecon.ro/bootstrap-datepicker/

The first version responds to change.dp, while the second version responds to dp.change.

Just check the comments at the top of the bootstrap-datetimepicker.js to see which one you're using.

Wednesday, July 28, 2021
 
max_
answered 4 Months ago
55

data-filed should have not spaces, try to change

data-field="Customer Name"

to

data-field="CustomerName"

I updated your jsfiddle and filter-control works.

http://jsfiddle.net/5h595r6g/9/

However it would be great to implement filter options updating to available values, as I described in this post:

bootstrap table filter-control - how to unset unnecessary values from select options

Saturday, August 14, 2021
 
hillz
answered 4 Months ago
37

I have this working well in my current project.

A partial view uses the Inherits control markup just like a full view does to strongly type the Model object to a datatype.

Here is a very simple example of a partial view that is returned via a ajax call and put inside a div. The purpose of this partialview is to display a text message that is passed through to it.

LiteralMessage.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<!-- LiteralMessage.ascx start -->
<%= Model %>
<!-- LiteralMessage.ascx end -->

Controller Method

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ReturnId(int id)
{
    return PartialView("LiteralMessage", string.Format("Hello world! Id: {0}", id));
}

Note that in the partial page view can be any complex object.

I hope this helps!

EDIT: and because this is listed as jQuery as well, use this as your ajax's success event. (This is assuming your dialog has a content DIV with an Id of MyDialogMessage inside a dialog DIV with an Id of MyDialog)

// executes when $.post is complete
function doSuccess(result)
{
    $('div#MyDialog div#MyDialogMessage').html(result);
    //show dialog
    $('div#MyDialog').dialog('open');
}
Monday, October 4, 2021
 
demaxSH
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share