Question

在我的应用程序中，用户可以创建一个挑战，然后将其提交给另一个用户。

示例：玩家A向玩家B发送挑战。 PlayerB可以接受或拒绝该挑战。玩家A向玩家B发送挑战后，我刷新了网页（以玩家B登录），可以看到玩家A发出的挑战。我现在可以接受或拒绝该挑战，并且一切正常。

现在，当玩家A创建挑战时，我会在控制器中触发一个事件，该事件将通过推送程序自动向玩家B显示挑战，而无需刷新页面。因此，一旦玩家A向玩家B发送挑战，玩家B现在就可以看到此挑战，而无需刷新页面。到目前为止一切正常。

现在问题开始了。如果玩家B尝试拒绝或接受挑战（通过推送程序出现），页面将重定向并显示419错误。如果玩家B刷新页面，则挑战可以被拒绝或照常接受。仅当玩家响应通过推杆显示的挑战时，才会出现此问题。如果通过页面加载挑战，则表单将正常工作。

这是我的代码的一部分，看起来像通过pusher显示拒绝挑战的形式：

var receivedChallengesWrapper   = $('#kt_tabs_5_3');
var receivedChallenges          = receivedChallengesWrapper.find('.kt-portlet__body');

Pusher.logToConsole = true;
var pusher = new Pusher('XXXXXXXXX', {
    authEndpoint: 'pusher/auth',
    auth: 
    {
        headers: 
           {
                'X-CSRF-Token': '{{ csrf_token() }}'
       }
    },
    cluster: 'eu',
    encrypted: false
});

var privatechannel = pusher.subscribe('private-receivedChallenges-{{ Auth::user()->id }}');

privatechannel.bind('receivedChallenges', function(data) 
{
var existingReceivedChallenges  = receivedChallenges.html();
var newReceivedChallengeHtml = 
`
    <form class="kt-form pull-right" method="POST" action=" 
    {{action('ChallengeController@declineChallenge')}}">
    <input type="hidden" name="challengeid" value="`+data.gameid+` ">
    <button class="btn btn-label-danger btn-outline-danger btn-sm btn-upper btn-submit-declinechallenge"><i class="fa fa-trash-alt"></i> decline</button>
    </form> 
`;
receivedChallenges.html(newReceivedChallengeHtml + existingReceivedChallenges);
receivedChallengesWrapper.show(); 
}

这是我提交表单的AJAX代码：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit-declinechallenge").click(function(e){
    e.preventDefault();

    let form = $(this).parent();
    let challengeid = jQuery('input[name="challengeid"]').val();

    $.ajax({
        type:'POST',
        url: form.attr('action'),
        data: form.serialize(),

    success:function(data){
        if(data.successful) {
            toastr.success(data.successful);
        }
        if(data.error) {
                toastr.error(data.error);
        }

        jQuery.each(data.errors, function(key, value){
            jQuery('#'+key+'-error-border-openchallenge').addClass('is-invalid')
            jQuery('#'+key+'-error-text-openchallenge').show();
            jQuery('#'+key+'-error-text-openchallenge').append('<p>'+value+'</p>');
        });
    }

    });
});

如果在通过页面刷新显示表单后提交表单，则可以正常工作。如果我尝试通过推送程序显示表单后立即提交表单，则会得到419。

CSRF令牌位于头部。

<meta name="csrf-token" content="{{ csrf_token() }}" />

我怀疑这可能是由于JS无法选择$（this）.parent（）;造成的。当通过推送程序显示表单而不刷新页面时。也许不确定与DOM有关的事情。任何帮助将不胜感激。

更新（已修复）我改变了

$(".btn-submit-declinechallenge").click(function(e){e.preventDefault();

到

 $(document.body).on("click", ".btn-submit-declinechallenge", function(e){
                e.preventDefault();

现在按计划工作。

419提交通过推送程序显示的实时表单时

0 个答案: