Ошибка Jquery Mobile при динамическом изменении вкладки, не делает вкладку активной
У меня есть 3 вкладки во всплывающем окне. В зависимости от того, какая гиперссылка нажата, я бы хотел, чтобы она стала активной для конкретной вкладки.
После удаления всего несущественного кода кажется, что он потерпит неудачу, если к гиперссылке применен класс 'ui-btn'. Если ссылка оставлена без стиля, то она работает нормально. Он выбирает правильную вкладку, но не делает ссылку на панель навигации активной / выделенной.
Кто-нибудь может пролить свет на это? Или простая работа вокруг.
Пожалуйста, смотрите JSFiddle Demo
HTML
<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">
<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">
<div data-role="tabs" id="tabs">
<div data-role="navbar">Type:
<ul>
<li><a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a></li>
<li><a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a></li>
<li><a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a></li>
</ul>
</div>
<div id="CC_OO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="OO_req" id="CC_OO_req" />
<label for="CC_OO_req">OO</label>
</fieldset>
</div>
</div>
<div id="CC_CLO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="CLO_req" id="CC_CLO_req" />
<label for="CC_CLO_req">CLO</label>
</fieldset>
</div>
</div>
<div id="CC_DO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="DO_req" id="CC_DO_req" />
<label for="CC_DO_req">DO</label>
</fieldset>
</div>
</div>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">Save</button>
<a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>
</form>
</main>
</div>
These don't work...
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
As they're 'ui-btn'
<br />
These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" >OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'
Jquery
function editDayform(day, OO, CLO, DO) {
if (OO == 'on') {
$('#CC_OO_tab_link').trigger('click');
} else if (CLO == 'on') {
$('#CC_CLO_tab_link').trigger('click');
} else if (DO == 'on') {
$('#CC_DO_tab_link').trigger('click');
}
if (OO == 'on') {
$('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
}
if (CLO == 'on') {
$('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
}
if (DO == 'on') {
$('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
}
return true;
}
1 ответ
Сначала решение вашей проблемы.
Я не уверен, что именно происходит за сценой. Но если вы нажмете кнопку jquery-mobile .ui-btn jquery-mboile удалит .ui-btn-active из всех других кнопок на вашей странице и выделите ту, которая нажата. Это займет некоторое время. Но вы вызываете событие "clicked" на своей вкладке сразу же, и прежде чем jquery-mobile завершит удаление всех .ui-btn-active,
Если вы задерживаете $('#CC_OO_tab_link').trigger('click'); и 1 миллисекунды уже достаточно, это будет работать. Смотрите фрагмент кода
function editDayform(day, OO, CLO, DO) {
if (OO == 'on') {
setTimeout(function() {
$('#CC_OO_tab_link').trigger('click');
}, 1);
} else if (CLO == 'on') {
setTimeout(function() {
$('#CC_CLO_tab_link').trigger('click');
}, 1);
} else if (DO == 'on') {
setTimeout(function() {
$('#CC_DO_tab_link').trigger('click');
}, 1);
}
if (OO == 'on') {
$('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
}
if (CLO == 'on') {
$('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
}
if (DO == 'on') {
$('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
}
return true;
}<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">
<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
Type:
<ul>
<li>
<a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
</li>
<li>
<a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
</li>
<li>
<a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
</li>
</ul>
</div>
<div id="CC_OO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="OO_req" id="CC_OO_req" />
<label for="CC_OO_req">OO</label>
</fieldset>
</div>
</div>
<div id="CC_CLO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="CLO_req" id="CC_CLO_req" />
<label for="CC_CLO_req">CLO</label>
</fieldset>
</div>
</div>
<div id="CC_DO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="DO_req" id="CC_DO_req" />
<label for="CC_DO_req">DO</label>
</fieldset>
</div>
</div>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">
Save
</button>
<a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>
</form>
</main>
</div>
These don't work...
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
As they're 'ui-btn'
<br />These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');">OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'Но ваш код выглядит очень странно, и там много запахов кода.
Во-первых: все onclick() на ваших ссылках. Вы должны удалить их, и вместо этого вы должны привязать событие к кнопкам.
Я добавил кнопки в класс.dayformButton и пользовательские данные attr data-dayorm="". Затем мы связываем событие click с классом dayformButton, если это событие происходит, мы смотрим, какая кнопка была нажата (с атрибутом data-dayform), и затем мы сохраняем этот атрибут в var, чтобы сделать его доступным для прослушивателя всплывающих событий.
JQuery-Mobile дает вам много разных событий для всех виджетов. В этом случае мы можем взять события из всплывающего окна. Первое событие, которое мы связываем beforeposition,
Срабатывает до того, как всплывающее окно вычисляет координаты, где оно появится
Прежде чем всплывающее окно будет видно на экране, мы запускаем событие щелчка на правой вкладке и устанавливаем соответствующий флажок. Ты можешь измениться beforeposition в afteropen и вы увидите, что флажок и вкладка активируются сразу после открытия всплывающего окна.
И на последнем шаге мы связываем событие, когда всплывающее окно закрывается. Событие jquery-mobile afterclose
Срабатывает, когда всплывающее окно полностью закрыто
Мы используем это событие для сброса формы после закрытия всплывающего окна. Таким образом, мы удаляем последний onclick из вашего HTML.
Ваша функция editDayform выглядит также очень странно. Ты повторяешься. Вы делаете 3 раза одно и то же, только с разными идентификаторами. Более простой способ - просто изменить идентификатор на переданное значение. Таким образом, вы избавитесь от всего этого, если и еще.
// Set a global var
var dayform = null;
// Bind a Click Event
$(".dayformButton").on('click', function() {
// Which Button is clicked and set the global Var to this value
dayform = $(this).data('dayform');
console.log("Clicked: " + dayform);
});
// Bind Events to the popup
$("#CC_dayformPopup").popup({
beforeposition: function(event, ui) {
// Select the matching tab and check the checkbox
$('#CC_' + dayform + '_req').prop('checked', true).checkboxradio('refresh');
$('#CC_' + dayform + '_tab_link').trigger('click');
},
afterclose: function(event, ui) {
console.log("Popup closed");
// Reset the form when the popup is closed
$('#CC_dayform').trigger("reset");
}
});<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">
<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
Type:
<ul>
<li>
<a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
</li>
<li>
<a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
</li>
<li>
<a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
</li>
</ul>
</div>
<div id="CC_OO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="OO_req" id="CC_OO_req" />
<label for="CC_OO_req">OO</label>
</fieldset>
</div>
</div>
<div id="CC_CLO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="CLO_req" id="CC_CLO_req" />
<label for="CC_CLO_req">CLO</label>
</fieldset>
</div>
</div>
<div id="CC_DO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="DO_req" id="CC_DO_req" />
<label for="CC_DO_req">DO</label>
</fieldset>
</div>
</div>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">
Save
</button>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>
</form>
</main>
</div>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="OO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="CLO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="DO" class="dayformButton ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>