Javascript函数只在页面刷新后才起作用

如果我点击按钮“发送”，则会在客户端sql数据库中放置一条消息，并显示通知。Javascript函数只在页面刷新后才起作用

但是，这只适用于我先刷新页面！

如何使该功能立即开始工作？我已经试过放置的$（document）内部函数“方法addMessage”。就绪（函数（），但是功能停止工作，完全看下面的代码：

<script> 
     var db; 

     $(document).ready(function() { 
      //Opens the database 
      try 
      { 
       if (!window.openDatabase) { 
        alert('Not supported -> Please use a webkit browser'); 
       } else { 
        var shortName = 'Rvpk'; 
        var version = '1.0'; 
        var displayName = 'The Rvpk databse'; 
        var maxSize = 3072*1024; // = 3MB in bytes 65536 
        db = openDatabase(shortName, version, displayName, maxSize);  
        } 
      } 
      catch(e) 
      { 
       if (e == 2) { 
        alert("Invalid database version."); 
       } else { 
        alert("Unknown error "+e+"."); 
       }return; 
      } 

      //If needed creates the messagetable 
      db.transaction(function (tx) { 
       tx.executeSql('CREATE TABLE IF NOT EXISTS message (id INTEGER PRIMARY KEY, name)')      
      }); 
     }); 

     //The function addMessage takes the entered message from the message inputfield and places it inside the messagetable 
     function addMessage(){ 
     var message = $('input:text[name=message]').val(); 

      db.transaction(function (tx) { 
        tx.executeSql("INSERT INTO message (id, name) VALUES (NULL, ?)", [message]); 
      }); 
      console.log("Message "+ message +" added to database"); 

      //Shows a notification that sending the message was a success 
      alert('The message has been sent'); 

      //Update the messages 
      updateMessages();    
     }  
    </script> 
    </head> 

    <body> 
    <?php include("includes/header2.php"); ?> 

       <div data-role="content"> 
        <form> 
         <fieldset> 
          <label id="messagelabel" for="message">Message:</label> 
          <input id="message" type="text" name="message" value="This can't go on like this"> 
          <button onClick="addMessage()" data-theme="g">Send</button> 
         </fieldset> 
        </form> 
       </div>

来源

2012-11-03 t0byman

你没有定义updateMessages（） –

检查了这一点http://jsfiddle.net/JkTbT/ –

我看到的jsfiddle代码和我的代码没有什么区别，但是的jsfiddle代码工作就像一个魅力。怎么来的？ – t0byman

我粘贴你的代码测试文件，并试图找到确切的问题在哪里，我不知道确切的问题是什么，但我发现吹部分有一些问题，这就是为什么警报不是第一次：

db.transaction（函数（tx）{tx.executeSql（“INSERT INTO message（id，name）VALUES（NULL，？）”，[message]）; }）;

请尝试评论以上部分的警报将工作来刷新页面。我想你应该检查一下，如果你在上面的部分犯了错误。

来源

2012-11-03 11:10:50 Dhaval

事实上，似乎这部分是问题。但是，它需要在那里创建表格。这部分需要更改哪些内容才能创建表，警报将会显示，而且我不需要刷新？我犯了什么错误？ – t0byman

您正在测试哪个浏览器？由于只有Chrome和Safari支持访问数据库的方法。我已经在Chrome中对它进行了测试，并且警报消息第一次成功发布。我不需要刷新页面。 – Dhaval

如果在Chrome打开时拷贝文件粘贴工作正常此代码，它抛出一个警告消息“消息已发送”上按一下按钮，无需刷新

<html> 
<head> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script> 
      var db; 

      $(document).ready(function() { 
       //Opens the database 
       try 
       { 
       if (!window.openDatabase) { 
         alert('Not supported -> Please use a webkit browser'); 
       } else { 
        var shortName = 'Rvpk'; 
        var version = '1.0'; 
        var displayName = 'The Rvpk databse'; 
        var maxSize = 3072*1024; // = 3MB in bytes 65536 
        db = openDatabase(shortName, version, displayName, maxSize);  
        } 
       } 
       catch(e) 
       { 
       if (e == 2) { 
        alert("Invalid database version."); 
       } else { 
        alert("Unknown error "+e+"."); 
       }return; 
       } 

       //If needed creates the messagetable 
       db.transaction(function (tx) { 
        tx.executeSql('CREATE TABLE IF NOT EXISTS message (id INTEGER PRIMARY KEY, name)')      
       }); 
      }); 

      //The function addMessage takes the entered message from the message inputfield and places it inside the messagetable 
      function addMessage(){ 
      var message = $('input:text[name=message]').val(); 

       db.transaction(function (tx) { 
         tx.executeSql("INSERT INTO message (id, name) VALUES (NULL, ?)", [message]); 
       }); 
       console.log("Message "+ message +" added to database"); 

       //Shows a notification that sending the message was a success 
       alert('The message has been sent'); 

       //Update the messages 
       updateMessages();    
      }  
     </script> 
     </head> 

     <body> 
     <?php include("includes/header2.php"); ?> 

        <div data-role="content"> 
         <form> 
          <fieldset> 
           <label id="messagelabel" for="message">Message:</label> 
           <input id="message" type="text" name="message" value="This can't go on like this"> 
           <button onClick="addMessage()" data-theme="g">Send</button> 
          </fieldset> 
         </form> 
        </div> 
</body> 
</html>

和Ofcourse确保在同一个目录下有jquery.min.js

