.html() is not working after ajax call

Question

I'm wasting some hours to find solution, I can't find it...

Here is my code :

$(".usefull").bind("click", function(e){
    e.preventDefault();
    var fbkId = $(this).find(".glyphicon").data("id");
    $(this).parent().html('<a href="#" class="btn btn-grey usefull disabled"><img src="/www/images/mini-loader.gif" alt="" /> Est utile</a>');
    var that = this;
    $.post('{{ route("www-ajax-feedback-add-usefull") }}',{ fbkId: fbkId },
            function(data) {
                if (data == '1') {
                    toastr.success('Merci pour votre contribution !');
                    $(that).parent().html('<i class="glyphicon glyphicon-thumbs-up disabled"></i> Est utile</a>');

                } else {
                    toastr.error(data);
                }
            }
    );
    return false;
});

When I click on a button, I update the button with loading gif.

When my ajax call is finish, I want to update the state button, but it's not working.

Thanks for help

Here it is more informations :

<a href="#" class="btn btn-grey agree"><i class="glyphicon glyphicon-thumbs-up" data-id="2161"></i> Je suis d'accord</a>

If I put console.log($(that).html()); after $.post here it output : <i class="glyphicon glyphicon-thumbs-up" data-id="2161"></i> Je suis d'accord

what is "that"?? $(that).parent().html(...) , is it "this"? – Mohammad Kermani Jun 16 '14 at 09:00 — Mohammad Kermani, Jun 16 '14 at 09:00
seems your HTML is incorrect in `html()` call ... – Sumit Gupta Jun 16 '14 at 09:00 — Sumit Gupta, Jun 16 '14 at 09:00

score 0 · Answer 1 · answered Jun 16 '14 at 09:00

0

For any elements which will get binding to the DOM through ajax or added at run time, you have to use

http://api.jquery.com/live/

or delegates

http://api.jquery.com/delegate/

Those will be binded at the document level.

answered Jun 16 '14 at 09:00

Chankey Pathak

21,187
12
85
133

I tried with $(".usefull").on("click", function(){ (live is depreciated and "delegate" and "on" are same). It's not working – sHaDeoNeR Jun 16 '14 at 10:03
Then try using `.done(function() {` and see if it goes in that block or not, reference: http://api.jquery.com/jquery.post/ – Chankey Pathak Jun 16 '14 at 10:13
Thanks for advises, yes it goes in, but the $(this).parent().html still does not work – sHaDeoNeR Jun 16 '14 at 20:57

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

==>this reference a javascript object and $(this) used to encapsulate with jQuery.

$(".usefull").bind("click", function(e){
    e.preventDefault();
    var fbkId = $(this).find(".glyphicon").data("id");
    $(this).parent().html('<a href="#" class="btn btn-grey usefull disabled"><img src="/www/images/mini-loader.gif" alt="" /> Est utile</a>');
    var that = $(this);
   // use $(this); insetd of this;

    $.post('{{ route("www-ajax-feedback-add-usefull") }}',{ fbkId: fbkId },
            function(data) {
                if (data == '1') {
                    toastr.success('Merci pour votre contribution !');
                    $(that).parent().html('<i class="glyphicon glyphicon-thumbs-up disabled"></i> Est utile</a>');

                } else {
                    toastr.error(data);
                }
            }
    );
    return false;
});

read more at jQuery: What's the difference between '$(this)' and 'this'?

edited May 23 '17 at 12:13

Community

1
1

answered Jun 16 '14 at 09:01

Anant Dabhi

10,864
3
31
49

I just replace like you advised it's still same problem – sHaDeoNeR Jun 16 '14 at 09:14
are you sure that your ajax function is done sucessfully please check browser console if u have any error – Anant Dabhi Jun 16 '14 at 09:54
Yes it's done, I saw message trought toastr and have no error – sHaDeoNeR Jun 16 '14 at 10:04
Il would say that it's not still working but I have no error in console – sHaDeoNeR Jun 16 '14 at 21:06

.html() is not working after ajax call

2 Answers2