У меня очень простая форма, которая отображает одно поле. Когда вы нажимаете на значение и нажимаете submit, он дает вам список флажков. Вы проверяете некоторые, а затем нажмите другую кнопку ниже и отобразите сообщение об успешном завершении/сбое.
Я пытаюсь преобразовать это в мобильное приложение jQuery, но у меня ничего, кроме проблем. Например, я могу прагматично вызывать всплывающее окно, используя $("#element").popup("open");
когда первая страница загружается, но после сообщения, когда я вызываю всплывающее окно, как показано выше, я вижу изменение URL, но всплывающее окно не видно, и это почти точно та же самая страница. Я также попытался просто разместить флажки на вторичном URL (/update
), а затем использовать перенаправление HTTP на исходную страницу, но каким-то образом jQuery Mobile нарушает это.
Я вставил большую часть кода ниже. Если кто-нибудь может указать мне в правильном направлении, что все, что я ищу.
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).on("pagecreate", function() {
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
</head>
<body>
<div id="lookup" data-role="page">
<div data-role="header">
<h1>Lookup Order</h1>
</div>
<div data-role="content">
<?php if (validation_errors()): ?>
<div class="errors"><?=validation_errors()?></div>
<?php endif; ?>
<?php if ($this->session->flashdata('error')): ?>
<div class="errors"><?=$this->session->flashdata('error')?></div>
<?php endif; ?>
<form method="post" id="search_form" action="/search">
<label for="term">Term:</label>
<input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />
<input type="submit" value="Search" />
</form>
<?php if (!empty($fish) && $fish->num_rows()): ?>
<form method="post" action="/update">
<br /><strong>Species:</strong> <?=$species?><br />
<hr />
<a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br />
<?php foreach ($fish->result_array() as $k => $f): ?>
<fieldset data-role="fishgroup">
<?php if (!$f['is_deleted']): ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
<?php else: ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
<?php endif; ?>
<label for="checkbox-<?=$f['id']?>">
<?php if ($f['type']): ?>
<?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
<?php else: ?>
<?= $f['3'] ?> <?= $f['4'] ?>
<?php endif; ?>
</label>
</fieldset>
<?php endforeach; ?>
<a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br /><br />
<input type="button" value="Update Fish(s)" id="button" />
</form>
<?php endif; ?>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
</div> <!-- end content -->
</div><!-- end page -->
</body>
</html>
Используя следующее, вы не можете дважды вызвать вызов обработчика кликов, но я не получаю фактическое всплывающее окно после начальной загрузки страницы:
$(document).off("click").on("click", "#button", function() {
$(" #popupBasic").popup("open");
});
Все, что я получаю, это #&ui-state=dialog
добавленный к URL-адресу, и вызов $("#button").popup("close");
удаляет это.
Возможно, вы добавляете один и тот же обработчик несколько раз
<script type="text/javascript">
$(document).on("pagecreate", function() {
$("#button").off();
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
$("#button").off();
ничего не исправить