CODEWITHSUNDEEP
phpjavascriptajaxjquery
John
John

Reputation: 81

Show HTML for specific div on click

I have some HTML and Ajax set up so that if you click a certain image (the reply-quote class below), it initiates some Ajax to echo HTML elsewhere on the page.

As shown below, the HTML file contains the same block of divs multiple times. My problem is that, if a user clicks the image, how can I make Ajax show the HTML (within show-reply div) for that specific block and not all of them?

<!-- BLOCK ONE -->
<div class="style1">
  <div class="style2">
    <img src="image.png" class="reply-quote" />
      <div class="style3">
        <div class="style4">
          <div id="show-reply"></div>
          <div class="reply-box">
            <form class="reply-container no-margin" method="POST" action="">
              <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
              <button name="submit" class="btn" type="submit">Post</button>
            </form>
          </div>
        </div>
      </div>
   </div>
 </div>

<!-- BLOCK TWO -->
<div class="style1">
  <div class="style2">
    <img src="image.png" class="reply-quote" />
      <div class="style3">
        <div class="style4">
          <div id="show-reply"></div>
          <div class="reply-box">
            <form class="reply-container no-margin" method="POST" action="">
              <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
              <button name="submit" class="btn" type="submit">Post</button>
            </form>
          </div>
        </div>
      </div>
   </div>
 </div>

Here's the JQuery I have right now:

$(document).ready(function() {    
  $(".reply-quote").click(function() {
    $.ajax({
      url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
      type: "POST",
      data: {post_id: $(this).attr('id')},
      success: function(data) {
        $("#show-reply").append(data); // this is where the problem lies
      }
    });
  });
});

To my understanding, I have to somehow implement $(this), parent(), find(), etc. instead of the current line I'm using ($("#show-reply").append(data);). The question is, what should that line be so that if I click the image, it only shows the HTML for that specific block?

Please help!

Upvotes: 1

Views: 323

Answers (3)

RahulG
RahulG

Reputation: 1026

try this 

 $("div").click(function(e) {
            if($(e.target).is('.reply-quote')){
                e.preventDefault();
                return;
            }
            alert("work ");
        });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

First: ID should be unique in a document, use class attribute instead for show-reply and other elements where id is repeated

<div class="show-reply"></div>

then you need to find the show-reply next to the clicked reply-quote image

$(document).ready(function() {   

    $(".reply-quote").click(function() {
        var $reply = $(this);
        $.ajax({
            url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
            type: "POST",
            data: {post_id: $(this).attr('id')},
            success: function(data) {
                $reply.closest('.comment-container').find(".show-reply").append(data);
            }
        });
    });
});

Upvotes: 1

David Gallardo
David Gallardo

Reputation: 504

You should change the id="show-reply" to class="show-reply" in html, and then in JS change $("#show-reply").append(data); to $(this).parent(".show-reply").append(data);

Upvotes: 0

Related Questions