title: jQuery Mobile Page - Something wrong with structure - does not fire $.ajax
body: <p>Have this bit of involved code.  The page lists leave applications submitted by team members and allows the manager to approve or reject the application. The flow of the page is :</p>
  
  <ol>
  <li>On pageshow, getLeaveDetails() is called</li>
  <li>getLeaveDetails() calls /webservices/getPendingLeaveApps.ashx using $.ajax</li>
  <li>On success, showForm(data, textStatus, jqXHR) is called - this works fine</li>
  <li>showForm creates the markup inside a  - this works fine</li>
  <li>The markup created at runtime includes buttons - this works fine</li>
  <li>The two buttons "approve" and "reject" call their respective functions approveLeave(iID) and rejectLeave(iID) - of course pass the ID to approve or reject - this also works</li>
  <li>The approveLeave(iID) and rejectLeave(iID), in turn use $.ajax to call an .ASHX page, pass the ID as a parameter for the ASHX to process the action - approve or reject as selected on the page - THIS is not working</li>
  </ol>
  
  <p>What am I doing wrong?  Or is there a better structure anyone can propose?  Any assistance is very, very welcome.  Not experience at all in JS and HTML.</p>
  
  <p>Thanks very much</p>
  
  <p>Best wishes</p>
  
  <p>Iyer</p>
  
  <pre><code>&lt;div data-role="page"  id="pLeave" data-add-back-btn="true"  data-back-btn-text="Home"&gt;
  &lt;script type="text/javascript"&gt;
      $('#pLeave').live('pageshow', function () {
          getLeaveDetails() ;
      }) ;
  
      function getLeaveDetails() {
          $.ajax({
              type: 'POST',
              data: {numRows: 10},
              url: '/webservices/getPendingLeaveApps.ashx', 
              success: function(data, textStatus, jqXHR) {
                  showForm(data, textStatus, jqXHR) ;
              },
              error: function(jqXHR, textStatus, errorThrown) {
                  alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
                  //$("#result_labels").append('&lt;p&gt; textStatus ' + textStatus + '&lt;/p&gt;') ;
              }
          });
      }
  
      function showForm(data, textStatus, jqXHR) {
          $("#resultsArea").html("") ;
          var h = '' ;
          for (i = 0; i &lt; data.length; i++) {
              h = h + '&lt;ul data-role="listview" data-inset="true"&gt;' ;
              h = h + '&lt;li&gt;' ;
              h = h + '&lt;p&gt;&lt;strong&gt;' + data[i].empName + '&lt;/strong&gt;&lt;/p&gt;' ;
              h = h + '&lt;p&gt;&lt;strong&gt;'  + data[i].designation +'&lt;/strong&gt;&lt;/p&gt;' ;
              h = h + '&lt;p&gt;&lt;strong&gt; Applied for ' + data[i].noOfDays + ' days of ' + data[i].category + ' leave' ;
              h = h + '&lt;p&gt;&lt;strong&gt; From ' + data[i].startDate + ' To ' + data[i].endDate + '&lt;/strong&gt;&lt;/p&gt;' ;
              h = h + '&lt;input type="button" value="Approve" data-inline="true" onclick="approveLeave(' + data[i].id + ');" /&gt;' ;
              h = h + '&lt;input type="button" value="Reject" data-inline="true"  onclick="rejectLeave(' + data[i].id + ');" /&gt;' ;
              h = h + '&lt;/li&gt;&lt;/ul&gt;' ;
          }
          $("#resultsArea").html(h) ;
          $("#resultsArea").trigger("create");
      }
      function approveLeave(iID) {
          $.ajax({
              type: 'POST',
              data: {id: iID, action: "A"},
              url: '/webservices/mob_processLeave.ashx', 
              success: function(data, textStatus, jqXHR) {
                  //showForm(data, textStatus, jqXHR) ;
                  getLeaveDetails() ;
              },
              error: function(jqXHR, textStatus, errorThrown) {
                  alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
                  getLeaveDetails() ;
              }
          });
      }
      function rejectLeave(iID) {
          $.ajax({
              type: 'POST',
              data: {id: iID, action: "R"},
              url: '/webservices/mob_processLeave.ashx', 
              success: function(data, textStatus, jqXHR) {
                  //showForm(data, textStatus, jqXHR) ;
                  getLeaveDetails() ;
              },
              error: function(jqXHR, textStatus, errorThrown) {
                  alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
                  getLeaveDetails() ;
              }
          });
      }
  &lt;/script&gt;
  &lt;div data-role="header"&gt;
      &lt;h1&gt;Leave Apps&lt;/h1&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;div data-role="content"&gt;   
      &lt;div class="content-primary"&gt;
          &lt;div id="resultsArea"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  </code></pre>
  
  <p></p>