CODEWITHSUNDEEP
jqueryasp.net-mvc
Alejandro Hinestrosa
Alejandro Hinestrosa

Reputation: 501

Modal dialog closing immediately

I'm having a problem with the modal dialog, it activates when the user push and input button, then the modal dialog shows, and disappears immediately without do it anything.

The code:

$('form').submit(function(e) {
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
    }
    dialog.load(
        $("#dialog").dialog({
            close: function(event, ui) {
                dialog.remove();
            },
            resizable: false,
            //height: 140,
            //width: 460
            modal: true,
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
    );
    return true;
});

Besides, how can I make that, when the user push ok in the modal dialog, the event continues?

Upvotes: 2

Views: 13502

Answers (7)

Prason Ghimire
Prason Ghimire

Reputation: 529

Instead of:

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

Use this :

    $('#modalID').dailog('show');

Upvotes: 1

Marcelo Velasquez
Marcelo Velasquez

Reputation: 713

I had both bootstrap files at the end of my code:

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>

Then I removed bootsrap.min.js and it worked, also I included at the end:

<script>
    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
     });
</script>

Upvotes: 2

0ffliner
0ffliner

Reputation: 31

I got the same problem, meanwhile I shifted to advanced version of Modal Dialog box. The creator named it Nifty dailog box for some reason.

You can access documentation from Tympanus

Upvotes: 0

David Cornelson
David Cornelson

Reputation: 391

You could also verify that your a-tag href is "#". I did not have these and the link auto-submits. With the hash it works as expected.

Upvotes: 1

Yorgo
Yorgo

Reputation: 2678

add e.preventDefault();

and submit the form on Ok button click after set true to isConfirmed

var isConfirmed = false;


$('form').submit(function(e) {
               if(!isConfirmed){
                    var dialog = $("#dialog");
                    if ($("#dialog").length == 0) {
                        dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
                    }
                    dialog.load(
                        $("#dialog").dialog({
                            close: function(event, ui) {
                                dialog.remove();
                            },
                            resizable: false,
                            //height: 140,
                            //width: 460
                            modal: true,
                            buttons: {
                                "Ok": function() {
                                    $(this).dialog("close");
                                    isConfirmed=true;
                                    $("form").submit();
                                },
                                Cancel: function() {
                                    $(this).dialog("close");
                                }
                            }
                        })
                    );
                   e.preventDefault();
                   return false;
               }
               else
                  return true;
                });

Upvotes: 5

Anuj Arora
Anuj Arora

Reputation: 3047

To make sure that the event propagates as expected just return true from the corresponding method.

"Ok": function() {
     return true;
 }

Upvotes: 0

Deepak Kumar
Deepak Kumar

Reputation: 682

As per my understanding you can try:

buttons: {
                                "Ok": function() {
                                    //Call your event here. 
                                    $(this).dialog("close");
                                },
                                Cancel: function() {
                                    $(this).dialog("close");
                                }
                            }

Hope this helps.

Upvotes: 2

Related Questions