jQueryMobile关闭对话框WITHOUT页面刷新

时间:2012-07-25 14:13:58

标签: jquery-mobile

我正在尝试用jQM对话框替换JavaScript prompt()函数。我的目标是提示用户输入一个字符串,然后当他们提交(提交按钮或输入)时,使用他们输入的字符串运行一个函数。

详细地说,我希望取消按钮和[x]关闭对话框并返回页面,什么都不做;我希望提交按钮将#strAccount值传递给函数。这很容易做到没有表格等。但是,我也希望用户能够在#strAccount字段中点击输入。我认为最简单的方法是将其设为表格 - 因此,提交和输入都会提交。

我发现我需要在表单提交时返回false。但是,通过完成所有这些操作,页面正在重新加载,这是我不想要的。

以下是主页内容的一些内容:

 <div id="NewEntry" data-role="page" data-title="New Time Entry">
    <h3>Timesheet </h3>
    <a id="openDialog" data-rel="dialog">Get account name...</a>
 </div>

这是对话框:

<div id="accountEntry" data-role="dialog">
    <div data-role="header">
        <h1>Filter by Account Name</h1>
    </div>
    <div data-role="content">
        <form id="acctNameFilter" data-rel="back" data-ajax="false">
            <p>Enter two or more letters from any part of the account name below:</p>
            <input type="text" id="strAccount" placeholder="Enter any part of account name" autocomplete="off">
            <a href="#NewEntry" data-role="button" data-rel="back" data-icon="delete" data-inline="true">Cancel</a>
            <input type="submit" data-theme="b" data-icon="check" data-inline="true" value="Submit">
        </form>
    </div>
</div>

这是我的页面脚本:

$(document).ready(function()
{
    alert('page loading...'); //alert me if page reloads
    $('#acctNameFilter').submit(function()
    {
        alert($('#strAccount').val()); //did it get passed?
        getAcctsByString($('#strAccount').val()); //the function I want to run
        $('#strAccount').val(''); //clear out the dialog's value... (necessary?)
        $('#accountEntry').dialog('close');
        return false; //stop execution, I thought...
    });
     //#openDialog is a simple href link...
    $('#openDialog').click(function()
    {
        $.mobile.changePage('#accountEntry',{changeHash: false});
    });
}

另一个不太重要的问题:如何在对话框加载后将焦点设置为#strAccount?我想尽量减少用户按下。

提前多多感谢。

0 个答案:

没有答案