在jqueryMobile HTML页面中使用jquery提交刷新节标记

Question

我正在使用Dreamweaver6.0中的jquerymobile模板并构建移动应用程序界面。在主屏幕上，我有四个按钮 - 例如，查看，创建，更新，删除。 当我点击创建时，它会打开一个新屏幕（从这四个按钮打开的每个屏幕在同一个index.html页面中被定义为“部分”）。

在创建“部分”中，有少量表单字段和提交按钮。当我点击提交时，我的表单值将被提交到数据库（我使用AJAX来执行此操作）。但是这里的问题是当我点击提交时我的页面不会刷新。

我要找的是，点击提交并在“视图<中存在下拉列表后，应该刷新”创建部分“ / strong>“同一index.html页面的部分也应刷新（此部分将新输入的详细信息作为下拉元素，从数据库中动态更新。）

HTML代码：

<section data-role="page" id="home" data-theme="b">
  <header data-role="header" data-theme="a">
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content"> <a href="#view">
    <input value="View" type="button" data-role="button" data-icon="info">
    </a> <a href="#create">
    <input value="New" type="submit" data-role="button" data-icon="plus">
    </a> <a href="#updatePage">
    <input value="Update" type="submit" data-role="button" data-icon="refresh">
    </a> <a href="#deletePage">
    <input value="Delete" type="submit" data-role="button" data-icon="minus">
    </a> </div>    

  <footer data-role="footer" class="ui-footer-fixed">
    <h5>Cnonymn</h5>
  </footer>
</section>

<section data-role="page" id="view" data-theme="b">
  <header data-role="header"> <a href="#home" class="ui-btn-left  ui-btn-hover-c"> Back </a>
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content">
    <form>
      <div data-role="fieldcontain">
        <label for="names">Select Employee</label>
         <select name='names' id='names' size='1' onchange="getDetails(this)">
         <option>Select</option>
        </select>               
      </div>
      <div data-role="fieldcontain">
        <input value="Show All" data-role="button" onClick = "getAllDetails()" type="button">
      </div>
    </form>
    <div id="emp_tb1" align="center" data-theme="b">Here are the details </div>
  </div>
  <footer data-role="footer" class="ui-footer-fixed">
    <h4>Cnonymn</h4>
  </footer>
</section>

<section data-role="page" id="create" data-theme="b">
  <header data-role="header"> <a href="#home" class="ui-btn-left  ui-btn-hover-c" onClick=""> Back </a>
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content">
    <form method="post" id="myForm">
      <label for="emp_name">Name</label>
      <input name="empName" id="emp_name" value="" type="text" data-theme="a">
      <label for="emp_dob">Date</label>
      <input name="empDOB" id="emp_dob" value=""  data-theme="a">
      <label for="emp_gender">Gender</label>
      <select name="empGender" id="emp_gender" data-role="slider" data-theme="a" data-inline="true" style="display:none;">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      <label for="address">Address</label>
      <textarea name="empAddr" id="e_address" value="" type="text" data-theme="a"></textarea>
      <br>
      <br>
      <label for="image">Add Image</label>
      <input name="image" id="image" value="" type="file" data-theme="a">
      <br>
      <br>
      <label for="multimedia">Add Multimedia</label>
      <input name="multimedia" id="multimedia" value="" type="file" data-theme="a">      
      <br>
      <br>
      <input type="submit" id="insert" value="Submit">
    </form>
  </div>
  <div id="someElement"></div>
  <footer data-role="footer" class="ui-footer-fixed">
    <h4>Cnonymn</h4>
  </footer>
</section>

我应该在哪里以及在哪里编写刷新功能？此刷新应“刷新表单屏幕”和“更新下拉列表”

Answer 1

相反刷新整个页面（需要更长时间），您可以重置（刷新）表单。

在表单中添加ID，在ajax提交成功后，您可以重置这些表单。

以下是演示http://jsfiddle.net/yeyene/SjbMd/5/

JQUERY

$(document).ready(function(){
    $('#btn_submit').on('vclick', function(){
        event.preventDefault();

        $(".ui-loader").show(); 
        $.ajax({
            type: 'POST',
            url: 'url',
            data: 'data',
            dataType: "json",
            success: function(data) {
                alert('Form successfully submitted!');
                $("#viewForm")[0].reset();
                $("#myForm")[0].reset();
                $(".ui-loader").hide();
            }
        });
    });
});