Question

I’m facing some problems on jquery and ajax to open second dialog box within a dialog box. This is the Jquery codes:

$( "#dropdownuser" ).dialog({
        autoOpen: false,
        show: "blind",
        height : 600,
      width : 1000,
        modal: true,
      buttons: {
            "Okay": function() {
                $(  "#dialog"  ).dialog( "close" );


                $("#userSelect").on('Okay', function() {
                    $.ajax({
                        url: "URL",
                        data: $(this).serialize(),
                        type: "POST",
                        success: function(html){


                            $("#edit1").html(html).dialog("open")
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                            alert('error: ' + textStatus + ': ' + errorThrown);
                        }
                    });
                    return false;
                });
              }
        }
      });

So, what I’m trying to do here is to have a dialog box and its form inside to be submitted and then when the user clicks ‘Okay’, the dialog box form is being submitted and return with a new dialog box. Any guys know how to do this? Thank you so much.

Answer 1

Remove this :

$("#userSelect").on('Okay', function() {

})

and just call the AJAX. There is no Okay event, that is the name of the button and the AJAX is within the callback for the button already. The callback won’t be fired until user clicks on the button with text Okay

Also if you are trying to close the current dialog the selector in this line:

   $(  "#dialog"  ).dialog( "close" );

doesn’t match the selector for the dialog instance. You can use:

$(this).dialog( "close" );