标签：html5 ajax jquery-mobile javascript jquery

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

在创建“节”中,几乎没有表单字段和提交按钮.当我单击提交时,我的表单值将被提交到数据库(我正在使用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>

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

解决方法:

可以刷新(刷新)表单,而不是刷新整个页面(这将花费更长的时间).

在表单中添加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();
            }
        });
    });
});  

标签：html5,ajax,jquery-mobile,javascript,jquery
来源： https://codeday.me/bug/20191123/2065654.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。