follow and unfollow using single button with jquer

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.

Answer 1

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.

Answer 2

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') }}" ;