CODEWITHSUNDEEP
jqueryinternet-explorerjquery-uigoogle-chrome
Philipp Schmid
Philipp Schmid

Reputation: 5828

JQuery UI Dialog disappears after drag operation

In my page (SharePoint 2010 application page) I define a simple dialog div:

<div id='corrDlg'>
   <canvas id="corrCanvas" width="250px" height="50px" style="background-color: White; border-color: Black;" ></canvas>
</div>

which I initialize with the following JS code:

$('#corrDlg').hide();
$('#corrDlg').dialog( { autoOpen: false, modal : true, zIndex : 3, title: 'Correction Dialog' } ).hide();
$('#corrDlg').touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });
$('.ui-dialog-titlebar').click(function () { $('#corrDlg').dialog('close'); });
$('.s4-rp').hide();

The modal dialog is then shown from within a JS button click handler:

    $('#corrDlg').dialog("open", "position", "center");

Up to this point everything behaves as expected: the modal dialog is shown.

I then click on the dialog title bar and move the window (while keeping the mouse button clicked). As soon as I release the mouse button the dialog window closes!

I haven't been able to figure out by debugging through jquery-ui.js which configuration option I am missing (or have added inadvertently) that generates this incorrect behavior.

I am using the folloing JS and CSS files:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js"></script>

The above described behavior is the same for IE9 and Chrome 16 (and earlier versions).

Upvotes: 0

Views: 2000

Answers (2)

Marc D Anderson
Marc D Anderson

Reputation: 479

Unless I'm reading your script wrong, it's doing what you've asked it to do.

$('.ui-dialog-titlebar').click(function () { $('#corrDlg').dialog('close'); });

That will close the dialog if you click on the title bar. Since you are holding the mouse button when you drag, the click hasn't finished yet. When you release the mouse button, it's a click and the dialog closes.

Upvotes: 1

davissp14
davissp14

Reputation: 775

I would break it up a bit so its easier to test.

Also here are some docs to reference. http://jqueryui.com/demos/dialog/#option-draggable
Noticed their was a "draggable" option. I havent tested any of this, but hopefully it helps.

$(document).ready(function(){
    $('#corrD1g').hide();
    $('.s4-rp').hide();  // Not sure what this does

    initialize_dialog();

    // Open Dialog Box a
    // selector = whatever your js button element is. 
    $('selector').live('click', function(){
        open_dialog_box
    });

    $('.ui-dialog-titlebar').live('click', function(){
        close_dialog_box
    });
});

function open_dialog_box() {
  $('#corrDlg').dialog("open", "position", "center");
}

function close_dialog_box() {
   $('#corrDlg').dialog('close');
}


function initialize_dialog() {
      $('#corrDlg').dialog({ 
                 autoOpen: false,
                 draggable: true, 
                 modal : true, 
                 zIndex : 3, 
                 title: 'Correction Dialog' 
      }

      $('#corrDlg').touch({ 
                    animate: false, 
                    sticky: false, 
                    dragx: true, 
                    dragy: true, 
                    rotate: false, 
                    resort: true, 
                    scale: false 
       });
}

Upvotes: 0

Related Questions