0

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:

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!

Community
  • 1
  • 1
deewilcox
  • 852
  • 2
  • 12
  • 24
  • The goal is to add multiple contacts and send the data back to the parent form, without losing any data in the parent form that hasn't been saved yet. – deewilcox Oct 05 '12 at 20:15

1 Answers1

0

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');
    },
(...)
Ярослав Рахматуллин
  • 7,599
  • 1
  • 41
  • 60
  • Thanks for your help! I ended up going with a jQuery modal dialog because I needed to display the new data without a page refresh and without pulling the new data in from another file. This does answer the question, though. – deewilcox Oct 08 '12 at 20:41