Difficulty Getting JavaScript XMLHttpRequest To Do Anything, Stop Refreshing Page

Question

I rarely if ever use PHP so this is tough for me, but since I can't load a URL's contents in JavaScript I have to use some server-side code to do what I want to.

Here is my relevant JavaScript code:

   function makeRequest (url, urlString) {
        var formData = new FormData();
        formData.append("urlString",urlString);

        var xmlRequest = new XMLHttpRequest();
            xmlRequest.open("POST", url, true);
            xmlRequest.send(formData);

         xmlRequest.onreadystatechange=function()
            {
                if (xmlRequest.readyState==4 && xmlRequest.status==200) {
                    document.getElementById("results").innerHTML=xmlRequest.responseText;
                } else {
                    document.getElementById("results").innerHTML=xmlRequest.readyState;
                }
            }
    }

    function search (event) {
        if( event.which === 13 || event.keyCode === 13 ) {

            var searchString = "&text=" + document.getElementById("searchFlickr").value;
            var URLtoUse = combineString(searchString);
            alert(URLtoUse);

            makeRequest("FlickrSearch.php", URLtoUse);
            //prevent page refresh
            return false;
        }
    }

And the PHP:

<?php
        $URLtoUse = $_POST["urlString"];

        $XML = $file_get_contents($URLtoUse);

        echo $XML;
?>

And the HTML:

<form>
    <label id="searchFlickrLabel" for="searchFlickr">Type your search query and hit enter!</label> <br />
    <input type="text" id="searchFlickr" onkeypress="return search(event);"/>
</form>

<div id="results">

</div>

I've tried using the PHP embedded on the same page as the JavaScript, but that doesn't do anything at all. Even the most basic thing I'm attempting to do, namely prevent the form submission from refreshing the page, is failing.

What am I doing wrong?

EDIT: Update!

I've implemented all the helpful changes to at least get the code doing something. The problem now is that I don't seem to get any responseText. Odd.

If I change the PHP to return a string of "something" it does display.

EDIT2: It works! Thank you so much both of you for being so patient. The answer I'm accepting helped me the most, but both helped me a great deal, and the comments have been fantastic.

What's the relevant HTML look like? How are you binding search() to an event? — jthomas, Feb 26 '14 at 15:05
Did none else use the `$` in front of the `file_get_contents()` function call? I am sure you want to remove that ;) — ferdynator, Feb 26 '14 at 15:14
Correct: changed. I'm still having the same problems, but I'm following Tony Wilk's advice now. Too much time in IDEs has spoiled me as far as manual debugging goes... — JimmyM, Feb 26 '14 at 15:18
Document and document are two different things. You want (lowercase) document in your makeRequest method. — jthomas, Feb 26 '14 at 15:40

score 2 · Accepted Answer · answered Feb 26 '14 at 15:12

2

When things just don't work... add some debug code e.g.

Document.getElementById("results").innerHTML=xmlRequest.responseText;
// check the response code, is it 200 ?
Document.getElementById("debug").innerHTML= xmlRequest.status;

in your php...

// just echo the request - do you get this back ?
echo $URLtoUse;

//echo $XML // try this later

answered Feb 26 '14 at 15:12

TonyWilk

1,447
10
13

First, thanks for the response! Second: No - I don't get the request back. The innerHTML method of updating doesn't work because of the problems with page refresh, but I'm trying alert() and...it doesn't alert. I'm confused. – JimmyM Feb 26 '14 at 15:23
1

Ah, you have Document.getElementById - it should be `document.getElementById` lower-case 'd'. You should see that error if you look in (e.g.) Chrome's developer tools console – TonyWilk Feb 26 '14 at 15:38
Doh! I've found another wrongly capitalised thing too, formData() was being used for FormData(). Thanks so much for all the help. It's still not working, but at least all these mistakes are gone. – JimmyM Feb 26 '14 at 15:50

score 1 · Answer 2 · answered Feb 26 '14 at 15:33

1

Here's a simplified example of preventing the form submission based on your markup/javascript.

http://jsbin.com/yozixugo/1/edit

The key is the event.preventDefault() call to prevent the enter key from submitting the form. Note though that preventDefault() may not exist in older versions of IE. You might consider leaning on something like jQuery to help bridge these sorts of browser issues.

answered Feb 26 '14 at 15:33

jthomas

858
6
19

Hi, thanks for the response - I've tried event.preventDefault(), which hasn't worked either :( According to the resources I'm looking at `return false;` accomplishes the same thing and more: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false . I'm kind of confused by why nothing is working, as it looks like the refreshing thing should be fixed by `return false;` at least. – JimmyM Feb 26 '14 at 15:37
1

From your linked answer: "Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up." – jthomas Feb 26 '14 at 15:42
Having done a bit more experimentation, it appears that there is some kind of runtime error with the makeRequest() function which is causing the default functionality to execute, so putting event.preventDefault() right at the top of the function has prevented it from refreshing...but still nothing is shown, not even the status request result. – JimmyM Feb 26 '14 at 15:43
1

In the jsbin example try replacing event.preventDefault(); with return false; and pressing enter in the text box. You should see the form submit (the text box will disappear). – jthomas Feb 26 '14 at 15:43
I don't understand why that's relevant jthomas, won't the event bubble up with preventDefault() too? That's the entire argument for using `return false;` over preventDefault as far as I can see, it's just that return false SOMETIMES stops propagation as well. Have I misunderstood something? edit: I don't know wtf I am doing – JimmyM Feb 26 '14 at 15:45
1

I've updated the jsbin example with some logging to show the difference between an event with preventDefault() and without. Pressing something other than enter bubbles with defaultPrevented set to false. – jthomas Feb 26 '14 at 15:54

Difficulty Getting JavaScript XMLHttpRequest To Do Anything, Stop Refreshing Page

2 Answers2