如果单击“发送”按钮，将在客户端sql数据库中放置一条消息，并显示通知。
但是，这只有在我首先刷新页面时才有效！
如何使功能立即开始工作？我已经尝试将函数“addMessage”放在$（document）.ready（function（）中，但该函数完全停止工作。请参阅下面的代码：
<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>
答案 0 :(得分：1)
请试试这个：
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>
答案 1 :(得分：0)
我将您的代码粘贴到测试文件中，并尝试查找确切问题的位置。我不知道确切的问题是什么，但我发现打击部分有一些问题，这就是为什么警报不会在第一时间出现：
db.transaction（function（tx）{ tx.executeSql（“INSERT INTO message（id，name）VALUES（NULL，？）”，[message]）; }）;
尝试评论以上部分，警报将在不刷新页面的情况下运行。如果你在上面的部分犯了错误，我想你应该检查一下。
答案 2 :(得分：0)
此代码如果粘贴在文件中的副本在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放在同一目录中
答案 3 :(得分：0)
我也使用谷歌浏览器。我仍然需要先使用此代码刷新。
<!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>