CODEWITHSUNDEEP
javascriptjqueryajax
Naeem Khan
Naeem Khan

Reputation: 960

jQuery AJAX running twice on click

I'm trying to make two Ajax calls in one page using jQuery. The first Ajax runs successfully and produces results. Second Ajax is supposed to fire up on button click and show the result, but it runs twice every time I click on the button. And initially on the first time clicking on the button, I have to click twice before it produces a result. Here's what I'm trying to do:

function showPicture() {
$("button").click(function() {
  var id = this.id;
  $.ajax({
    type: 'POST',
    url: 'displaySearch.php',
    data: {'getTile': $(this).val()},
    success: function(data) {
      console.log(id);
      $("#" + id).replaceWith("<img src=" + data + " />");
    }
  });
});

}

Here's my button:

<button id=" . $count . " onclick=showPicture() value=" . htmlentities($result['Poster']) . ">Click Me!</button>

I have seen similar questions on Google but I cannot figure out what the problem is. Any help would be greatly appreciated.

Upvotes: 0

Views: 2035

Answers (2)

Seabizkit
Seabizkit

Reputation: 2415

Your function 'showPicture' which you are calling from the html attribute below

 <button id=" . $count . " onclick=showPicture()

is calling your function as you would expect.

but the function showPicture() itself is then binding a onclick event 

function showPicture() {

     $("button").click(function() {  <------- this
 ......

So it is being hit twice as you have the attribute onclick and the even binding onclick. The event click is on all html buttons.

What you should do: Remove the binding in the function to all buttons

function showPicture(caller) {

   var id = $(caller).attr("id");
   var val = $(caller).val();

   console.log(id);
   console.log(val);

   $.ajax({
      type: 'POST',
      url: 'displaySearch.php',
      data: {'getTile': val },
      success: function(res) {

         --you are replacing the button with an image... or something like that
         $("#" + id).replaceWith("<img src=" + res+ " />");
      }
  });
}

html 

<button id=".$count." onclick="showPicture(this)" value=".htmlentities($result['Poster']).">Click Me!</button>

Upvotes: 1

steadweb
steadweb

Reputation: 16541

You have 2 onClick handlers, somewhat:

  1. onClick
  2. $("button").click()

Remove one of the handlers.

Example

function showPicture(id) {
  $.ajax({
    type: 'POST',
    url: 'displaySearch.php',
    data: {'getTile': $(this).val()},
    success: function(data) {
      console.log(id);
      $("#" + id).replaceWith("<img src=" + data + " />");
    }
  });
}

<button id=" . $count . " onclick=showPicture(" . $count . ") value=" . htmlentities($result['Poster']) . ">Click Me!</button>

Upvotes: 5

Related Questions