Javascript 没有错误消息提示，但代码无法工作_Javascript_Android_Html_Phonegap Desktop App

Javascript 没有错误消息提示，但代码无法工作

javascript android html

Javascript 没有错误消息提示，但代码无法工作,javascript,android,html,phonegap-desktop-app,Javascript,Android,Html,Phonegap Desktop App,我用Phonegap桌面应用程序创建了我的第一个android应用程序。使用Notepad++编辑index.html，以下是我的javascript代码：这些应用程序可以在手机GAP和桌面浏览器中运行，但所有数据库功能都没有运行。请帮忙~ <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=2"> &

我用Phonegap桌面应用程序创建了我的第一个android应用程序。使用Notepad++编辑index.html，以下是我的javascript代码：

这些应用程序可以在手机GAP和桌面浏览器中运行，但所有数据库功能都没有运行。请帮忙~

<!doctype html>
<html>
<head>  
<meta name="viewport" content="width=device-width, initial-scale=2">  
<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>
<script type="text/javascript">

$(document).ready(function()
{
document.addEventListener("deviceready", MobileReady, false);
var dbase = window.openDatabase("Database", "1.0", "MyEventsdatab", 200000);

function MobileReady()
{
    alert("Welcome");
    dbase.transaction(pDB, errDB, sucDB);
    document.addEventListener('backbutton', onBack, false);
}

function onBack()
{
    if($.mobile.activePage.is('#page1'))
    {
        navigator.app.exitApp();
    }
    else
    {
        db.transaction(qDB, errDB);
    }
}

function pDB(x)
{
    x.executeSql('CREATE TABLE IF NOT EXISTS Event (id INTEGER PRIMARY KEY AUTOINCREMENT, eventname TEXT NOT NULL, eventlocation TEXT, eventdate DATE, starttime TIME, eventorganizer TEXT)\
                ');
    x.executeSql('SELECT id, eventname, eventlocation FROM Event ORDER BY eventname', [], qSuccess, errDB);
}

function qDB(x)
{
    x.executeSql('SELECT id, eventname, eventlocation FROM Event ORDER BY eventname', [], qSuccess, errDB);
}

function sucDB()
{
    dbase.transaction(qDB, errDB);
}

function qSuccess(x, results)
{
    $.mobile.showPageLoadingMsg(true);
    var len = results.rows.length;
    $("#userList").html('');
    for (var i=0; i<len; i++)
    {
        var row= results.rows.item(i);
        var hdata = '<li id="'+row["id"]+'"><a href="#"><h2>'+row["name"]+'</h2></a></li>';
        $("#userList").append(hdata).listview('refresh');
    }
    $.mobile.changePage($("#page1"), { transition : "slide"});
    $.mobile.hidePageLoadingMsg();
}

function errDB(err)
{
    alert("Fail Database");
}

$("#page3 .error").html('').hide();

$(".addNew").bind("click", function (F)
{
    $("#page3 .error").html('').hide();
    $.mobile.changePage ($("#page3"), { transition : "slide", reverse : true });
    $("#addNewPageHeader").html("Add New Event");
});

$("#save").bind("click", function (F)
{
    var eventname = $.trim($("#eventname").val()));
    var eventlocation = $.trim($("#eventlocation").val()));
    var eventdate = $.trim($("#eventdate").val());
    var starttime = $.trim($("#starttime").val());
    var eventorganizer = $.trim($("#eventorganizer").val());
    console.log(eventname+' '+eventlocation+' '+eventdate+' '+starttime+' '+eventorganizer);
    if (eventnamename == '')
    {
        $("#page3 .error").html('Please enter event name.').show();
    }
    else
    {
        formReset();
        var id = $("#id").val();
        $("#id").val('');
        if (id == '')
        { 
            dbase.transaction(function (x){ x.executeSql("INSERT INTO Event (eventname, eventlocation, eventdate, starttime, eventorganizer) VALUES  (?, ?, ?, ?, ?)",[eventname, eventlocation, eventdate, starttime, eventorganizer],
            qDB, errDB); });
        }
        else
        {   
            dbase.transaction(function (x){ x.executeSql("UPDATE Event SET eventname=?, eventlocation=?, eventdate=?, starttime=?, eventorganizer=? WHERE id=? ",[eventname, eventlocation, eventdate, starttime, eventorganizer, id],
            qDB, errDB); });
        }
        dbase.transaction(qDB, errDB);
    }
});

