jquery ui dialog won't open

I'm trying to open a Jquery UI dialog box after the user clicks on an anchor link.

I'm using Jquery 1.5.2 and UI 1.8.11 and am getting no error messages. I am following the example on this page: jquery ui dialog documentation

My JS:

$(document).ready(function() {
  $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
});

  $('#showPayTypeOptions').click(function(){
    $('#payTypeOptions').dialog('open');
    //If I put an alert() here, the alert shows
  });

});

The HTML:

<a id="showP开发者_开发百科ayTypeOptions">Do something</a>

<div id="payTypeOptions">
 <p>Content</p>
</div>

Thanks.

Edit: There was nothing wrong with the code. It was user error in the import process - doh!

I've had this happen to me before too and it had to do with the imports. To see if that's the case, try the following scripts and styles. try:

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

Try this:

$(document).ready(function() {
    $('#showPayTypeOptions').click(function(){

        $('#payTypeOptions').dialog({
            autoOpen: false,
            height:600,
            width: 600,
            modal: true
        });
    });
});

See if that opens the modal. If it does then you'll need to declare the modal piece first before you try to open it.

$(document).ready(function() {
    $('#payTypeOptions').dialog({
        autoOpen: false,
        height:600,
        width: 600,
        modal: true
    });

    $('#showPayTypeOptions').click(function(){
        $('#payTypeOptions').dialog('open');
        //If I put an alert() here, the alert shows
    });
});

You have to swap them around, I think, where you're creating the dialog box first, then calling it up.

Create function like here http://pluksza.blogspot.com/2011/06/jquery-ui-dialog-open-good-practise.html and bind event to button

I had a very similar problem but my modal opened for a split second and then disappeared. I worked out the solution by watching the HTML change in the Chrome dev tool Elements tab as I clicked on my "open the dialog" button. You have to remember to return false from the clicked element, if it's a button or link, otherwise your page will be posted or get'ed again and you lose your dialog. So my code would look something like:

$(document).ready(function() {

  $('#payTypeOptions').dialog({
    autoOpen: false,
    height: 600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function() {
    $('#payTypeOptions').dialog('open');
    return false; // This makes all the difference in my case
  });

});

Hope this helps someone

Try storing the dialog in a variable and referencing that. I've had success doing it this way:

$(document).ready(function() {
  var mydialog = $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function(){
    mydialog.dialog('open'); //Changed here
    //If I put an alert() here, the alert shows
    //Also, you should probably return false here to prevent the browser
    // from following the link (or doing something weird since you don't have
    // an href).
    return false;
  });

});

Once you declare the dialog (before you 'open') can you use a DOM inspector (firebug) to review the div? Once the dialog is declared you should see a lot of additional markup created by jQuery. ui-widget, ui-dialog, etc...