3

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

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

我正在寻找的是，一旦我单击提交，“创建部分”应该刷新，并且同一 index.html 页面的“视图”部分中存在的下拉列表也应该刷新（此部分新输入的详细信息为 drop -down 元素，从数据库动态更新。）

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>

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

4

1 回答 1

3

而不是刷新整个页面（这将需要更长的时间），您可以重置（刷新）表单。

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

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

查询

$(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();
            }
        });
    });
});
于 2013-06-11T03:30:31.630 回答