使用单个按钮跟随和取消关注jquery& ajax,由laravel控制器

时间:2013-11-23 14:25:06

标签: ajax jquery laravel laravel-4

我有两个控制器可以跟随和取消关注。我想设计一个单一的按钮,将在网站的许多地方使用,其中包括跟随 - 取消关注 - 跟随行动。

我的意思是当用户关注它时将被声明为跟随,直到悬停效果调用,否则它会说跟随并且当悬停时,如果已经跟随,则给予取消关注或继续跟随选项。

这是按钮展望的细节。现在当我进入实现时,我可以在单个控制器调用中进行检查,(通过互联网获得一些帮助)。但是我想为两个不同的动作调用两个不同的控制器。

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

和取消关注

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

这里显示的是post方法,destroy有删除操作。

这里我在代码中提供了完整的操作:尽管这段代码并没有给出我想要的东西。

<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

我在ajax很新。虽然努力学习。我需要你支持这项研究。提前谢谢。

2 个答案:

答案 0 :(得分:0)

你们已经尝试过这样的事吗?

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...

它不起作用,但给我生成的URL。然后我们必须根据the documentation使它们对应于控制器表。

我认为HTTP删除方法将是一个问题,但我希望它可以绕过参数(比如表单)。 EDIT : finally DELETE method works directly

答案 1 :(得分:0)

问题的解决方案部分被发现。但是要走多远。 在控制器中显示mehod的第一个执行可以通过访问获取控制器本身的特定页面的链接来完成....

就像{{ action('FollowsController@destroy', 'id') }}获取此类http://localhost/blabla/id

之类的链接一样

然后我们必须获取

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

因为无法解析来自js的控制器调用,因为它应该使用JS变量获取。

直到它正常工作

但是在删除方法的情况下,调用的链接仍然是一个问题。当我得到答案时,我会尝试在这里发布....谢谢!

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