CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
VBJ
VBJ

Reputation: 683

Ajax call inside a dialog box with dialog close not working

I am fairly new to jQuery and Javascript. My issue is with jQuery UI dialog box. I have table where I click on a row and it populates further details into dialog box. Dialog will have a form and a table inside it. When a user enters details and clicks on the form I check for User inputs and display the form back into the dialog again, however when that happens dialog close button do not work.

Can someone suggest on how to approach this please? Thank you for the help.

$.ajax({
    type:"POST",
    dataType:"html",
    url:"form/add/"+estimateId,
    cache:false,
    //data:a,
    success:function(html){
        //alert(html);
        $(".projectMaintenance").html(html);
        $(".projectMaintenance").dialog({
            resizable:false,
            height:750,
            width:900,
            modal:true,
            buttons:{
                "Close":function(){
                    $(this).dialog('destroy');
    ....

This is the script i use to submit the form inside the dialog.

var a=$('form').serialize();

$.ajax({
    type:"POST",
    dataType:"html",
    url:"form/save",
    cache:false,
    data:a,
    success:function(html){
        alert(html);
        $(".projectMaintenance").html(html);
.......

Upvotes: 0

Views: 1690

Answers (1)

Zach dev
Zach dev

Reputation: 1620

You just execute the ajax request at user select the close option, to keep a little more readable and friendly, create a trySend() function

$.ajax({
        type:"POST",
        dataType:"html",
        url:"form/add/"+estimateId,
        cache:false,
        //data:a,
        success:function(html){
            //handle if everything it's ok and should show the dialog....
            $(".projectMaintenance").html(html);
            $(".projectMaintenance").dialog({
                resizable:false,
                height:750,
                width:900,
                modal:true,
                buttons:{

                    "Close":function(){


                        $(this).dialog('destroy');


                        buttons: {
                            "Close": function () {
                                $(this).dialog('close');
                                trySend();
                            }
                        }

.............

And the trySend function

        function trySend(){
            var a=$('form').serialize();
            $.ajax({
                type:"POST",
                dataType:"html",
                url:"form/save",
                cache:false,
                data:a,
                success:function(html){
                    alert(html);

                    $(".projectMaintenance").html(html);
                });
        }

Upvotes: 1

Related Questions