$(".refresh").bind("click", function (F)
{
    dbase.transaction(qDB, errDB);
});

$(".back").bind("click", function (F)
{
    formReset();
    dbase.transaction(qDB, errDB);
});

function formReset()
{
    $("#page3 .error").html('').hide();
    $("#page3 #eventname").val('');
    $("#page3 #eventlocation").val('');
    $("#page3 #eventdate").val('');
    $("#page3 #starttime").val('');
    $("#page3 #eventorganizer").val('');
    $("#page3 #addNewPageHeader").html('');
}

$("#page1 [data-role='content'] ul").on('tap taphold', 'li', function (F)
{
    F.preventDefault();
    F.stopImmediatePropagation();
    var liId = this.id;
    if (F.type === 'taphold')
    {
        navigator.notification.vibrate(30);
        var $popup = $('#actionList-popup');
        $("#actionList").html('');
        $("#actionList").append('<li id="editEvent&'+Id+'">Update</li>').listview('refresh');
        $("#actionList").append('<li id="deleteEvent&'+Id+'">Delete</li>').listview('refresh');
        $popup.popup();
        $popup.popup('open');
        $("#tapHoldCheck").val('true');
    }
    else if (F.type === 'tap')
    {
        if ($("#tapHoldCheck").val() == '')
        {   //tap will only work if the value of textbox is blank
            dbase.transaction(function (x)
            {
                x.executeSql("SELECT eventname, eventlocation, eventdate, starttime, eventorganizer  FROM Event WHERE id=?;", [liId], function (x, results)
                {
                    var row = results.rows.item(0);
                    $.mobile.showPageLoadingMsg(true);
                    $.mobile.changePage($("#page2"), { transition : "slide"});
                    $("#headerName").html(row['eventname']);
                    $("#eventname").html(row['eventname']);
                    $("#eventlocation").html(row['eventlocation']);
                    $("#eventdate").html(row['date']);
                    $("#starttime").html(row['starttime']);
                    $("#eventorganizer").html(row['eventorganizer']);
                    $('#eventView').trigger('create');
                    $('#eventView').listview('refresh');
                    $.mobile.hidePageLoadingMsg();
                });
            });
        }
    }
});

//Change the hidden field value when the popup is closed
$('#actionList-popup').bind({
    popupafterclose: function(F)
    {
        $("#tapHoldCheck").val('');
    }
});

$("#page1 [data-role='popup'] ul").on('click', 'li', function (F)
{
    var action_liId = this.id.split('&');
    var action = action_liId[0];
    var id = action_liId[1];
    if (action == 'editEvent')
    {
        dbase.transaction(function (x)
        {
            x.executeSql("SELECT eventname, eventlocation, eventdate, starttime, eventorganizer  FROM Evt WHERE id=?;", [id], function (x)
            {
                var row = results.rows.item(0);
                $("#eventname").val(row['eventname']);
                $("#eventlocation").val(row['eventlocation']);
                $("#eventdate").val(row['eventdate']);
                $("#starttime").val(row['starttime']);
                $("#eventorganizer").val(row['eventorganizer']);
                $("#id").val(id);
                $("#addNewPageHeader").html('Update');
                $.mobile.changePage ($("#page3"), { transition : "slide", reverse : true });
            });
        });
    }
    if (action == 'deleteEvent')
    {
        navigator.notification.confirm(
        'Delete Event!?',
        function(Button){deleteConfirm(Button, id);},
        'Delete Event',
        'Confirm, Cancel'
        );
    }
});

function deleteConfirm(Button, id)
{
    if (Button === 1)
    {
        dbase.transaction(function (x){ x.executeSql("DELETE FROM Event WHERE id=?", [id], qDB, errDB); });
    }
    if (Button === 2)
    {
        $.mobile.changePage($("#page1"), { transition : "slide"});
    }
}
});

