Javascript: Can't add data to database if redirecting to another page later

Question

I'm having a very strange problem with Javascript I can fill in the form, and then click Save to save data from form to the database successfully But if I add window.location.href = "deadlines.html" to the end of the function that insert to DB, to redirect to that page, the data will not be saved to db

This is the code: http://jsfiddle.net/ajSte/

<form id="formDeadlineInfo">
        <label for="shortDescription">Short Description</label>
        <input id="shortDescription"  type="text">
        <br>
        <label for="class">Class</label>
        <select id="class" class="ui-selectmenu" >
          <option value="HCI">HCI</option>
          <option value="DataMining">Data Mining</option>
          <option value="MobileDev">Mobile Dev</option>
          <option value="Ethics">Ethics</option>
        </select>
        <br>
        <label for="dueDate">Due Date</label>
        <input id="dueDate" type="date">
        <br>
        <label for="dueTime">Due Time</label>
        <input id="dueTime" type="time">
        <br>
        <label for="type">Type</label>
        <select id="type">
          <option value="Homework">Homework</option>
          <option value="Test">Test</option>
        </select>
        <br>
        <label for="additionalInfo">Additional Info</label>
        <input id="additionalInfo" type="text">
        <br>
        <label for="finished">Finished</label>
        <select data-role="flipswitch" id="finished" class="ui-selectmenu" >
          <option value="no" selected>No</option>
          <option value="yes">Yes</option>

        </select>

        <input type="button" class="ui-btn ui-btn-active ui-btn-icon-bottom" data-role="button" value="Save" style="text-align:center" onClick="getFormInfo()">

    </form>

and Javascript: http://jsfiddle.net/ajSte/ Sorry the "Code" function of this is hard to handle, please see in jsfiddle

I opened and populated database already before those codes run so don't need to ask about it Thank u so much if u can help me solve problem

Answer 1

But if I add window.location.href = "deadlines.html" to the end of the function that insert to DB, to redirect to that page, the data will not be saved to db

It's not strange at all. The insert operation is asynchronous , which means your code starts it, but then it finishes later (which is why it accepts a callback).

If you tell the code to take the user away from the page, the asynchronous operation is cancelled before it completes. You'll need to wait and then use that code writing to window.location.href within the success callback.

Eg:

function insertDeadlineToDB(dbId,dbDescription,dbClass,dbDueDate, dbDueTime, dbType, dbAdditionalInfo, dbFinished) {
    //alert('insert called');

    //alert('before insert');
    db.transaction(function(tx){
        tx.executeSql(
            'INSERT INTO deadlines (id, description, class, dueDate, dueTime, type, additionalInfo, finished) VALUES (?,?,?,?,?,?,?,?)',
            [dbId,dbDescription,dbClass,dbDueDate, dbDueTime, dbType, dbAdditionalInfo, dbFinished], function() {
               successCB();
               window.href.location = "deadlines.html"; // <=== Here
            }, errorCB);
        ////alert(tx);
   });
   //window.href.location = "deadlines.html";              <=== Not here
}

---

Side note: The code has missing variables, such as successCB which isn't defined anywhere.