AJAX - Refreshing the content when clicked a button

Appears to be a style (css) problem. But just my thought on it. Not sure about the 3 zeros. Only you know your code base.

@jlrdw I don't refer at front end part and the position of those reactions. I don't care for the moment. I am interested only for logic part.

@foreach($getAllStories as $story)
                <div class="col-md-10 mx-auto">
                    <div class="card mb-3"
                        style="padding: 15px; border-top-left-radius: 15px; border-bottom-left-radius: 15px;">
                        <div class="row no-gutters">
                            {{-- Get the story status --}}
                            <div class="col-md-12 text-center">
                                <p>{{$story->post_status}}</p>
                            </div>

                            <div class="col-md-12">
                                <img src="/storage/stories_photos/{{$story->image_path}}" alt="StoryImage"
                                    style="border-top-left-radius: 15px; border-bottom-left-radius: 15px;"
                                    class="float-left">
                                {!!Form::open(['id' => 'submitReactionForm'])!!}
                                {{-- The reaction details for passing them to the controller --}}
                                {{Form::text('getStoryId', $story->story_id, ['hidden' => 'hidden', 'id' => 'getStoryId'])}}
                                {{Form::hidden('_method','POST')}}

                                {{Form::button('<i class="fa fa-4x fa-smile-o" aria-hidden="true"></i>', ['class' => 'btn btn-sm btn-danger float-right getButtonValue',  'id' => 'reactionButton1', 'title' => 'WoW! So nice!', 'value' => 'reaction1', 'name' => 'reactionButton'])}}
                                <p class="float-right wowReactionCounter">{{$story->wow_count}}</p><br><br><br>

                                {{Form::button('<i class="fa fa-4x fa-gratipay" aria-hidden="true"></i>', ['class' => 'btn btn-sm btn-primary float-right getButtonValue',  'id' => 'reactionButton2', 'title' => 'I love that, I want that!', 'value' => 'reaction2', 'name' => 'reactionButton'])}}
                                <p class="float-right wantReactionCounter">{{$story->wants_count}}</p><br><br><br>

                                {{Form::button('<i class="fa fa-4x fa-hand-peace-o" aria-hidden="true"></i>', ['class' => 'btn btn-sm btn-success float-right getButtonValue',  'id' => 'reactionButton3', 'title' => 'Congrats\'!', 'value' => 'reaction3', 'name' => 'reactionButton'])}}
                                <p class="float-right congratsReactionCounter">{{$story->congrats_count}}</p>
                                <br><br><br>

                                {{Form::button('<i class="fa fa-4x fa-frown-o" aria-hidden="true"></i>', ['class' => 'btn btn-sm btn-warning float-right getButtonValue',  'id' => 'reactionButton4', 'title' => 'You make me feel sad! I\'m sorry! :(', 'value' => 'reaction4', 'name' => 'reactionButton'])}}
                                <p class="float-right sadReactionCounter">{{$story->sad_count}}</p><br><br><br>
                                {!!Form::close()!!}
                            </div>

                            <div class="col-md-12">

                                @if(auth()->user()->id == $story->posted_by)
                                {{--If you have posts in the newsfeed, show if that post is posted by you--}}
                                <small class="card-title"><span class="text-primary"><b>You</b></span> posted that on
                                    <span class="text-warning">{{$story->storyCreatedAt}}</span></small>
                                @else
                                <small class="card-title">Posted by <span
                                        class="text-primary"><b>{{$story->name}}</b></span> on <span
                                        class="text-warning">{{$story->storyCreatedAt}}</span></small>
                                @endif
                            </div>

                        </div>

                    </div>
                </div>
                @endforeach

$('.wowReactionCounter').load(' .wowReactionCounter');

What is that supposed to be doing? load() usually is loading data from a url or external file. It seems this is probably just copying the contents of .wowReactionCounter into itself, which is probably why it's just adding 0's if it was 0 to start with?

What is in the data you retrieve? You do nothing with it. The data presumably contains the updated numbers you should be outputting?

Hello, @cronix .Thank you for your interest.

I am a newbie in AJAX and is still confusing for me. With the statement tagged by you I want just to refresh the content of this element. But as I said, if I have 7 posts in foreach there will be 7 digits because the ajax goes through this loop.

In simple terms, I want just to increment or decrement likes when someone clicks on a reaction button. But in a real manner, exactly like in the database table. If you have another idea to acquire these things, please give me that.

The data returns nothing, I just tried to test the inputs.

You will be better off loosing that collective library:

https://laracasts.com/discuss/channels/general-discussion/noob-here

You have to increment, save to database, and reload since the data comes from back end.

So you need an ajax call to save the data, and probably another to retrieve the updated data.

Or show an increase first, then save the data.

https://forum.jquery.com/topic/add-1-if-you-press-a-button-increments

I would suggest taking a good ajax JS tutorial also.

@jlrdw The first part is done. I have to do only that part where I update the element with the real-time results from DB.

To add 1 if I press the button is not a great idea because the user can also cancel the reaction like on Facebook: IF the reaction already exists, delete this reaction and decrement count by -1. So that is not an idea to get through.

I dug tons of pages and I don't know how to retrieve data from controller to AJAX but there are only few ideas. Maybe is not a common and great practice. The pre-solution in my head for the moment is:

1)Take data from the controller directly in ajax call; 2)Populate dynamically the element with the suited details for each post.

Just an idea. But I don't know how to handle it yet. Thank you.

It requires in the controller to send back the response:

return Response::json( $yourdata );

Once returned, do what you need with the data, in your case updating an element with current DB data. See also https://laracasts.com/discuss/channels/guides/jquery-get-response a basic example, validate your data.

Basically the controller should be returning json in response to the ajax request. Something like { wowTotal: 5, wantTotal: 0, congratsTotal: 10, sadTotal: 0}

Then imagine you have spans like this in your html

<span id="wowTotal">0</span>
<span id="wantTotal">0</span>
<span id="congratsTotal">0</span>
<span id="sadTotal">0</span>

Then your ajax success method would just be

success: function(data) {
    $("#wowTotal").html(data.wowTotal);  // take wowTotal from json and stick it in <span id="wowTotal">
    $("#wantTotal").html(data.wantTotal);
    // ...
}