Can't get jquery dialog to work

lmcilwain · 02-23-2012, 02:02 PM

Hey guys,

I'm pretty new to jquery so I am having some trouble wrapping my head around some basic things. This time I am having issues getting a form submit to bring up a dialog where if the user cancels than it does a preventDefault() but if they hit OK then it continues with the submission. Right now when I click the submit button, I am not able to get the dialog to popup at all. Can anyone tell me what I may be missing to get this to work?

Here is the code that I am using to try and get this to work:

Code:

$(document).ready(function(){
  $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
                "Submit Form": function() {
                   document.testconfirmJQ.submit();
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
  $("#survey_form").submit(function(e){
    alert("alert");
    e.preventDefault();
    $('#dialog').dialog('open');
  });
});

Note: I modified code from what I saw when I was googling around for an answer. I didn't see anything on jquery.com that specifically talked about the dialog function so I am not sure that it exists anymore. If it does not exist, is there another way that I can get this to work? Even if using raw javascript?

audriusk · 02-23-2012, 02:20 PM

This may sound obvious, but have you included <script src="some.dialog.plugin.js"></script> tag inside your HTML file (and added some.dialog.plugin.js file alongside)? jQuery doesn't have dialog functionality by itself, .dialog() method is provided by some plugin. You can quickly check if .dialog() method is defined by typing inside Firebug (if you're using Firefox for developing) console

Code:

$().dialog

If you get undefined, it means that you're missing the plugin code.

Note: plugin's <script> tag should be added after jQuery's one.

lmcilwain · 02-23-2012, 02:23 PM

Ah then that is definitely my issue. I thought this was a built into jquery and I could use a plugin as an alternative. I guess I should hunt around for a plugin worth using and use that

I wasn't using any plugins at all.

Thanks a lot for clarification.

lmcilwain · 02-24-2012, 02:08 PM

Thanks, using jquery-ui gave me a confirmation dialog I can use.