Question

我正在使用jQuery Mobile 1.4显示一个对话框，以防输入字段中没有数据。我有一个问题，对话框显示在另一个页面，我希望它在同一页面。此外，当我点击按钮“x”时，它返回页面“item_data.php”，然后返回“dialog.php”。我创建了一个文件“dialog.php”，其中包含：

<div data-role="page" data-dialog="true">
    <div data-role="header" data-theme="b">
        <h1><?php echo $_GET['mesage']; ?></h1>
    </div>
    <div role="main" class="ui-content">
        <h1>Warning</h1> 
        <p>Can't find this location</p>
    </div>
</div>

和item_data.php

    <div class="ui-field-contain">
        <label for="text-basic">Insert Item Location:</label>
        <input  data-type="search" id="searchField_2" placeholder="Location" data-theme="a">
        <ul id="suggestions_2" data-role="listview" data-inset="true"></ul></div>
<script type="text/javascript">
    $(document).ready(function() {
        jQuery("#searchField_2").autocomplete({
            target: $('#suggestions_2'),
            source: 'locations.json',
            callback: function(e) {
                var $a = $(e.currentTarget);
                $('#searchField_2').val($a.text());
                $("#searchField_2").autocomplete('clear');
            },
            minLength: 1,
            matchFromStart: false
        });

    });
</script>

Answer 1

对话框为deprecated in v1.4 of jQuery mobile。 API文档提到Popup Widget作为替代。基本上，您只需将对话框的数据角色从page设置为popup，如下所示：

<div id="locationWarning" data-role="popup" data-theme="b">
    ...
</div>

关于您的重新加载问题：您必须截取表单的提交事件并显示弹出窗口。工作示例：http://jsfiddle.net/marionebl/Zp6c7/

var $form = $('.formSelector');
var $searchField = $('#searchField_2');

$form.on('submit', function(e){
   if ($searchField.val().length === 0) {
       e.preventDefault();

       $.get('./dialog.php?message="Location not found"', function(response){
            var $popup = $(response);
            var $existing = jQuery('#' + $popup.attr('id'));

            if ($existing.length > 0) {
              $existing.replaceWith($popup);
            } else {
              $('body').append($popup);
            }

            $popup.popup();
            $popup.popup('open');
       });
   }
});

同一页面上的jQuery移动显示对话框

1 个答案: