Постоянная проблема при попытке использовать AJAX для редактирования модальных данных в Laravel - PullRequest
1 голос
/ 31 марта 2019

Я рассматривал различные способы получения идентификатора и его содержимого в модальном режиме с использованием AJAX и Laravel. Все, что я пытаюсь сделать, это позволить пользователю редактировать ответ, нажав на модальное. Я знаю, что мне нужно получить идентификатор выбранного ответа и передать этот идентификатор контроллеру и нацелить этот ответ. У меня отношения «один ко многим» между «Ticket aka a Post» и «Reply». Что работает, так это отправка данных в базу данных с использованием AJAX, однако при нажатии «Подтвердить» для редактирования ответа содержимое, по-видимому, меняет все ответы, а не только тот, который был выбран. Я попытался добавить поле data = id и использовать мой reply-> id, а также присвоить моему модальному модалу reply-> id и data-target response-id; похоже, это работает, но опять-таки не однозначно определяет, какой ответ я хочу обновить.

TicketController

public function editReply(Ticket $ticket)
{
    $message = request()->input('message');
    $ticket->reply()->update(['message' => $message]);

    return response()->json($message);
}

Билетный клинок

@foreach($slug->reply as $r)
    <div class="card-footer reply-footer bg-transparent" style="height: 2.5rem">
        @if(Auth::user()->id == $r->user->id )
            <button type="button" class="btn btn-light btn-outline-dark" id="open-modal"
                    data-toggle="modal" data-id="{{$r->id}}"
                    data-target="#edit-modal">Edit
            </button>
        @endif
    </div>
@endforeach

<!-- edit reply modal !-->
<div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tit">Edit</h5>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="edit-reply">
                    <div class="form-group">
                        <input type="hidden" name="replyID">
                        <textarea class="form-control testing" id="edit-box" rows="12"
                                  name="edit-message"
                                  required></textarea>
                    </div>
                    <button type="button" class="btn btn-light btn-outline-dark"
                            id="edit-button" data-dismiss="modal"
                            style="font-weight: bold;">Confirm
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

JS

<script type="text/javascript">
    jQuery(document).ready(function () {
        $('#edit-button').on('click', function (e) {
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('ticket.edit-reply', $slug->slug) }}",
                type: 'PATCH',
                data: {
                    message: jQuery('#edit-box').val()
                },
                success: function (result, exception) {
                },
                error: function (jqXHR, exception) {
                    alert(jqXHR.status + ' - ' + exception);
                }
            });
        });
    });
</script>

Модель билета

class Ticket extends Model
{
    public function reply()
    {
        return $this->hasMany(Reply::class);
    }

    public function getRouteKeyName()
    {
        return 'slug';
    }
}

Ответить Модель

class Reply extends Model
{
    protected $fillable = [
        'message', 'user_id', 'ticket_id', 'edit-message'
    ];

    public function ticket()
    {
        return $this->belongsTo(Ticket::class);
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Так что в данный момент он обновляет все ответы, а не один, поэтому я должен каким-то образом использовать GET (который я исследовал ранее), но затем подумал, как бы я использовал GET с AJAX для получения идентификатора в сочетании с контроллер, а затем патч для отправки данных, используя другой метод для отправки данных? Разве я просто делаю два отдельных, выполняя каждую задачу независимо?

Некоторые указания, указывающие мне правильное направление, будут высоко оценены, так как я пытаюсь разобраться в этом уже около недели.

1 Ответ

1 голос
/ 31 марта 2019

Все записи обновлены, потому что $ticket->reply() возвращает все ответы, и для всех них вызывается ->update().

Вместо этого вы должны искать этот отредактированный ответ.В blade-файле вы должны указать в форме answerID для редактирования.Так же, как вы помещаете сообщение в

<textarea class="form-control testing" id="edit-box" rows="12" name="edit-message" required></textarea>

, вы добавляете replyID в

<input type="hidden" name="replyID">

. В контроллере вы можете иметь:

public function editReply()
{
    $reply = Reply::find(request()->input('replyID'));
    $message = request()->input('edit-message');
    $reply->update(['message' => $message]);
    return response()->json($message);
}

Или, если ваш URIуже содержит параметр $ replyID a тогда:

public function editReply(Reply $reply)
{
    $message = request()->input('edit-message');
    $reply->update(['message' => $message]);
    return response()->json($message);
}

И 2 вещи, которые вы должны сделать:

1 - изменить множество боковых отношений на множественное число для более стандартного:

class Ticket extends Model
{
 public function replies(){
        return $this->hasMany(Reply::class);
    }

 public function getRouteKeyName()
    {
        return 'slug';
    }
}

2 - Подтвердите право собственности на контроллер, как вы делали это в режиме просмотра Blade, потому что любой может изменить значение replyID в Браузере и отредактировать ответ другого.

...