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