« previous next »
Pages: [1]

Author Topic: Basic AJAX not working  (Read 658 times)

0 Members and 1 Guest are viewing this topic.

Offline DrezardTopic starter

  • Enthusiast
  • Posts: 245
    • View Profile
Basic AJAX not working
« on: May 17, 2010, 10:52:13 PM »
My basic ajax example.

It fails on this line here:
Code: [Select]
httpObject.open("GET", "test.php?keyword="
                                +document.getElementById('keyword').value, true);

Except I'm not sure why.

Heres the whole code:
Code: [Select]
<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(){
                httpObject = getHTTPObject();
                if (httpObject != null){
                        httpObject.open("GET", "test.php?keyword="
                                +document.getElementById('keyword').value, true);
                        alert("sent null?");
                        httpObject.onreadystatechange = setOutput;
                }
        }

        function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork();" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>


Any help?
Logged

Offline .josh

  • Administrator
  • 'Insane!'
  • *
  • Posts: 13,150
  • Grumpy Old Man
    • View Profile
Re: Basic AJAX not working
« Reply #1 on: May 17, 2010, 10:59:52 PM »
 :psychic:

can you be more specific than "it fails" ?
Logged

Did I help you? Feeling generous? Donate to me! | Donate to phpfreaks!

Offline DrezardTopic starter

  • Enthusiast
  • Posts: 245
    • View Profile
Re: Basic AJAX not working
« Reply #2 on: May 17, 2010, 11:42:25 PM »
It fails on that line. So basically. It loads AJAX. It runs the javascript code (if I put alerts in) up to that line and then does nothing past that line.

It doesn't output anything to screen either.

It doesn't throw the "sent null?" alert.
Logged

Offline kenrbnsn

  • Guru
  • Freak!
  • *
  • Posts: 9,708
  • Gender: Male
    • View Profile
Re: Basic AJAX not working
« Reply #3 on: May 17, 2010, 11:49:35 PM »
Which browser are you using. If you're not using Firefox, use it and get the firebug add-on. It's wonderful for debugging AJAX problems.

If you want to make you're life much easier when doing AJAX, I recommend that you learn how to use one of the JS Libraries like jQuery.

Ken
Logged

Offline AE117

  • Enthusiast
  • Posts: 83
    • View Profile
Re: Basic AJAX not working
« Reply #4 on: May 18, 2010, 12:18:05 AM »
Here you go I will give you the code first and then explain what I did
Code: [Select]

<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(value){
                httpObject = getHTTPObject();

                if (httpObject != null){

                        httpObject.open("GET", "test.php?keyword="+value, true);
alert ("working");
                        httpObject.onreadystatechange = setOutput;

document.getElementById("output").innerHTML = value;

                }
        }

      function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork(this.value);" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>

I think what you where going for was to change the bottom area to the text being typed. You dont actaully need to send out a request to a page. So i told the function doWork when called to get this.vale. Which means the element that it is on. If you wanted another element you could call it using the getElementby and so on.

The function doWork(value) value is now set to the this.value so it is now like a var

there is no real reason to open and document but i left that there just for kicks. As you can see it show working the it gets the document but the id output and changes the innerHtml to the Value which is called in the doWork(value)

the rest of the code is useless let me know if this is what you where looking for or if you need more help




Logged

Offline DrezardTopic starter

  • Enthusiast
  • Posts: 245
    • View Profile
Re: Basic AJAX not working
« Reply #5 on: May 18, 2010, 01:20:47 AM »
Quote from: AE117 on May 18, 2010, 12:18:05 AM
Here you go I will give you the code first and then explain what I did
Code: [Select]

<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(value){
                httpObject = getHTTPObject();

                if (httpObject != null){

                        httpObject.open("GET", "test.php?keyword="+value, true);
alert ("working");
                        httpObject.onreadystatechange = setOutput;

document.getElementById("output").innerHTML = value;

                }
        }

      function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork(this.value);" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>

I think what you where going for was to change the bottom area to the text being typed. You dont actaully need to send out a request to a page. So i told the function doWork when called to get this.vale. Which means the element that it is on. If you wanted another element you could call it using the getElementby and so on.

The function doWork(value) value is now set to the this.value so it is now like a var

there is no real reason to open and document but i left that there just for kicks. As you can see it show working the it gets the document but the id output and changes the innerHtml to the Value which is called in the doWork(value)

the rest of the code is useless let me know if this is what you where looking for or if you need more help






Thanks heaps for the help.

I kind of get whats going on here... Need a bit more reading of basic AJAX maybe.
Logged

Offline AE117

  • Enthusiast
  • Posts: 83
    • View Profile
Re: Basic AJAX not working
« Reply #6 on: May 18, 2010, 01:30:56 AM »
A great place to start is www.w3schools.com  they provide great examples its how i started
Logged
Pages: [1]
« previous next »