CODEWITHSUNDEEP
jqueryajaxfancybox
jerrygarciuh
jerrygarciuh

Reputation: 22018

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

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!

Upvotes: 1

Views: 1000

Answers (2)

Vinay B R
Vinay B R

Reputation: 8421

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.

Upvotes: 1

Dave Thieben
Dave Thieben

Reputation: 5427

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('');
   }
 });   
}

Upvotes: 0

Related Questions