CODEWITHSUNDEEP
jqueryajax
Tamy
Tamy

Reputation: 1

How to post a picture and .html at the same time on event click?

<div class="img-client"> 
<div class="client1"><a href="first_html.html"></a></div>
<div class="client2"><a href="second_html.html"></a></div>
<div class="client3"><a href="third_html.html"></a></div>
</div>
<div class="ajax"></div>

$(document).ready(function()
{
  $(".clients-img div").click(function()
  {

      $(".ajax").append('<img src="client1.png" alt="Question">');

        $(".ajax").load($(this).children().attr("href"));
 });
  return false;
});

On a click a picture and text below it shall be shown. If I erase $(".ajax").load($(this).children().attr("href")); the picture works. But if I leave it in, only text is shown on the screen.

Upvotes: 0

Views: 60

Answers (3)

abinaya
abinaya

Reputation: 93

Instead of using load() function use append

$(".clients-img div").click(function(){
    $(".ajax").append('<img src="client1.png" alt="Question">');
    $(".ajax").append($(this).children().attr("href"));
});

Upvotes: 2

JAL
JAL

Reputation: 21563

You're overwriting the image with the .load content. Since the image is already being appended, if you just reversed the order of the two it should work fine.

Upvotes: 0

Mariy
Mariy

Reputation: 5914

.load():

Load data from the server and place the returned HTML into the matched element.

So you want to .get() the data and append it to the ajax class.

EDIT:

 $(".clients-img div").click(function() {
  $.get($(this).children().attr("href"), function(data) {
   $(".ajax").append('<img src="client1.png" alt="Question">').append(data)
  })
 });

Upvotes: 1

Related Questions