Question

错误是无法打开数据库且未定义$，无法加载资源（j查询）。代码旨在接收输入字段值（日期，校准）并使用indexedDB将其存储到数据库中< / p>

  <!DOCTYPE html>
<html manifest="manifest.webapp" lang="en">
<head>
  <meta charset="utf-8">
  <title>Diab</title>

  <link rel="stylesheet" href="diab.css">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>

  <script type="text/javascript" src="diab1.js"></script>


</head>
<body>
    <input type="date" id="date">Date</input>
    <input type="number" id="cal">Cal</input>
    <button id="add" >Add</button>
</body>
</html>



(function()
{   var db;
    var openDb=function()
    {
        var request=indexedDB.open("diabetore");
        request.onsuccess = function()
        {
            console.log("DB created succcessfully");
            db = request.result;
            console.log("openDB done!!");
        };


        request.onerror=function(){
            alert("could not open db");
        };

        request.onupgradeneeded = function()
        { 


        console.log("openDB.onupgradeneeded function");
        var store = db.createObjectStore("diab", {keyPath:  "date"});
        var dateIndex = store.createIndex("date", "date",{unique: true});

            // Populate with initial data.
            store.put({date: "june 1 2013",cal:70});
            store.put({date: "june 2 2013",cal:71});
            store.put({date: "june 3 2013",cal:72});
            store.put({date: "june 8 2013",cal:73});
        };   
    };

    function getObjectStore(store_name,mode)
    {
        var tx=db.transaction(store_name,mode);
        return tx.objectStore(store_name);
    }

    function addItems(date,cal)
    {
        console.log("addition to db started");
        var obj={date:date,cal:cal};
        var store=getObjectStore("diab",'readwrite');
        var req;
        try
        {
            req=store.add(obj);
        }catch(e)
        {
            if(e.name=='DataCloneError')
            alert("This engine doesn't know how to clone");
            throw(e);
        }
        req.onsuccess=function(evt)
        {
            console.log("****Insertion in DB successful!!****");

        };
        req.onerror=function(evt)
        {
            console.log("Could not insert into DB");
        };

    }

    function addEventListners()
    {
        console.log("addEventListeners called...");
        $('#add').click(function(evt){
            console.log("add...");
            var date=$('#date').val();
            var cal=$('#cal').val();
            if(!date || !cal)
            {
                alert("required field missing..");
                return;
            }
            addItems(date,cal);
        });
    }

    openDb();
    addEventListners();


})();

Answer 1

您应该在浏览器中测试脚本网址。然后你就会意识到脚本不存在。

例如，您需要将2.0更改为2.0.0。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 2

关于无法看到创建的数据库的问题，当您打开数据库时，您应该传递另一个带有数据库版本的参数，例如：

var request=indexedDB.open("diabetore",1);

要在Chrome开发者工具的“资源”标签上查看数据库结构，有时您必须刷新页面。

你的addEventListners（）函数也会遇到问题，因为你的匿名函数是在浏览器读取HTML内容之前运行的，所以浏览器不知道'#add'元素，所以click事件处理程序是该元素未创建。

你应该把你的代码放在“$（function（）{”或“$（document）.ready（function（）{”：

中

$(function() {
    (function() {
       var db;
       var openDb=function() {

无法打开db，$未定义，无法加载jquery

2 个答案: