title: how to edit dynamic listitem text and save it in DB?
body: <p>I have written this code to retrieve values from DB and to put it in listitem its working fine here is my html code: I have already added all plugins.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  
      $('#showcollapsed li').live('click',function(event)
      {  var txt = $(this).text();
          window.localStorage.setItem("clickedValueofList",txt);
          $.mobile.changePage('#viewInformation',null,true,true);
          getDataofSelectedListItem();
      });
  </code></pre>
  
  <p>Here is my code but its not working fine.</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#list1').on('click','li',function()
      {
          $(this).hide();
          $('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
      });
  
      $('#editTextBox').focusout(function()
      {
          //$('#list1').listview('refresh');
          $(this).hide();
          $(this).siblings('#list1').show().text($(this).val());
  
      });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code> &lt;/head&gt;
  &lt;body&gt;
          &lt;div data-role="page" id="viewUser" data-theme="d"&gt;
           &lt;div data-role="header" data-theme="e" class="ui-bar ui-bar-e"&gt;
            &lt;a href="#" id="backbtn" data-role="button" data-icon="arrow-l"&gt;BACK&lt;/a&gt;
            &lt;h3&gt;STUDENT INFO&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div data-role="content"&gt;
              &lt;a href="#" id="showinfo" data-role="button" style="width:100px;"&gt;SHOW&lt;/a&gt;
             &lt;div data-role="collapsible-set" id="showinfodiv" data-theme="b" data-content-theme="d"&gt;
             &lt;div data-role="collapsible" id="showcollapsed" data-collapsed-icon ="plus" data-iconpos="left"&gt;
              &lt;h3&gt;user names&lt;/h3&gt;
             &lt;ul id="list" content-editable="true" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..."  data-filter-theme="e"&gt;&lt;/ul&gt;
                 &lt;li content-editable="true"&gt;fdfdfd&lt;/li&gt;
                &lt;/div&gt;   
             &lt;/div&gt;  
           &lt;/div&gt; 
          &lt;/div&gt; 
          &lt;div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back"&gt;
            &lt;div data-role="header" id="headerid" class="ui-bar ui-bar-b"&gt;
  
             &lt;h3&gt;&lt;/h3&gt; 
            &lt;/div&gt;
             &lt;div data-role="content" id="contentid"&gt;
             &lt;ul id="list1" data-role="listview" data-theme="e"&gt;&lt;/ul&gt; 
  
              &lt;input type="text" id="editTextBox" style="display:none"/&gt; 
              &lt;a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;"&gt;SAVE&lt;/a&gt; 
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Now my next task is to edit dynamic listitem means when user click on 1st list item so that list item should be replaced by TEXTBOX and rest of the unclicked listitem will remain same when user completes his editing now the textbox should be hide and recent edit text should appear in listitem similar is the case for rest of the listitem but user can only edit one list item at a time .getting difficulty to achieve this goal.<br>
  .js code:<br>
   //gettind data from DB and putting it in listview dynamically its working fine</p>
  
  <pre class="lang-js prettyprint-override"><code> function getDataofSelectedListItem()
      {
          alert("getDataofSelectedListI");
          clickedListItem = window.localStorage.getItem("clickedValueofList");
          console.log("clicked list item"+clickedListItem);
          //db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
          var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';
  
          console.log("selected list query:"+sqlQuery);
          db.transaction(function(tx)
          {
            tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
          },errorCB,successCB);
      }
      function successCBofListItem(tx,results)
      {   alert("erer");
        if(results != null &amp;&amp; results.rows != null &amp;&amp; results.rows.length &gt; 0) 
           { alert("fdfdf");
  
           $('#list1').append('&lt;li&gt; UserName: '+results.rows.item(0).username+'&lt;/li&gt;');
           $('#list1').append('&lt;li&gt; Password:' +results.rows.item(0).password+'&lt;/li&gt;');
           $('#list1').append('&lt;li&gt; Emailid:' +results.rows.item(0).emailid+'&lt;/li&gt;');
           console.log("username:" + results.rows.item(0).username);
           console.log("emailid:" + results.rows.item(0).emailid);
           console.log("password:" + results.rows.item(0).password);
           }
         $('#list1').listview('refresh');
      }
      function errorCBofListItem()
      {
          alert("errorCBofListItem");
      }
  </code></pre>
  
  <p>here is my code but its not working fine.</p>
  
  <pre><code>$('#list1').on('click','li',function()
      {
          $(this).hide();
          $('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
      });
  
   $('#editTextBox').focusout(function()
      {       $(this).hide();
          $(this).siblings('#list1').show().text($(this).val());
  
      }); 
  </code></pre>