Question

我正在使用jQueryMobile，我想使用表单在数据库中输入一些值。

我有一个工作的表单并使用test123.php将数据提交到数据库：

  <form method="get" action="test123.php?test=1">
         <input type="submit" value="spiegel" />
  </form>

我收到一个按钮，但新页面显示为普通页面。

使用此解决方案：

  <a  data-role="button" data-rel="dialog" href="#test">
           spiegel
  </a>

我得到一个具有相同输出的对话框（我收到消息“spiegel”）。

但我希望确认网站显示为对话框。

带有data-rel“对话框”的链接，所以我想使用我的php网站，但我想在我提交数据后做一个对话框做数据库。我不知道该怎么做。

感谢您的帮助

Answer 1

<!DOCTYPE html> 
<html> 
<head>
  <!--add all your jquery,jquery mobile as well as its CSS refrences here-->
 </head>
<body>
<div data-role = "page">
    <div data-role="header">
<a href="#login" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus">opendialogpage</a>
</div>
    <div data-role="content">
<p>just for sample display</p></div>
</div>
    <div data-role="dialog" id="login">
    <div data-role="header" data-theme="e"></div>
    <div data-role="content">
        <form id="login_form">
            <fieldset>
                <div data-role="fieldcontain">
                <label>USER NAME:</label>
                <input type="text" id="name" value=""/>
                </div>
                <div data-role="fieldcontain">
                    <label>EMAIL ID:</label>
                    <input type="text" id="email" value=""/></div>
            </fieldset>  
</form>
</div>
</div>
</body>

Answer 2

好的，您希望PHP页面中的数据在对话框中打开，而不是在下一页中打开。

你在寻找什么是AJAX。

AJAX允许您刷新和更改部分HTML页面，而无需更改整个页面。

$.ajax({
   url: 'test123.php',
   type: 'POST',
   data: {spiegel : 'spiegel'}
   error : function (){ document.title='error'; }, 
  success: function (data) {
    $('#ajax_content').html(data);
}

}）;

因此，无论test123.php

生成什么，此函数都将返回到变量数据

链接到文档：http://api.jquery.com/jQuery.ajax/

Answer 3

我也挣扎了一段时间。最后看了一下jquery mobile为对话框页面创建的html。只需创建一个包含以下结构的页面，它将始终作为对话框页面打开（就好像它是从data-rel="dialog"的链接打开的。）

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<!-- include your css, jquery, and jquery mobile files here -->
</head> 
<body> 
<div data-role="dialog">
<div data-role="content">   
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>

您所做的只是将data-role="page"更改为data-role="dialog"。

Jquery移动对话框表格

3 个答案: