Это снова я!Я возвращаюсь к вам, потому что у меня проблема с Bootstrap Collapse в моем проекте Laravel.
Итак, я использую Bootstrap 4.2 с Laravel 5.7, работающим на Apache 2. Все отлично работает, кроме этой проблемы с bootstrapсвернуть.
Так вот мой код:
@if(Auth::check())
<div class="col-md-12 mb-0">
<div class="row">
@foreach($message as $message)
<div class="col-md-2">
<div class="collapse multi-collapse" id="collapse-{{$message->id}}">
<div class="font-weight-bold">
<div id="pvMessage">
@foreach($message->PrivateMessages as $msg)
<div id="{{$msg->conversation_id}}">{{$msg->userInfo->name}} : {!! $msg->message !!}</div><br /> @endforeach
</div>
</div>
<form class="pt-2">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="user_id" value="{{Auth::user()->id}}" id="user_id" />
<input type="hidden" name="conversation_id" value="{{$message->id}}" id="channel_id" />
<div class="input-group mb-3">
<input type="text" name="message" id="message" class="form-control">
<div class="input-group-append">
<input type="hidden" id="sendPv" />
</div>
</div>
</form>
</div>
</div>
@endforeach
</div>
<div id="private-message">
@foreach($private as $private)
<button onclick="clearInterval(getPvListe)" @if($private->latestMessage->seen == 0 && $private->latestMessage->user_id !== Auth::user()->id)
class="btn btn-danger"
@else
class="btn btn-info"
@endif
type="button" data-toggle="collapse" data-target="#collapse-{{$private->id}}" aria-expanded="false" aria-controls="collapse-{{$private->id}}">
@if($private->user_id != Auth::user()->id)
{{$private->userInfo->name}}
@elseif($private->to_id != Auth::user()->id)
{{$private->toInfo->name}}
@endif</button> @endforeach
</div>
@endif
Javascript:
var getPvListe = setInterval(function () {
$("#private-message").load(location.href + " #private-message");
}, 2000);
setInterval(function () {
$("#pvMessage").load(window.location.href + " #pvMessage");
}, 2000);
$("#message").on('keydown', function (e) {
if (e.which == 13) {
$("#sendPv").trigger('click');
return false;
}
});
$("#sendPv").click(function (e) {
e.preventDefault();
var user_id = $("input[name='user_id']").val();
var conversation_id = $("input[name='conversation_id']").val();
var message = $("input[name='message']").val();
var objDiv = document.getElementById("scrollable");
$.ajax({
type: 'POST',
url: '/pv/sendPv',
data: {
message: message,
conversation_id: conversation_id,
user_id: user_id
},
success: function (data) {
console.log(data.success);
$("#message").val('').focus();
objDiv.scrollTop = objDiv.scrollHeight;
}
});
});
Я ожидаю, что весь крахпоказать правильно, с хорошими сообщениями при хороших идентификаторах.На самом деле, когда я открываю, например, коллапс-1, он показывает мне в коллапсе-1: коллапс-1 и коллапс-2 в том же, но когда я смотрю свой исходный код, все в порядке.
Edit
Когда я проверял свой код в Mozilla, я увидел, что эта часть:
setInterval(function () {
$("#pvMessage").load(window.location.href + " #pvMessage");
}, 2000);
не работает должным образом, так как загружается слишком много, альтернатива?