Hi!
I have created a modal dialog. When I close it the page refreshes automatically but in my scenario the page should not do so.
The code I am using is:

$(document).ready(function () {
    $("#addaccount").dialog({
        height: 'auto',
        width: 'auto',
        modal: true,
        autoOpen: false
    });
    $("#addaccountlink").click(function (e) {
        $('#addaccount').dialog('open');
    });

Here I am opening a div tag inside a modal dialog. There is a form submit button. When I click the submit button the modal dialog closes and the page refreshes automatically.

Urgent help is needed.

Recommended Answers

Don't use the form submit. When you submit a form it causes a page refresh. If there is data in the form that you need to pass back to the server then do so in the click event for the button using ajax and then close the dialog. In your …

Jump to Post

All 2 Replies

Don't use the form submit. When you submit a form it causes a page refresh. If there is data in the form that you need to pass back to the server then do so in the click event for the button using ajax and then close the dialog. In your dialog settings you can specify a button to close the dialog and the click event this way:

$( "#addaccount" ).dialog({ 
    buttons: { 
         "Close": function() { 
                     /*grab the form data and make ajax call here could use
                      * $("#formId :input") to grab all inputs then in a function
                      * create an object that has the name:values of all the 
                      * elements selected as such. the :input selector grabs all
                      * text areas, input, checkboxes, and radio buttons so your 
                      * form should be covered
                      */
                     $(this).dialog("close"); 
                  } 
    }, 
    height: 'auto',
    width: 'auto',
    modal: true,
    autoOpen: false
});

Thank you very much. The solution given by you is perfect. But one thing I observed is that we can access the form data by using another method also.

$("#id").val()

By using this you can access any element in the page.
Thank once again for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.