Я использую твиттер-загрузчик в Laravel 5.3, и функциональность свертывания работает локально отлично, но не на живом сервере.
У меня болит голова проблемы, которую я не могу понять, и изучил все подобные вопросы, которые я могу найти, но безрезультатно.
У меня есть проект laravel 5.3, использующий twitter bootstrap 3.3.7 и jquery 3.1.1 minified.
Jquery включен через CDN.
Порядок загрузки скриптов следующий, и они загружаются после <footer>, внутри <body>за исключением jquery, который загружается в конце <head>:
- Jquery
- app.js (это создает laravel и включает в себя загрузчик)
- JQuery UI
- мой пользовательский файл javacript
По сути, это две кнопки. полные и неполные, мы будем называть их А и В сейчас для простоты. Каждый из них связан с div. На странице загрузки все скрыто. Когда вы нажмете A, он покажет div A и скроет div B, если он еще не скрыт. Когда вы нажмете B, он сделает то же самое, но наоборот.
Расстраивающая часть? Это работает отлично, без ошибок, как и ожидалось, локально в моей локальной версии XAMPP моего веб-приложения. Однако, когда я перешел на живой сервер, в том, что я (думал), был почти идентичной средой, он работает 80% пути.
Когда вы нажмете A, он покажет A. (хорошо)
Когда вы нажмете B, он покажет B. (хорошо)
Когда вы нажимаете A или B, он не скрывает противоположный div, как локальный. (Плохо)
Так, например, вы нажимаете A, затем B, теперь вы можете видеть как диваны A, так и B вместо просто B.
Вот фрагмент соответствующего JavaScript. Вы можете увидеть $('#complete-'+eid).collapse('hide'); строка, например, это строка, которая работает локально, но не на сервере.
`$('.incomplete-btn, .complete-btn').on('click', function(){
if($(this).hasClass('has-response')){
return;
}
var eid = $(this).attr('href').substr($(this).attr('href').length -1, 1);
if($(this).hasClass('incomplete-btn')){
if($(this).hasClass('lightgrey')){
$(this).removeClass('lightgrey');
$(this).addClass('orange')
}else{
$(this).addClass('lightgrey');
$(this).removeClass('orange');
}
$('#complete-'+eid).collapse('hide'); //hide complete-btn
$('#complete-btn-'+eid).addClass('lightgrey');
$('#complete-btn-'+eid).removeClass('orange');
}
if($(this).hasClass('complete-btn')){
if($(this).hasClass('lightgrey')){
$(this).removeClass('lightgrey');
$(this).addClass('blue')
}else{
$(this).addClass('lightgrey');
$(this).removeClass('blue');
}
$('#incomplete-'+eid).collapse('hide'); //hide incomplete-btn
$('#incomplete-btn-'+eid).addClass('lightgrey');
$('#incomplete-btn-'+eid).removeClass('blue');
}
});`
Я переместил сценарии и изучил их в инструментах разработки, чтобы увидеть, когда они загружаются. (Первоначально я думал, что это как-то связано с тем, что скрытые элементы еще не доступны сценариям или что-то в этом роде). Я играл с отложенными загрузками скриптов или не скрывал div-ы при загрузке страницы, но ничего из этого не изменило проблему, с которой я столкнулся.
Я в недоумении, буду признателен за любую проницательность.
Спасибо всем
Редактировать:
Скрипт примера, который я сделал: https://jsfiddle.net/3o0Lfw7n/18/
Edit2:
Упрощенный код, все еще работает локально, все еще не работает на сервере. Нет ошибок консоли на любом браузере или устройстве. (Он сворачивается / открывается нормально, проблема, которая продолжает сохраняться, заключается в том, что когда вы открываете один, другой не закрывается должным образом.
$(function() {
$('.incomplete-btn, .complete-btn').on('click', function(){
var clicked_btn = $(this);
var eid = clicked_btn.attr('href').substr(clicked_btn.attr('href').length -1, 1);
if(clicked_btn.hasClass('incomplete-btn')){
$('#complete-'+eid).collapse('hide');
}
if(clicked_btn.hasClass('complete-btn')){
$('#incomplete-'+eid).collapse('hide');
}
});
});