CODEWITHSUNDEEP
javascriptjqueryajaxhtmljquery-mobile
Lohith Korupolu
Lohith Korupolu

Reputation: 1074

refresh section tag on submit using jquery in a jqueryMobile HTML page

I am using a jquerymobile template from Dreamweaver6.0 and building a mobile app interface. On home screen, I have four buttons - say, View, Create, Update, Delete. When I click Create, it opens a new screen (each screen that opens from these four buttons are defined as "sections" within the same index.html page).

In create "section", there are few form fields and a submit button. When I click on submit, my form values are being submitted to the database (I am using AJAX to do this). But the problem here is my page won't refresh when I click on Submit.

What I am looking for is, the "create section" should refresh once I click on submit and a drop down list existing in the "view" section of the same index.html page also should refresh (this section has newly entered details as drop-down elements, dynamically update from database.)

the HTML code:

<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>

What and where should I write the refresh functionality? This refresh should both "refresh the form screen" and "update dropdown list"

Upvotes: 3

Views: 3086

Answers (1)

yeyene
yeyene

Reputation: 7380

Instead refreshing the whole page(it would take longer time), you can reset(refresh) the forms.

Add IDs to your forms, and after ajax submit successfully, you can reset these forms.

Here is the demo 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();
            }
        });
    });
});

Upvotes: 3

Related Questions