follow and unfollow using single button with jquery & ajax, by laravel controller

Question

I am having two controller for follow and unfollow separately. I want to design a single button which will be used in many places of the website featuring follow - unfollow - following action.

I mean when the user is following it will be declared as following until the hover effect call else it will say follow andwhen hover come it gives unfollow if following already or continue the follow option.

That was the details of the button outlook. Now When I get into the implementation, I can do it for single controller call where the checking done , (by gettin some help from internet). But I want to call two different controller for two different action.

like for follow-> {{ action('FollowsController@show', 'id'); }}

and for unfollow

{{ action('FollowsController@destroy', 'id'); }}

here show is post method and destroy is having delete action.

here i am providing the full action in code : though this code is not giving what I want anyway.

<script type="text/javascript">
//Changes the Following text to Unfollow when mouseover the button 
$(document).ready(function()
{
    $('.following').hover(function()
    {
        $(this).text("Unfollow");
    },function()
    {
        $(this).text("Following");
    });
 });

 //Perform the Following and Unfollowing work
function follow_or_unfollow(id,action)
{
    var dataString = "id=" + id;
    $.ajax({  
        type: "POST",  
        url: "{{ action('FollowsController@show', 'id'); }}",  
        data: dataString,
        beforeSend: function() 
        {
            if ( action == "following" )
            {
                $("#following"+id).hide();
                $("#loading"+id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
            }
            else if ( action == "follow" )
            {
                $("#follow"+id).hide();
                $("#loading"+id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
            }
            else { }
        },  
        success: function(response)
        {
            if ( action == "following" ){
                $("#loading"+id).html('');
                $("#follow"+id).show();

            }
            else if ( action == "follow" ){
                $("#loading"+id).html('');
                $("#following"+id).show();
            }
            else { }
        }
    }); 
}
</script>

            @if(0)

            <span id="loading {{ $topdebater->id }}"></span>
            <button class="btn btn-lg btn-danger button following" id="following {{ $topdebater->id }}" onClick="follow_or_unfollow({{ $topdebater->id }},'following');">Following</button>

            <span style="display:none;" class="btn btn-lg button follow" id="follow {{ $topdebater->id }} ?>" onClick="follow_or_unfollow({{ $topdebater->id }},'follow');">Follow</span>

            @else

            <span id="loading{{ $topdebater->id }}"></span>
            <button class="btn btn-info button follow" id="follow{{ $topdebater->id }}" onClick="follow_or_unfollow({{ $topdebater->id }},'follow');">Follow</button>

            <span style="display:none;" class="button following" id="followingfollow{{ $topdebater->id }}" onClick="follow_or_unfollow(follow{{ $topdebater->id }},'following');">Following</span>

            @endif

I am very new at ajax. learning hard though. I need you support in this research . Thanks in advance.

You use the same action URL when you follow and unfollow. Is the controller's show-function responsible of making the difference between these two action ? — Fractaliste, Nov 23 '13 at 21:44
Sir this code was working for only the single controller where I was checking whether the user is following or not and take step there accordingly. But in the new situation I want it call two different controller from ajax decision. Help me pls, sir. — Sagiruddin Mondal, Nov 23 '13 at 21:49

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Do you already try something like this ?

function follow_or_unfollow(id,action)
{
    if ( action == "following" ){ // I'm not sure for the condition, it depends of its meaning.
        myUrl = "{{ action('FollowsController@show', 'id') }}" ;
        myMethod = "GET";
    } else {
        myUrl = "{{ action('FollowsController@destroy', 'id') }}" ;
        myMethod = "DELETE";
    }
    var dataString = "id=" + id;
    $.ajax({  
        type: myMethod ,  
        url: myUrl,  
        data: dataString,

        // The remaining code...

It won't work but give me the URL generated. Then we have to make them correspond to the controller table according to the documentation.

HTTP delete method will be a problem I think, but I hope it can be bypass with arguments (like for forms). EDIT : finally DELETE method works directly.

edited May 23 '17 at 12:05

Community

1
1

answered Nov 23 '13 at 22:14

Fractaliste

5,777
11
42
86

Hey bro Thanks for the reply ! yes this part look promising. But what about the view where the button will change accordingly. I mean when it is returning from destroy controller how does is regain to the follow button ? – Sagiruddin Mondal Nov 24 '13 at 07:00
To update the view your javascript success function is a good start. Your destroy controller has to echo a return value, which one you'll receive into the javascript `response` variable in order to check if everything succeeded, and then replace or not the follow button or not. – Fractaliste Nov 24 '13 at 15:50
At this moment I need to print the value of id in the place where is is written as `'id'` but cant manage it. I just need to know how to make that id string as a value. – Sagiruddin Mondal Nov 24 '13 at 15:53
Are you talking about the id into the action function (which is server side executed, so I think you can't use it like this if you have more than 1 content followable) or in javascript function ? – Fractaliste Nov 24 '13 at 16:04
Suppose I am having `id = 2` then I want `myUrl = "{{ action('FollowsController@show', 2) }}" ;' ------ instead of `myUrl = "{{ action('FollowsController@show', 'id') }}" ;` for more [click me-1](http://stackoverflow.com/questions/20174667/call-laravel-controler-from-an-ajax-request-with-get-put-delete-method/20174707?noredirect=1#comment30077760_20174707) and [click me-2](http://stackoverflow.com/questions/20175881/how-to-pass-a-value-from-a-js-function-to-a-laravel-controller?noredirect=1#comment30079321_20175881) – Sagiruddin Mondal Nov 24 '13 at 16:08
basically it will print a JavaScript variable value inside a php tag. – Sagiruddin Mondal Nov 24 '13 at 16:43

score 0 · Answer 2 · answered Nov 24 '13 at 18:06

The solution of the question partly discovered. But yet to go a long. the first execution which is show mehod in the controller can be done by going to the link of perticular page which fetch the controller itself ....

like if {{ action('FollowsController@destroy', 'id') }} fetch a link like this http://localhost/blabla/id

then we have to fetch

 if( action == "follow" ) {
        myUrl = "http://localhost/blabla/"+id;
        myMethod = "GET";
    }

Cause the controller call from the js can not be resolved as it should be fetched with JS variable.

till this it is working

But in case of delete method what will be the the link to call that is still a question. when I get that answer I will try to post it here.... thanks !

myUrl = "{{ action('FollowsController@destroy', 'id') }}" ;

follow and unfollow using single button with jquery & ajax, by laravel controller

2 Answers2

Linked