CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
Joe
Joe

Reputation: 9

AJAX response not changing current HTML

My problem is this. I have project in Laravel have made AJAX call for like button. Data base gets updated and all but on success jQuery only changes first matching id not the one I am clicking on. My code below.

$(function(){
    $('#likeForm').submit(function(e){
        var success = "<span style='color: #286090'><span class='fa fa-heart'></span><span> Liked</span>";
        e.preventDefault();
        var user = $('input[name="user_id"]').val();
        var token = $('input[name="_token"]').val();
        $.ajax({
            url:'like-post',
            type: 'get',
            data: {
                '_token': token, 
                'user': user 
            },
            dataType: 'JSON',
            success: function() {
                $('#likeButton').replaceWith(success);
            },
            error: function() {}
        })
    })
});

<form id="likeForm" >
    <input type="hidden" name="user_id" value="{{$user->id}}" >
    <a class="likeBtn" id="likeButton" onclick="$('#likeForm').submit()"><span>
    <span class="fa fa-heart"></span> Like</a>
    <input type="hidden" name="_token" value="{{ Session::token() }}">
</form>

Upvotes: 0

Views: 568

Answers (4)

Hammerbot
Hammerbot

Reputation: 16364

Like the comments said, you can only have uniques ids in your html code.

To update the form the user clicked on, you need to use this:

$(function(){
    $('.likeForm').submit(function(e){
        var self = this;
        var success = "<span style='color: #286090'><span class='fa fa-heart'></span><span> Liked</span>";
        e.preventDefault();
        var user = $('input[name="user_id"]').val();
        var token = $('input[name="_token"]').val();
        $.ajax({
            url:'like-post',
            type: 'get',
            data: {
                '_token': token, 
                'user': user 
            },
            dataType: 'JSON',
            success: function() {
                $(self).find('.likeButton').replaceWith(success);
            },
            error: function() {}
        })
    })
});

Upvotes: 1

Sahal Tariq
Sahal Tariq

Reputation: 219

instead of 

success: function() {
                $('#likeButton').replaceWith(success);
            },

try

success: function() {
                $(this).replaceWith(success);
            },

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337646

jQuery only changes first matching id

That's your problem - you cannot have multiple id attributes in the DOM. They must be unique. Change them to classes. You will also need to traverse the DOM using the reference of the element which raised the event to find the elements you need to change. Try this:

<form class="likeForm">
    <input type="hidden" name="user_id" class="user_id" value="{{$user->id}}" />
    <input type="hidden" name="_token" class="token" value="{{ Session::token() }}" />
    <button class="likeBtn>
        <span class="fa fa-heart"></span> 
        Like
    </button>
</form>

$(function(){
    $('.likeForm').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        $.ajax({
            url:'like-post',
            type: 'get',
            data: {
                _token: $form.find('.token'),
                user: $form.find('.user_id') 
            },
            dataType: 'JSON',
            success: function() {
                $form.find('.likeBtn').replaceWith('<span style="color: #286090"><span class="fa fa-heart"></span><span> Liked</span>');
            }
        })
    })
});

Note that I changed the a with the onclick attribute to a button. This means the form element will be automatically submit on click of that button without any JS interference. You can then simply style the button as you need using CSS.

Upvotes: 0

soywod
soywod

Reputation: 4520

It's normal, an ID is used for a unique element. If you have more that 2 ID in your HTML then you are wrong. jQuery will select the first ID he founds. You should use classes instead, or data attributes.

Upvotes: 0

Related Questions