javascript - 无法打开数据库,未定义$,无法加载jquery

原文 标签 javascript jquery html indexeddb

错误是无法打开数据库并且$未定义,无法加载资源(j查询)。该代码旨在接收输入字段值(date,cal)并使用indexedDB将其存储到数据库中

  <!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();


})();

最佳答案

关于无法看到创建的数据库的问题,当您打开数据库时,您应该使用数据库版本传递另一个参数,例如:

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


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

您还会遇到addEventListners()函数的问题,因为您的匿名函数在浏览器读取HTML内容之前运行,因此浏览器不了解'#add'元素,因此该元素的click事件处理程序为未创建。

您应该将代码放入“ $(function(){”或“ $(document).ready(function(){”)中:

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

关于javascript - 无法打开数据库,未定义$,无法加载jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17383402/

相关文章:

javascript - 递归函数JS

html - 使用iframe从外部网站仅显示一个div?

javascript - 如何在 IE 中动态生成的 knockout 模板中自动聚焦到输入元素

javascript - 减少代码重复

javascript - 将动态CSS导出为文本

javascript - 在 routeChange 上取消 AngularJS $timeout

javascript - 使用 Knockout 将项目添加到列表后更改背景颜色

javascript - 如何将对象或变量值从html脚本标签传递给 Angular Controller

javascript - 仅在为图像Src设置边距动画时更改图像Src

javascript - 另一个 iframe 内 iframe 的 Onload 函数