Jest to jedyny przykład zgłoszenia formularza przy użyciu indekseddb, który może znaleźć, ale działa tylko na Chrome ze względu na starą funkcję setVersion, próbowałem uzyskać go do pracy, ale jestem nowy w JavaScript i indeksowany. Czy ktoś mógłby dać mi rękę w ponownym powrocie do pracy w Firefoksie? Dzięki!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=iso-8859-1>
<script>
var DB_NAME = 'DBforms';
var STORE_NAME = 'Form';    
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB    || window.msIndexedDB;

if (window.indexedDb) {
} else if (window.webkitIndexedDB) {
    window.indexedDB = window.webkitIndexedDB;
    window.IDBTransaction = window.webkitIDBTransaction;
} else if (window.mozIndexedDB) {
    window.indexedDB = window.mozIndexedDB;
} else {
   alert("Browser does not suport HTML5´s IndexedDB!");
}       

function onUnexpectedError(e) { alert('An error as occured: ' + e.value); }

function openStore(db, callback) {
    var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
    var store = transaction.objectStore(STORE_NAME);
    callback(store);
        function saveRow(store, row) {
    var key = new Date().getTime();
    var request = store.put(row, key);
    request.onsuccess = function() {
        alert('Form was saved');
    };
    request.onerror = onUnexpectedError;
}

function isOthergender() {
    return document.form.gender.selectedIndex == document.form.gender.length-1;
}

function saveRecord() {
    // get parameters from the form to build the record
    var gender, name, lastname, email, phone, observations, username;
    if (isOthergender())
        gender = document.form.other.value;
    else
gender = document.form.gender.options[document.form.gender.selectedIndex].value;
    name = document.form.name.value;
    lastname = document.form.lastname.value;
    email = document.form.email.value;
    phone = document.form.phone.value;
    observations = document.form.observations.value;
    username = document.form.username.value;
    var record = {'gender': gender, 'name': name, 'lastname': lastname, 'email': email, 'phone': phone, 'observations': observations, 'username': username};

**// This is what needs to be changed**
//----------------------------------------------------------------------------- 
// open db
var openDbRequest = indexedDB.open(DB_NAME);
openDbRequest.onsuccess = function (e) {
   var db = e.target.result;
   db.onerror = onUnexpectedError;

   if (!db.objectStoreNames.contains(STORE_NAME)) {     


   function createStore(db, callback) {
      var request = db.setVersion('1.0'); // setVersion tx req'd to createObjectStore

      request.onsuccess = function() {
             var store = db.createObjectStore(STORE_NAME);
         callback(store); // this executes in the setVersion tx
       };
       request.onerror = onUnexpectedError;
    }       

      // create db store and save form as row keyed by date
      createStore(db, saveRowCallback);
    } else {
     // open db store and save form as row keyed by date
     openStore(db, saveRowCallback);
    }


    function saveRowCallback(store) {
    saveRow(store, record);
    };

};

openDbRequest.onerror = function () {
alert('Allow access to IndexedDB for this webpage!');
};      
}

//--------------------------------------------------------------------

function enableOther() {
    if (isOthergender()) {
        document.form.other.disabled = false;
        document.form.other.value = 'what other?';
    } else {
        document.form.other.disabled = true;
        document.form.other.value = '';
    }
}


</script>
</head>
<body>
<form name="form">
    <table>
        <tr><td>
        <label>Gender</label>
        <select name="gender" onchange="enableOther()">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Bot">Bot</option>
            <option value="Other">Other</option>
        </select>
        </td></tr>
        <tr><td><input name="other" disabled="true"/></td></tr>
<tr><td><label>Name</label><input name="name" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Last Name</label><input name="lastname" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Email</label><input name="email" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Phone number</label><input name="phone"/></td></tr><tr/>
<tr><td><label>Observations</label></td></tr><textarea name="observations" rows="3" cols="25" wrap="soft"></textarea></td></tr>
<tr><td><label>UserName</label><input name="username" value="" size="10" maxlength="20"/></td></tr>
    </table>
    <input type="button" name="save" value="Save" onclick="saveRecord()"/>
    <input type="reset" value="Reset"/>
</form>     
</body>
</html>
0
Ruben Teixeira 21 wrzesień 2012, 01:26

2 odpowiedzi

Najlepsza odpowiedź

Aby zobaczyć komunikaty konsoli.log w Firefoksie, użyj rozszerzenia Firebug. Wtedy co najmniej się rozpoczął:

Pozbyć się function openStore.

var openDbRequest = indexedDB.open(DB_NAME, 1);
openDbRequest.onerror = function (e) { console.log("error " + e); }
openDbRequest.onblocked = function (e) { console.log("blocked " + e); }
openDbRequest.onupgradeneeded = function (e) {
  var db = e.target.result;
  db.createObjectStore(STORE_NAME);
  var transaction = e.target.transaction;
  transaction.oncomplete = transaction.onabort = function(e) { console.log("transaction result: " + e); }
}
openDbRequest.onsuccess = function (e) {
  var db = e.target.result;
  if (!db.objectStoreNames.contains(STORE_NAME))
    console.log(STORE_NAME + " didn't exist, weird");
  var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
  var store = transaction.objectStore(STORE_NAME);
  var key = new Date().getTime();
  var request = store.put(row, key);
  request.onsuccess = function(e) { console.log("onsuccess"); }
  request.onerror = function(e) { console.log("onerror"); }
  transaction.oncomplete = function(e) { console.log("oncomplete"); }
  transaction.onabort = function(e) { console.log("onabort"); }
};
2
dgrogan 20 wrzesień 2012, 23:16

Spróbuj użyć Het w następujący sposób Shim. Oznacza to również, że musisz stracić wszystko z segregalizacją w kodzie i musisz podać argument wersji w otwartej metodzie na indeksydm

1
Kristof Degrave 21 wrzesień 2012, 05:33