0

DB から値を取得し、listitem に配置するためにこのコードを作成しました。ここで正常に動作するのは私の html コードです。すべてのプラグインを既に追加しています。

<html>
<head>

    $('#showcollapsed li').live('click',function(event)
    {  var txt = $(this).text();
        window.localStorage.setItem("clickedValueofList",txt);
        $.mobile.changePage('#viewInformation',null,true,true);
        getDataofSelectedListItem();
    });

ここに私のコードがありますが、うまくいきません。

$('#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());

    });

 </head>
<body>
        <div data-role="page" id="viewUser" data-theme="d">
         <div data-role="header" data-theme="e" class="ui-bar ui-bar-e">
          <a href="#" id="backbtn" data-role="button" data-icon="arrow-l">BACK</a>
          <h3>STUDENT INFO</h3>
         </div>
         <div data-role="content">
            <a href="#" id="showinfo" data-role="button" style="width:100px;">SHOW</a>
           <div data-role="collapsible-set" id="showinfodiv" data-theme="b" data-content-theme="d">
           <div data-role="collapsible" id="showcollapsed" data-collapsed-icon ="plus" data-iconpos="left">
            <h3>user names</h3>
           <ul id="list" content-editable="true" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..."  data-filter-theme="e"></ul>
               <li content-editable="true">fdfdfd</li>
              </div>   
           </div>  
         </div> 
        </div> 
        <div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
          <div data-role="header" id="headerid" class="ui-bar ui-bar-b">

           <h3></h3> 
          </div>
           <div data-role="content" id="contentid">
           <ul id="list1" data-role="listview" data-theme="e"></ul> 

            <input type="text" id="editTextBox" style="display:none"/> 
            <a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a> 
          </div>
        </div>
    </body>
    </html>

私の次のタスクは、ユーザーが最初のリスト項目をクリックしたときに動的リスト項目を編集して、リスト項目を TEXTBOX に置き換え、ユーザーが編集を完了したときにクリックされていない残りのリスト項目が同じままになるようにすることです。テキストボックスは非表示になり、最近の編集テキストになります。 listitem に表示される必要がありますが、listitem の残りの部分も同様ですが、ユーザーは一度に 1 つのリスト項目しか編集できません。この目標を達成するのは困難です。
.js コード:
//DB からデータを取得し、それをリストビューに動的に配置すると、正常に動作します

 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 && results.rows != null && results.rows.length > 0) 
         { alert("fdfdf");

         $('#list1').append('<li> UserName: '+results.rows.item(0).username+'</li>');
         $('#list1').append('<li> Password:' +results.rows.item(0).password+'</li>');
         $('#list1').append('<li> Emailid:' +results.rows.item(0).emailid+'</li>');
         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");
    }

ここに私のコードがありますが、うまくいきません。

$('#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());

    });
4

0 に答える 0