来源

2012-11-03 12:04:59

我也使用Google Chrome。我仍然需要先使用此代码进行刷新。

<!DOCTYPE html> 
<html lang="nl"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" /> 
    <script src="jquery.mobile-1.2.0/jquery-1.8.2.min.js"></script> 
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 

    <link href="css/layout.css" rel="stylesheet" type="text/css" /> 
    <link rel="shortcut icon" href="afbeeldingen/favicon.ico" type="image/x-icon" /> 
    <meta name="Author" content="Tobias Boekwijt" /> <title>This can't go on like this</title> 

<script> 
var db; 

     function runThis() 
     { 
      //Opens the database 
      try 
      { 
       if (!window.openDatabase) { 
        alert('Not supported -> Please use a webkit browser'); 
       } else { 
        var shortName = 'Rvpk'; 
        var version = '1.0'; 
        var displayName = 'The Rvpk databse'; 
        var maxSize = 3072*1024; // = 3MB in bytes 65536 
        db = openDatabase(shortName, version, displayName, maxSize);  
        } 
      } 
      catch(e) 
      { 
       if (e == 2) { 
        alert("Invalid database version."); 
       } else { 
        alert("Unknown error "+e+"."); 
       }return; 
      } 

      //If needed creates the messagetable 
      db.transaction(function (tx) { 
       tx.executeSql('CREATE TABLE IF NOT EXISTS message (id INTEGER PRIMARY KEY, name)')      
      }); 
     } 

     //The function addMessage takes the entered message from the message inputfield and places it inside the messagetable 
     function addMessage(){ 

     //call db access function. 
     runThis(); 

     var message = $('input:text[name=message]').val(); 

      db.transaction(function (tx) { 
        tx.executeSql("INSERT INTO message (id, name) VALUES (NULL, ?)", [message]); 
      }); 
      console.log("Message "+ message +" added to database"); 

      //Shows a notification that sending the message was a success 
      alert('The message has been sent');   
     }  
</script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div data-role="page" id="page1"> 
      <div data-role="header" data-position="fixed" data-theme="a">     
       <h3>Test</h3> 

       <a href="#popupInfo" data-rel="popup" data-position-to="window" data-role="button" data-icon="grid" data-iconpos="notext" class="ui-btn-right" data-theme="a" data-transition="pop"></a> 
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e"> 
        <a href="#" data-rel="back" data-role="button" data-theme="bl" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
         <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
          <a data-role="button" href="messages.php" data-theme="b">My messages</a> 
          <a data-role="button" href="logout.php" data-theme="r">Log out</a> 
         </div> 
        </div> 

       <a data-role="button" href="for_who.php" data-icon="home" data-iconpos="notext" class="ui-btn-left" data-theme="a"></a> 
      </div> 

      <div data-role="content"> 
       <form> 
        <fieldset> 
         <label id="messagelabel" for="message">Message:</label> 
         <input id="message" type="text" name="message" value="This can't go on like this"> 
         <button onClick="addMessage()" data-theme="g">Send</button> 
        </fieldset> 
       </form> 
      </div> 
     </div>  
    </div> 
</body> 
</html>

来源

2012-11-03 12:21:05 t0byman

你在哪里加载主jQuery库？如果你不想使用jQuery，然后添加window.onload = runThis（）作为脚本标记内的最后一行... –

请试试这个：

的document.ready只在页面加载运行。而是在一个单独的函数中使用它，并随时调用该函数。复制并粘贴以下脚本。

<script> 
     var db; 

     function runThis() 
     { 
      //Opens the database 
      try 
      { 
       if (!window.openDatabase) { 
        alert('Not supported -> Please use a webkit browser'); 
       } else { 
        var shortName = 'Rvpk'; 
        var version = '1.0'; 
        var displayName = 'The Rvpk databse'; 
        var maxSize = 3072*1024; // = 3MB in bytes 65536 
        db = openDatabase(shortName, version, displayName, maxSize);  
        } 
      } 
      catch(e) 
      { 
       if (e == 2) { 
        alert("Invalid database version."); 
       } else { 
        alert("Unknown error "+e+"."); 
       }return; 
      } 

      //If needed creates the messagetable 
      db.transaction(function (tx) { 
       tx.executeSql('CREATE TABLE IF NOT EXISTS message (id INTEGER PRIMARY KEY, name)')      
      }); 
     } 

     //The function addMessage takes the entered message from the message inputfield and places it inside the messagetable 
     function addMessage(){ 

     //call db access function. 
     runThis(); 

     var message = $('input:text[name=message]').val(); 

      db.transaction(function (tx) { 
        tx.executeSql("INSERT INTO message (id, name) VALUES (NULL, ?)", [message]); 
      }); 
      console.log("Message "+ message +" added to database"); 

      //Shows a notification that sending the message was a success 
      alert('The message has been sent'); 

      //Update the messages 
      updateMessages();    
     }  
    </script>

来源

2012-11-03 12:22:00

我错了，当我删除数据库时仍然需要刷新，我不能这样做，因为新用户不必刷新页面。检查此页面上的完整代码。有人可以修复完整的代码，所以当你删除数据库（假装你是一个新用户）时，你不必刷新页面？ – t0byman

添加此在身体onload ..如 –

我添加了“”但当我删除数据库（假装你是一个新用户）我仍然需要先刷新页面。 – t0byman

Javascript函数只在页面刷新后才起作用

回答

相关问题