jQuery UI Dialog not showing correctly

Question

I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. I want to show a modal dialog when click in a Delete and for this I do that:

 <div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
 </div>

And the JS to fire the event is this one:

 $(function() {
    $("#delete").click(function(){
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "<?php echo lang('event:delete') ?>": function() {
                    $( this ).dialog( "close" );
                },
                "<?php echo lang('global:cancel_label') ?>": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
});

For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. Any advice or help on this? Best regards

any chance a link you could post? i could prolly help trubl shoot this pretty quick if you have it online somewhere — SpYk3HH
– SpYk3HH, Commented Apr 25, 2012 at 12:38

Michael Laffargue · Accepted Answer · 2012-04-25 13:27:24Z

2

You should add style='display: none' to your dialog div so it won't be displayed at startup.

Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return falseif it's a Submit for example to avoid normal click event handler to be launched :

$(function() {
    $("#delete").click(function(e){
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "<?php echo lang('event:delete') ?>": function() {
                    $( this ).dialog( "close" );
                },
                "<?php echo lang('global:cancel_label') ?>": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    e.preventDefault();
    });
});

Edit : Modification done according to Scott suggestion

edited Apr 25, 2012 at 13:27

answered Apr 25, 2012 at 12:38

Michael Laffargue

10.3k6 gold badges46 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ReynierPM Over a year ago

Nice Michael, maybe the page was send because I not write the "return false" now it's not send any. Also I fix the style:"display:none" and the DIV isn't showed until I click the button which is not a button just a HREF styled as a button using Twitter Bootstrap. Many thanks and all the points to you!!

Code Maverick Over a year ago

I would probably pass e into the function and call e.preventDefault(); to prevent the click action instead of return false as it also calls e.stopPropogation(); which prevents other events from bubbling up.

ReynierPM Over a year ago

Hmm could you post a sample @Scott

ReynierPM Over a year ago

Nice, added to my code in order to improve it!! Many thanks @Scott

Michael Laffargue Over a year ago

@Scott Code modified to follow your suggestion

|

Community · Accepted Answer · 2017-05-23 12:29:07Z

1

This happened to me as well. There is only one cause I know of. The dialog CSS file is not being loaded.

See my SO Question: position:fixed breaks in IE9

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Apr 25, 2012 at 12:34

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

Collectives™ on Stack Overflow

jQuery UI Dialog not showing correctly

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related