0

I have a little problem that I tried to solve without success and I hope you guys could help me .

So I have a button that once clicked should call an Ajax function and replace itself with the response gotten from the Ajax on success .

My code so far for the html :

<div class="btn-group">
<button id="button1" class="btn btn-white btn-xs" onclick="like(83,1)">
<i class="fa fa-heart-o"></i>
 J'aime !
</button>
</div>

and the jquery part :

function like(id, t) {

    $.ajax({
        type: "GET",
        url: "ajax/likes.php?postID=" + id + "&likeID=" + t,
        dataType: 'html',
        success: function(data) {
            $("#button" + t).replaceWith(data);
        }

    });
}

Clicking & calling the Ajax function works and I can see the response with the required HTML from the developer console but the original one doesn't get replaced with it .

The response looks like that :

<button id='button1' class='btn btn-white btn-xs 1' onclick='like(83,1)'>
<i class='fa fa-heart'></i>
 J'aime plus         
</button>

Thanks !

user3678528
  • 1,741
  • 2
  • 18
  • 24
Anass
  • 56
  • 4

2 Answers2

0

Instead of using the onclick attribute, I suggest you try using jQuery's click().

Perhaps you may try the following structure,

var ids; //set equal to number of id's in total

for (let i = 0; i < ids; i++) {
    $("button" + i).click({id: 83}, function() {
        callback(i, event.data.id);
    }
}
...
function callback(i,t){
  return function(){
    $.ajax({
            type: "GET",
            url: "ajax/likes.php?postID=" + t + "&likeID=" + i,
            dataType: 'html',
            success: function(data) {
            $("#button" + i).replaceWith(data);
            }
        });
    }
}

edit: there is a way to pass params through click(). See jQuery's .click - pass parameters to user function for a far more thorough explanation.

Community
  • 1
  • 1
Sid G.
  • 100
  • 1
  • 9
  • Thanks but i can't use the jQuery's click() because i have many buttons that got generated with different ids and i must pass parameters to the function to know which one is clicked and replace it with the proper code – Anass Sep 01 '16 at 01:59
  • the button id ( id="button1" ) may get different numbers like button2 button3 button4 , if you got an idea and how to get that works will appreciate it . thanks – Anass Sep 01 '16 at 02:18
  • Just updated the answer again. It makes the assumption that button id suffixes are in numerical order. If there are gaps in the data (i.e. 1,2,3,5,9), then I would recommend throwing all button id values into an array and iterating through that. I also assumed that 't' was the value by which id suffixes are tracked, considering "button1" had t set to 1. – Sid G. Sep 01 '16 at 02:37
  • i appreciate your efforts, but if the user click the same button 2 times the code will assume that it's for the next button as the i is incremented on each click ! – Anass Sep 01 '16 at 02:43
  • Right. Using a callback should fix this problem. – Sid G. Sep 01 '16 at 03:07
0

The same code

Please check the value of the variable t inside the ajax.success.

var buttonsPlus = ["<button id='button1' class='btn btn-white btn-xs' onclick='like(83,1)'>\n\r<i class='fa fa-heart'></i> \nJ'aime plus\n</button>","<button id='button2' class='btn btn-white btn-xs' onclick='like(83,2)'><i class='fa fa-heart'></i> David plus</button>"];

function like(likes, index){
  // simulate ajax call
  setTimeout(function(){
    $('#button'+index).replaceWith(buttonsPlus[index-1]);
  }, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group">
<button id="button1" class="btn btn-white btn-xs" onclick="like(83,1)">
<i class="fa fa-heart-o"></i>
 J'aime !
</button>
<button id="button2" class="btn btn-white btn-xs" onclick="like(83,2)">
<i class="fa fa-heart-o"></i>
 David !
</button>
</div>

EDIT #2:

Try to change the ajax.dataType from html to text/plain

David Antoon
  • 815
  • 6
  • 18