Content changes in fancybox div only appear after closing and re-opening

Question

Hi folks,

I have a form which displays in a jQuery FancyBox div with id "mcform". When a button is clicked I call this function:

function postit() {
  $.ajax({
    type: "POST",
    url: 'listSubscribe.php',
    data: "fname=" + $("#fname").val() + "&lname=" + $("#lname").val() 
      + "&email=" + $("#email").val(),
     success: function(msg) {
        $('#mcform').html(msg);
        $("#fname").val('');
        $("#lname").val('');
        $("#email").val('');
    }
  });   
}

I can see in the console that listSubscribe.php gives a 200 header and returns text. However the form does not change except that the values wipe. But if I close the FancyBox and reopen it lo and behold there is the text returned by listSubscribe.php replacing the html of the form as intended.

Anyone have an idea what would cause this? I assume I am fighting FancyBox but I don't know what to do about that.

Page is here: http://dominiquesonmag.com/new.html

Thanks for reading!

JG

Answer 1

looking at that page, I noticed there is another DIV with ID='mcform' in the mailchip DIV. this may be causing the problem, in that it's try to set the HTML to a different DIV.

also, a couple tips: use serialize() to create your data string, and you can select all input elements in the form to set their values to empty strings:

function postit() {
 $.ajax({
   type: "POST",
   url: 'listSubscribe.php',
   data: $("#mcform form").serialize(),
   success: function(msg) {
       $('#mcform').html(msg);
       $("#mcform input").val('');
   }
 });   
}

Answer 2

This works

function postit() {
 $.ajax({
   type: "POST",
   url: 'listSubscribe.php',
   data: $("#mcform form").serialize(),
   success: function(msg) {
       $('#fancy_content').children().children().html(msg);
        $("#fname").val('');
        $("#lname").val('');
        $("#email").val('');
   }
 });   
}

since you are referring mcform by id it just sets the value on the first element it finds instead change it to a class say mcformclass and try $('.mcformclass').html(msg);, this should change the value on both instances of mcform.