Question

I have an ajax form within a parent html form (not my code!). The use case scenario is that a user is prompted to enter profile information, opens a pop-up to add multiple contacts to the account, and continues filling out the rest of the profile.

The contacts box allows the user to add a new contact, edit an existing contact, or delete a contact.

The problem is that when the user submits the ajax form for add, edit, or delete, the whole page refreshes, and any unsaved $_POST data in the parent form is lost.

If I hit enter on the page, or Ctrl + $ or Cmd + R, the $_POST data is not lost. These are a few of the articles I have read trying to figure this thing out:

• https://stackoverflow.com/questions/12734535/ajax-complete-without-page-reload
• Populating fields in modal form using PHP, jQuery
• "location.reload()" loses POST/SESSION data? (F5 / Ctrl+R keeps data?)
• "location.reload()" loses POST/SESSION data? (F5 / Ctrl+R keeps data?))

I’m a PHP developer and a total AJAX newb, so forgive my lack of knowledge here. I tried to mimic the Ctrl+R effect with return false; and location.reload(true), but neither one worked. What am I missing?

Here’s my code for the pop-up box:

$("#contact-dialog").dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    buttons: {
      "Ok": function() {
        var bValid = true;
        allFields.removeClass( "ui-state-error" );

        bValid = bValid && checkLength( contact_first_name, "first name", 2, 64 );
        bValid = bValid && checkLength( contact_last_name, "last name", 2, 64 );
        bValid = bValid && checkLength( title, "title", 1, 64 );
        bValid = bValid && checkLength( phone, "phone", 6, 30 );
        bValid = bValid && checkLength( email_address, "email_address", 5, 128 );

        if ( bValid ) {
          if (contact_count % 2) {
          $( "#contacts" ).append();
          } else {
          $( "#contacts" ).append();
          }
          contact_count++;

          $.ajax({
                type: "POST",
                url: "facility-categories-ajax.php",
                data: { 
                    type: 'add-to-contacts',
                    input: $('#contact-dialog-link').val(),
                    cid: $('#contact-dialog-id').val(),
                    first_name: contact_first_name.val(),
                    last_name: contact_last_name.val(),
                    title: title.val(),
                    phone: phone.val(),
                    email_address: email_address.val(),
                    twitter: twitter.val(),
                    facebook: facebook.val(),
                    linkedin: linkedin.val()
                },
                complete: function(data) {
                    location.reload();
                    return false;
                }
          });

          $(this).dialog("close");
        }
      },
      Cancel: function() {
        contact_update.val('-1');
        $(this).dialog("close");
      }
    },
    close: function() {
      allFields.val("").removeClass("ui-state-error");
      tips.text("");
      if (contact_update.val() > -1) {
        delete_contact(contact_update.val());
      }
    }
  });

I appreciate your help!

Answer 1

Remove local.reload() to stop the page from being refreshed. You can remove the whole complete: function(){}, because it is only useful for doing things after the ajax call has returned successfully. And consider adding another button such as “Done making changes” that will close the dialog.
e.g:

 (...)
 buttons: {
    "Done": function() {
        $(this).dialog('close');
    },
(...)