CODEWITHSUNDEEP
jqueryajaxformsappendslide
Nick
Nick

Reputation: 4462

Script to append code to form success message is placing image outside of message DIV

I am using an ajax script to generate text in a success message. The final part of the process is to add a close image DIV which when clicked should close (slide up) the 'panel' DIV which contains the form and the success message, as happens when the close image is clicked on without sending any message. You can see the form by clicking on 'contact' in the nav bar on this page.

Here is the script that generates the success message:

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
             $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
             });
           });
         }
       });

And here is the script that handles the click function on the close button DIV:

$(".close").click(function ()
        {
            $("#panel").slideUp("slow");
            $("li#contact").removeClass("current");
    //        $("#contact").removeClass("current");
            $panel.visible = false;
            return false;
        });

Could someone please let me know why the close button is outside the DIV and why it won't close the form from the success message?

Thanks,

Nick

Upvotes: 0

Views: 1520

Answers (4)

maxedison
maxedison

Reputation: 17573

I just tested it on the site you link to. The close button is not actually outside of the div, it just appears below the area you want it to show up in. That's because the wrapping <p> has a height of 0. And it has a height of 0 because you are floating its contents (the <a> tag). Just give that <p> a height of 35px and you'll be fine:

$('<p style="text-align:center; height:35px"><a class="close" href="#"><img src="/images/close.png"></a></p>')

I'm guessing that the click handler doesn't fire because the .close element in question doesn't exist when you try binding the click event. Just put all that $('.close').click(...) code after the line in which you create the .close element:

$.ajax({
  type: "POST",
  url: "contact-engine.php",
  data: dataString,
  success: function() {
    $('#contact-form').html("<div id='message-form'></div>");
    $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
    .hide()
    .fadeIn(2000, function() {
      $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
        $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
        $(".close").click(function () {
          $("#panel").slideUp("slow");
          $("li#contact").removeClass("current");
          //$("#contact").removeClass("current");
          $panel.visible = false;
          return false;
        });
      });    
    });
  }
});

Upvotes: 1

Phil Klein
Phil Klein

Reputation: 7514

Your problem is that the $(".close").click(function() { ... }) method only binds selected elements that currently exist in the DOM. You will have to use some other means such as:

$('#message-form').on("click", ".close", function() {
    $("#panel").slideUp("slow");
    $("li#contact").removeClass("current");
    // $("#contact").removeClass("current");
    $panel.visible = false;
    return false;
});

As for the close button being outside the div, I'm not quite sure which div you mean and exactly what you're seeing. I would suggest cleaning up your AJAX as follows:

$.ajax({
    type: "POST",
    url: "contact-engine.php",
    data: dataString,
    success: function() {
        $('#contact-form').html("<div id='message-form'></div>");
        $('#message-form')
            .hide()
            .html("<h3>Your message has been submitted successfully!</h3>")
            .append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>')
            .append('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>')
            .fadeIn(2000);
    }
});

Unless of course you do intend to have things fade in progressively. Hope this helps!

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34196

I put an example (with changes) in here: http://jsfiddle.net/MarkSchultheiss/bUWh4/

Not really that pretty, but you should be able to extract what you need, and the click on the button works by changing to .on()

Upvotes: 0

Bill Bonar
Bill Bonar

Reputation: 1027

Here is a quick jsFiddle

http://jsfiddle.net/MRaeq/3/

Everything with you add seems right. but the click event looks like it may need a live handler to be added once the close button is created unless you were already handling it

Upvotes: 0

Related Questions