応答のLaravel AJAXの表示/非表示ボタン

ベリサリオペロ：

私が好きか嫌いとしてマークモデル記録するために、trueまたはfalseにモデルフィールドを更新ボタンクリックイベントのAJAX要求を作成しました。

環境：

ときに、ユーザーのアクセスビューレコードが気に入ったかunlikedのマークが付いている場合、それは応じて1つまたは他のボタンを表示しなければなりません。
ユーザアクセスビューAJAX要求やショーを投稿するのに必要ですので、彼は複数のレコードを持っていますし、彼が好きかそれらのいずれかとは違っできるとき/そのモデルのレコードのcorresponing HTML要素に正しいボタンを非表示にします。
HTMLコード（これは実際のビューは、モデルのレコード量に基づいて、このコードの複数のインスタンスを持つことができ、単に一つのレコードのインスタンスです）

<div class="kt-portlet__head-toolbar">
    <a href="#" class="btn btn-icon" data-toggle="dropdown" onClick="likeProperty({{$match->matchid}})">
        {{$match->matchid}}
        @if ($match->prop_like == true)
        <i class="flaticon2-bell kt-font-brand likeprop" id="likeprop" name="likeprop"></i>
        @endif
        @if ($match->prop_like == false)
        <i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop" name="unlikeprop"></i>
        @endif
    </a>
</div>

Javascriptのコード

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

    $.ajax({
        method: 'post',
        url: '/processes/offerdemand/matchlike/'+ matchid,
        data: {
            'id': matchid,
        },
        success: function () {
            // hide like button
            $('#likeprop').hide();
            // show like button
            $('#unlikeprop').show();
        },
        error: function (XMLHttpRequest) {
            // handle error
        }
    });
}

DOESの誰もが要件のこのタイプのアイデアを持って？

よろしく

ジェームズ・クラーク開発者：

私が正しく理解していた場合、あなたは持っている問題は、HTMLのID likepropとunlikepropがユニークではないということです。

この問題の最も早い解決策は、彼らが一意になるように、IDにレコードIDを追加することです。例えば

<i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop-{{ $match->id }}" name="unlikeprop-{{ $match->id }}"></i>

そして

$('#unlikeprop-'+matchid).show();

このようなジャグリングIDは有効であるが、簡単なバグに乱雑とリードを得ることができます。このような角度などのより現代的なJavaScriptフレームワークは、反応し、そしてvue.jsは、このような双方向のデータバインディングなどの概念を導入することにより、これらの問題の一部を解決しよう。長い目で見れば、あなたはvue.jsに探して検討するかもしれないhttps://laravel.com/docs/7.x/frontend#writing-vue-components。

応答のLaravel AJAXの表示/非表示ボタン

おすすめ