www.webdeveloper.com
Results 1 to 8 of 8

Thread: Using Ajax response to force a new page to load

  1. #1
    Join Date
    Mar 2013
    Posts
    10

    Using Ajax response to force a new page to load

    I am using Ajax to rescore typos in a flashcard program. The problem comes when the user rescores a typo and that causes them to complete side 1 of the cards. I already have side one of the card displayed and so I want to force the entire page to reload. So I sent back the string "step1" from the Ajax program if I want the page to reload. It does not reload. I have simplified the programs to this to try to debug:
    html:
    HTML Code:
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
            <!-- Bootstrap core CSS -->
            <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet">
    
            <!-- Custom styles for this template -->
            <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet">
            <link href="http://localhost:10088/NewFolder/japanese/bootstrap-3.1.1-dist/css/custom.css" rel="stylesheet">
            <script>
                function ajaxRequest() {
                    //declare the variable at the top, even though it will be null at first
                    var req = null;
                    //modern browsers
                    req = new XMLHttpRequest();
    
                    //setup the readystatechange listener
                    req.onreadystatechange = function() {
                        //right now we only care about a successful and complete response
                        if (req.readyState === 4 && req.status === 200) {
                            //inject the returned HTML into the DOM
                            //document.getElementById('wrongMessage').innerHTML = 'Answer\'s Score Changed to Correct';
                            //document.getElementById('progress').innerHTML = req.responseText;
                            if (req.responseText=='step1'){
                                window.location.href = "vocab_quiz.php?deck_id=6&step_1_complete=1"
                                }
                        }
                    }
                    //open the XMLHttpRequest connection
                    //req.open("GET","correct_typo.php?dictionary_id=5038&box=2&deck=6&side1=0",true);
                    req.open("GET", "test1.php", true);
    
                    //send the XMLHttpRequest request (nothing has actually been sent until this very line)
                    req.send();
                }
            </script>
        </head>
        <body>
            <div id="progress">TODO write content</div>
            <button type="button" class="btn btn-lg btn-success" onclick="ajaxRequest()" >Count As Correct / Typo</button>
        </body>
    </html>
    Ajax script:
    Code:
    <?php
    echo 'step1';
    ?>
    If I uncomment the line: //document.getElementById('progress').innerHTML = req.responseText;
    I get step1 in progress div when I press the button. Firebug shows that I get the correct response too but even though when I Google it the consensus seems to be that window.location.href will cause the page to reload it does not.

    What am I doing wrong?

  2. #2
    Join Date
    May 2014
    Posts
    911
    I'm not sure what you are asking -- it almost sounds like you should swing an axe at all the JS for nothing and just use a form properly instead of the AJAX crap. You want a page-load, build it normally and don't use AJAX. If you REALLY want some sort of scripting handling it, use window.location instead of AJAX.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Mar 2013
    Posts
    10
    99% of the time I do not want a page reload. The 1% of the time that I do want the page to reload instead of having the Ajax process on the server send its normal response I send the string 'step1'. To simplify debugging I substituted a script that just echos 'step1' for the normal Ajax script. However, even though I get step1 as the response this code:
    Code:
    if (req.responseText=='step1'){
                                window.location.href = "vocab_quiz.php?deck_id=6&step_1_complete=1"
                                }
    does not cause the page to reload.

  4. #4
    Join Date
    Mar 2013
    Posts
    10
    My problem seems to be with the if statement:
    Code:
    alert (req.responseText);
                            if (req.responseText=='step1'){
                                alert ('here');
                                window.location = "http://localhost:10088/NewFolder/japanese/vocab_quiz.php?deck_id=6&step_1_complete=1"
                                }
    produces the first alert displaying the message step1 but not the 2nd alert (which would display the message here)

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    try to match the text value and not the value directly

    https://developer.mozilla.org/en-US/...s/String/match
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Mar 2013
    Posts
    10
    Quote Originally Posted by \\.\ View Post
    try to match the text value and not the value directly

    https://developer.mozilla.org/en-US/...s/String/match
    That gets me much closer. This works:
    Code:
    var resp=req.responseText;
                            var step1 = /AXq32/;
                            var found=resp.match(step1);
                            if (found){
                                alert ('here');
                                window.location = "http://localhost:10088/NewFolder/japanese/vocab_quiz.php?deck_id=6&step_1_complete=1"
                                }
                        }
    i changed from step1 as the response to a random string because var step1 = /step1/; matched any response with step1 anywhere. I thought I could get it to work if step1 was the only thing returned with var step1 = /^step1$/; but that never returned true.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Have a look at this, see if it gets you a bit closer https://developer.mozilla.org/en-US/...ts/RegExp/exec
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Mar 2013
    Posts
    10
    I tried reading the docs and it looks like starting with a ^ and ending with a $ should match my string when it is the only thing sent based on the regex rules here. https://developer.mozilla.org/en-US/...ar_Expressions but it is not working. I wonder if I need a newline at the end or something. I'll keep trying.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles