ダイアログを開くモバイルページがあります。
ダイアログには、複数選択メニューがあります。
次のように、すべてが正常に機能します
- ダイアログで複数選択メニューのボタンをクリックしてメニューを開き、
- multiselect からアイテムを選択します
- 複数選択メニューを閉じる
- ダイアログを閉じます。
ここでdata-native-menu="false"、複数選択メニューに追加すると、ダイアログの動作が次のように変わります
- ダイアログで複数選択メニューのボタンをクリックしてメニューを開き、
- multiselect からアイテムを選択します
- 複数選択メニューを閉じる
- ダイアログを閉じます。
- ダイアログが閉じ、前のページが表示されます。つまり、履歴を 1 ページ戻しました
これに対する解決策は何ですか？
コード
これにより、最初のダイアログが開きます
<a href="#refine-search" data-rel="dialog" data-role="button" data-theme="a" data-inline="true">Refine</a>
複数選択メニューのコード
<div class="ui-block-b">
<select name="select-choice-1" id="select-choice-1" multiple="multiple" data-theme="b" data-native-menu="false">
<option>Select</option>
<?php foreach($cuisines as $cuisine): ?>
<?php echo "<option value='{$cuisine->cuisine_id}'>{$cuisine->cuisine_name}</option>" ;?>
<?php endforeach; ?>
</select>
</div>
関連するjs
jQuery('#refinement-done').on('click', function() {
console.log('refinement done');
var options = '<?php echo $search_options; ?>&',
min_delivery_amt,
is_pure_veg,
is_open,
min_rating,
cuisines;
min_delivery_amt = $('input[name="min"]').val();
if(min_delivery_amt && !parseInt(min_delivery_amt, 10)) {
alert('Min. Delivery Amount must be a number');
return false;
}
jQuery('.ui-dialog').dialog('close');
if(jQuery('input[name="min"]').val())
options += 'minprice=' + jQuery('input[name="min"]').val() + '&';
if(jQuery('#select-choice-1').val())
options += "cuisine=" + jQuery('#select-choice-1').val().join(',') + '&';
options += 'pureveg=' + jQuery('#is_pure_veg').val() + '&';
if(jQuery('#rating').raty('score')) {
options += 'minrating=' + jQuery('#rating').raty('score') + '&maxrating=5';
}
console.log('search data');
console.log(options);
JE.search_restaurants(options, "<?php echo $service_type; ?>");
});