1

こんにちは、 HTML 5 Web sql データベースを使用してデータの作成と取得に参加しています。

リストビューの次のページに結果を表示すると正しく表示されますが、ページリストビューを更新すると前のページに移動するだけで表示されず、このページが機能し、削除をクリックするとリストビューに削除ボタンが追加されましたボタンレコードは削除されますが、リストビューから削除されないリストは前に移動するだけで、このページが削除されるだけです。これを修正する方法。

これが私のコードです：

<!DOCTYPE HTML>
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Clientside Database</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-     1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
 <div data-role=page id="home">
<div data-role=header>
    <h1>ClientSide Database</h1>
</div>
<div data-role="content">

    <ul data-role="listview" data-inset="true">


        <li data-role="fieldcontain">
            <label for="firstname">FirstName:</label>
            <input type="text" name="firstname" id="firstname" value="" class="required" />
        </li>

          <li data-role="fieldcontain">
            <label for="lastname">LastName:</label>
            <input type="text" name="lastname" id="lastname" value="" class="required" />
        </li>

           <li data-role="fieldcontain">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" value="" class="required" />
        </li>


         <li data-role="fieldcontain">
            <label for="date">Date of Birth:</label>
            <input type="date" name="date" id="date" value="" class="required" />
        </li>

         <li >
        <input value = "SUBMIT" type = "button" name="submit" id="submit" />
        <input type="button" value="view" id="view"/>
        </li>
        </ul>

</div><!-- /content -->
 </div>
 <div data-role="page" id="dataview" data-add-back-btn=true>
 <div data-role="header">
  <h1>List of customers</h1>
  </div>

 <div data-role="content">

 </div>
 </div>
 </body>
  </html>
  <script type="text/javascript">
  var db = openDatabase("MyDatabase","1.0","My ClientSide Database",1000000);
  $("#submit").bind('click',function(e){
db.transaction(function(transaction){
var sql = "CREATE TABLE  IF NOT EXISTS clientrecords " +
    " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
    "fname VARCHAR(100) NOT NULL, " + 
    "lname VARCHAR(100) NOT NULL," + 
    "email VARCHAR(100) NOT NULL ," + 
    "date VARCHAR(100) NOT NULL)"   
transaction.executeSql (sql, undefined, function ()
   { 
     console.log("Table Created Successfully");
      }, error);  
    });
     var lname = $("#firstname").val ();
     var fname = $("#lastname").val ();
     var email =$("#email").val();
     var date  =$("#date").val();


 db.transaction (function (transaction) 
 {
     var sql = "INSERT INTO clientrecords (lname, fname,email,date) VALUES (?, ?, ?, ?)";
transaction.executeSql (sql, [lname, fname,email,date], function ()
{ 
console.log("Data Inserted Successfully");
}, error);
  });

  });

  $("#view").bind ("click", function (event)
{
  db.transaction (function (transaction) 
 {
var sql = "SELECT * FROM clientrecords";
transaction.executeSql (sql, undefined, 
function (transaction, result)
{
  var html = "<ul data-icon=false data-split-icon=delete data-split-theme=d>";
  if (result.rows.length)
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var lname = row.lname;
      var fname = row.fname;
      var email = row.email;
      var date = row.date;
      var id = row.id;
      html += "<li " + "id=" + id + ">";
      html +='<a href="#"><h2>' + lname + "&nbsp;" + fname + '</h2><p>'+ email +'</p> <div class="ui-li-aside"><p>'+date+'</p></div></a> <a href="#" class="delete">Delete</a>';
      html +='</li>';

    }
  }
  else
  {
    html += "<li> No customer </li>";
  }

  html += "</ul>";

  $("#dataview").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#dataview div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();


     $(".delete").bind ("swiperight", function (event)
    {

      var listitem = $(this).parent( "li" ).attr ("id");
      if (!listitem) return;

      $(listitem).remove ();

      db.transaction (function (transaction) 
      {
        var sql = "DELETE FROM clientrecords WHERE id=?";
        transaction.executeSql (sql, [id], function ()
        { 
          console.log("Employee Records deleted");
        }, error);
      });
    });     
  });

  $.mobile.changePage ($("#dataview"));

}, error);
     });
  });

   function ok ()
  {
   }

   function error (transaction, err) 
  {
   alert ("DB error : " + err.message);
  return false;
  }

4

1 に答える 1

0

$('#your_ul_id').listview('refresh');

これを削除イベントに追加するだけです。あなたはそれを持っていません。何かを追加または削除する場合は、上記のコードを使用することを忘れないでください。追加せずに更新するだけの場合は、次を使用します。

$('#your_ul_id').listview();

于 2013-10-07T18:06:00.523 に答える