0

The issue I am having is that when my if/else statement directs the user to another page, before it reaches the correct page it flickers to the index (first page on the HTML document) for around 1/2 seconds before redirecting to the correct page, to which I need to remove this flicker. How do I go about this? Do I need to use some sort of AJAX?

I'm using HTML, JavaScript, JQueryMobile and PhoneGap. One page architecture, all pages are on one HTML page.

Looking at the code below, the problem is when the user is directed to #page4 and #page3.

function loginDB(tx) {
    var Username = document.getElementById("username").value;
    var Password = document.getElementById("password").value;
    tx.executeSql("SELECT * FROM SoccerEarth WHERE UserName='" + Username + "' AND Password= '" + Password + "'", [], renderList);
}

function renderList(tx, results) {
    if (results.rows.length > 0) {
        navigator.notification.alert("Login Success!");
        window.location = "#page4";
    } else {
        navigator.notification.alert("Incorrect, please try again.");
        window.location = "#page3";
    }
}

<form onsubmit="return loginUser()">
    <label for="username">Username</label>
    <input type="text" id="username"><br>

    <label for="password">Password</label>
    <input type="password" id="password">

    <input type="submit" value="Sign In">
</form>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Mahdi
  • 153
  • 2
  • 16

1 Answers1

1

First of all, you use a mix of different technologies. So as it stands - your problem is unmanageable. Start debugging by making it manageable.

<form onsubmit="makeRedirectForTesting(); return false;">
    <input type="submit" value="Sign In">
</form>

function makeRedirectForTesting() {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
}

  1. If you still see flicker - remove all your business logic scripts with exeption of the one I gave in this answer. Make testing.

  2. If you still see flicker - kill your PhoneGap. Make testing.

  3. If you still see flicker - remove all content from other pages - but put in them text 'this is page #' - and add a page-name. Make testing.

  4. If you still see flicker - provide here a listing of your resulting HTML. This will be a starting point for reproducing your bug.

Report results of your testing. If flickering stops - tell which step caused it.

I think this debugging session wouldn't give fast results but it would be a methodical movement towards localizing bug.

Jaiden Snow
  • 852
  • 5
  • 5
  • So I just started this debugging session you kindly wrote out for me. Good news, I've just attempted the code you have provided it there is no flicker! So, let me now try and implement that into my actual code, be back soon :) – Mahdi Mar 18 '16 at 10:01
  • Joan to the rescue again, the issue was that I had onclick within the input tag rather than the form tag. So I changed onclick to onsubmit and put it in the form tag which resolved the issue! thanks again Joan! (Still on 14 reputation) – Mahdi Mar 18 '16 at 11:18
  • If you are able to have a look, I have a third issue :) - http://stackoverflow.com/questions/36068694/displaying-results-fetched-from-database-on-interface-javascript-html-sqlite – Mahdi Mar 18 '16 at 11:22
  • I've upvoted and ticket both your answers to my 2 questions, thanks! – Mahdi Mar 18 '16 at 11:24
  • Hope you are well Joan. I am struggling like crazy on this issue. Would be great if you can come to my rescue again :) http://stackoverflow.com/questions/36362303/creating-page-dynamically-issue – Mahdi Apr 01 '16 at 18:27