</script>
</head>

这是我创建的表单：

<body>

<!-- Index Page Start -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<a href="#page3" class="addNew" data-role="button" data-icon="add" data-theme="b" title="Add New">Add New</a>
    <h1>List Of Event</h1>
</div>
<div data-role="content">
    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search Event..." id="userList">  </ul>
</div>
<div data-role="popup" id="actionList-popup" data-overlay-theme="a">
    <ul data-role="listview" id="actionList" style="border: 1px solid blue; width:15em">  </ul>
</div>
<input type="hidden" id="tapHoldCheck" value="" />
</div>
<!-- Index Page End -->

<!-- Data Display Page Start -->
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
    <a href="#page1" class="back" data-role="button" data-icon="arrow-l" data-theme="b" title="Back">Home</a>
    <h1 id="headerName"></h1>   
</div>
<div data-role="content">
    <ul data-role="listview" id="eventView">
        <li>Event Name: <span id="eventname"></span></li>
        <li>Event Location: <span id="eventlocation"></span></li>
        <li>Event Date: <span id="eventdate"></span></li>
        <li>Event Start Time: <span id="starttime"></span></li>
        <li>Event Organizer: <span id="eventorganizer"></span></li>
    </ul>
</div>
</div>
<!-- Data Display Page End -->

<!-- Form Page Start -->
<div data-role="page" id="page3">
<div data-role="header" data-position="fixed">
    <a href="#page1" class="back" data-role="button" data-icon="arrow-l" data-theme="a" title="Back">Home</a>
    <h1 id="addNewPageHeader"></h1>
    <a href="#page1" id="save" data-role="button" data-icon="check" data-theme="a" title="Save">Save</a>
</div>
<div data-role="content">
    <div class='error'></div>
    <div data-role="fieldcontain">
        <label for="eventname">Event Name:</label>
        <input type="text" name="eventname" id="eventname" required="true"  value=""></input>
    </div>
    <div data-role="fieldcontain">
        <label for="eventlocation">Event Location:</label>
        <input type="text" name="eventlocation" id="eventlocation"  value=""  ></input>
    </div>

    <div data-role="fieldcontain">
        <label for="eventdate">Event Date:</label>
        <input type="date" name="eventdate" id="eventdate"  value=""></input>
    </div>
    <div data-role="fieldcontain">
        <label for="starttime">Event Start Time:</label>
        <input type="time" name="starttime" id="starttime" value=""></input>
    </div>
    <div data-role="fieldcontain">
        <label for="eventorganizer">Event Organizer:</label>
        <input type="text" name="eventorganizer" id="eventorganizer" value=""></input>
    </div>
    <input type="hidden" name="id" id="id" value="" />
</div>
</div>  
</body>
</html>

WebSql数据库已经由Chrome和其他浏览器实现。您必须使用不支持WebSql的浏览器。尝试在Chrome浏览器中运行应用程序。它支持WebSql数据库。

请在帖子中回答以下问题。因为这似乎是你关于这个主题的第一篇文章。这是你的第一款混合应用程序吗？您正在使用Phonegap桌面应用程序吗？你在用什么？请不要假设答案，请阅读链接。一旦你在帖子中回答了问题，请在评论中回复，这样我就知道你已经在帖子中添加了信息。@JesseMonroy650是的。第一款混合应用。我正在使用Phonegap桌面。应用程序是从这里下载的：您有几个错误。我将列出答案中的所有错误。在我回答之前，你还有其他问题吗？@JesseMonroy650噢，谢谢。还有一个问题：jquery移动版脚本src=。。。不同型号的手机会有所不同吗？URL：因为我需要在使用不同的手机测试应用程序时更改版本。hmmm。。这就是你会遇到问题的地方。一旦完成开发，最好的做法是在设备上安装javascript，而不是在互联网上。为了回答您的问题，所有版本都是稳定且相同的-无论是下载版本还是CDN版本。注意：JQuery的最大用途是开发人员不必担心不同的硬件或浏览器。因此，理论上没有理由更改JQuery版本。