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
    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.

  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,407
    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,407
    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