www.webdeveloper.com
Results 1 to 15 of 15

Thread: [RESOLVED] AJAX function just not firing or doing anything

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Posts
    96

    resolved [RESOLVED] AJAX function just not firing or doing anything

    When i run my simple HTML page I've got it so the ajax code builds an XMLHttpRequest onload, and im trying to put data.txt into a <div> called targetDiv. but it doesnt do ANYTHING when i click the button, is there something wrong in this code?

    Code:
    <html>
    
    <body  onload= "onLoad()">
    <form name="myForm">
    <script type="text/javascript">
    
    var XMLHttpRequestObject = false;
    
    if (window.XMLHttpRequest) {
    XMLHttpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    function getData(dataSource, divID)
    {
    if(XMLHttpRequestObject) {
    var obj = document.getElementById(divID);
    XMLHttpRequestObject.open("GET, dataSource);
    
    XMLHttpRequestObject.onreadystatechange = function()
    {
    if (XMLHttpRequestObject.readyState == 4 &&
    XMLHttpRequestObject.status == 200 {
    obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    }
    
    XMLHttpRequestObject.send(null);
    }
    }
    
    
    function maximum()
    {
    var x=document.forms.myForm
    x[0].maxLength="5"
    }
    
    
    function onLoad()
    
    {
    var d = (new Date() + "").split(" ");
    document.getElementById('tradeDate').value = d[0]+" "+d[1]+" "+d[2]+" "+d[5];
    }
    
    
    </script>
    
    <center><h1><u>Trade Buying and Selling Transaction</u></h1></center>
    
    <br>
    </font>
    <font="Arial" color="white">
    <table border="1" align="center">
    
    <td><th>Trade Date: <input id="tradeDate" name="tradeDate" type="text" value=""></th></td>
    <td><th>Returning Users: <input type="text" name="user" id="return"><br></th></td>
    <td><th>Trade Reference: <input type="text" name="trade" id="trade"></th></td>
    
    </table>
    </font>
    <br>
    <br>
    
    <table border="1" align="center">
    <tr>
        <td><th>Buy Currency Code:<input type="text" maxlength="3" onblur = "getData('data.txt','targetDiv')" onkeyup="this.value = this.value.toUpperCase();"></th></td>
    	
    </tr>
    
    <tr>
      	<td><th>Sell Currency Code:&nbsp<input type="text" name="sellcode" id="sellcode" maxlength=3 onkeyup="this.value = this.value.toUpperCase();"></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    
    <td><th>Exchange Rate:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="xrate" id="xrate"></th></td>
    
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    <tr>
        <td><th>Buy Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="buyval" id="buyval"></th></td>
    </tr>
    
    <tr>
      	<td><th>Sell Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type"text" name="sellval" id="sellval" maxlength=3></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    <tr>
        <td><th>Customer Code:</th></td>
        <td><th>Settlement:</th></td>
    </tr>
    
    <tr>
      	<td><th><input type"text" name="code" id="code"></th></td>
      	<td><th><input type"text" name="settlement" id="settlement"></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="0" align="center">
    <tr>
    
    <td><input type="submit" name="submit" id="submit" align="center" onclick = "getData(http://localhost/ch03/data.txt','targetDiv')"> </td>
    
    </tr>
    </table>
    
    <input type = "button" value = "Display Message"
    onclick = "getData(http://localhost/ch03/data.txt','targetDiv')">
    
    
    
    </body>
    </html>
    thanks in advance

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You have a slight syntax error in your code:
    Code:
    if (window.XMLHttpRequest) {
      XMLHttpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    The variable names should be the same:
    Code:
    if (window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    Does that help?

  3. #3
    Join Date
    Jun 2007
    Posts
    96
    nope, nothing still, ill try a different a approach thanks anyway

  4. #4
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Take another look at:
    Code:
    XMLHttpRequestObject.open("GET, dataSource);
    Should be "GET"

    Secondly:
    Code:
    XMLHttpRequestObject.onreadystatechange = function()
    {
    if (XMLHttpRequestObject.readyState == 4 &&
    XMLHttpRequestObject.status == 200 {
    obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    }
    has an unmatched ) but in any case would better read:
    Code:
    XMLHttpRequestObject.onreadystatechange = function()
    {
    var x=XMLHttpRequestObject;if(x.readyState!=4)return;
    if(x.status==200 || !x.status)
    obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    Finally:
    Code:
    getData(http://localhost/ch03/data.txt','targetDiv')
    it has an unmatched ' and change it to:
    Code:
    getData('http://localhost/ch03/data.txt','targetDiv')
    might want to also move the file so you can simply use:
    Code:
    getData('data.txt','targetDiv')
    Last edited by Ultimater; 07-06-2007 at 06:04 AM.

  5. #5
    Join Date
    Jun 2007
    Posts
    96
    Still the same, try it for yourself by making it a html and putting a notepad .txt with some text in it the same dir, its so weord because this works:

    Code:
    <html> 
      <head> 
        <title>Ajax at work</title> 
    
        <script language = "javascript">
          var XMLHttpRequestObject = false; 
    
          if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
          } else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
          }
    
          function getData(dataSource, divID) 
          { 
            if(XMLHttpRequestObject) {
              var obj = document.getElementById(divID); 
              XMLHttpRequestObject.open("GET", dataSource); 
    
              XMLHttpRequestObject.onreadystatechange = function() 
              { 
                if (XMLHttpRequestObject.readyState == 4 && 
                  XMLHttpRequestObject.status == 200) { 
                    obj.innerHTML = XMLHttpRequestObject.responseText; 
                } 
              } 
    
              XMLHttpRequestObject.send(null); 
            }
          }
        </script>
      </head> 
    
      <body>
    
        <H1>Fetching data with Ajax</H1>
    
        <form>
        	  
    		  <input type = "button" value = "Display Message" 
            onclick = "getData('data.txt', 'targetDiv')">
    		 <input type = "button" value = "Display Message" 
            onclick = "getData('data.txt', 'targetDiv')">
    		
        </form>
    
        <div id="targetDiv">
          <p>The fetched data will go here.</p> 
        </div> 
    
      </body> 
    </html>

  6. #6
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    run it on a SERVER. If you insist upon testing it on your desktop with IE7 then change:
    Code:
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
          } else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
          }
    to:
    Code:
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    once you see it works, change it back since the first way is designed for the web while the second way serves IE7 on the file: protocol which is normally denied access yet activex still allows it. Both however allow requests on the http: protocol.
    Last edited by Ultimater; 07-06-2007 at 06:25 AM.

  7. #7
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    In the future, get used to using:
    Code:
    /* running locally on IE6,IE7 */                      ;/*Gotta love IE's support for Conditional Compilation*/; /*@cc_on
      if(location.protocol=="file:"){
       if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;}
       if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;}
      }                                                                                                             @cc_off @*/
    
    /* IE7, Firefox, Safari, Opera... the Standard way */
      if(!xmlhttp)try{ xmlhttp=new XMLHttpRequest(); }catch(e){xmlhttp=false;}
    
    /* IE6 */
      if(typeof ActiveXObject != "undefined"){
       if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;}
       if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;}
      }
    
    /* IceBrowser */
      if(!xmlhttp)try{ xmlhttp=createRequest(); }catch(e){xmlhttp=false;}
    Last edited by Ultimater; 07-06-2007 at 06:29 AM.

  8. #8
    Join Date
    Jun 2007
    Posts
    96
    thanks for your help, but changing it specific to internet explorer doesnt work (and im using IE6) i have no clue why the code doesnt work, its doing something but getting an error, says there is an error with:

    yet all this button does is call the text out of data.txt and put it in a div, maybe its where i put it in the code?

    Code:
    <input type="button" onclick = "getData('data.txt', 'targetDiv')">
    yet again heres my updated code: i feel like giving up

    Code:
    <html>
    <head>
    <title>Trading Currencies</title>
    
    <script type="javascript">
    <script language = "javascript">
          var XMLHttpRequestObject = false; 
    
         XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    
          function getData(dataSource, divID) 
          { 
            if(XMLHttpRequestObject) {
              var obj = document.getElementById(divID); 
              XMLHttpRequestObject.open("GET", dataSource); 
    
              XMLHttpRequestObject.onreadystatechange = function() 
              { 
                if (XMLHttpRequestObject.readyState == 4 && 
                  XMLHttpRequestObject.status == 200) { 
                    obj.innerHTML = XMLHttpRequestObject.responseText; 
                } 
              } 
    
              XMLHttpRequestObject.send(null); 
            }
          }
        
    	<form id="my form">
    	</script>
    	<input type="button" onclick = "getData('data.txt', 'targetDiv')">
    </form>
    <script type="text/javascript">
    
    function onLoad()
    {
    var d = (new Date() + "").split(" ");
    document.getElementById('tradeDate').value = d[0]+" "+d[1]+" "+d[2]+" "+d[5];
    
    with(new Date){
    dateStr = [getDate(),getMonth()+1,getFullYear()].join('/');
    document.getElementById('tradeDate').value = dateStr;
    }
    }
    
    
    </script>
    </head>
    
    <body  onload= "onLoad()">
    
    <center><h1><u>Trade Buying and Selling Transaction</u></h1></center>
    
    <form name="myForm">
    
    <br>
    </font>
    <font="Arial" color="white">
    <table border="1" align="center">
    
    <td><th>Trade Date: <input id="tradeDate" name="tradeDate" type="text" value=""></th></td>
    <td><th>Returning Users: <input type="text" name="user" id="return"><br></th></td>
    <td><th>Trade Reference: <input type="text" name="trade" id="trade"></th></td>
    
    </table>
    </font>
    <br>
    <br>
    
    <table border="1" align="center">
    <tr>
        <td><th>Buy Currency Code:<input type="text" maxlength="3" onkeyup="this.value = this.value.toUpperCase();"></th></td>
    	<td>
    	<div id="targetDiv">
          <p>The fetched data will go here.</p> 
        </div>
    	</td>
    	
    </tr>
    
    <tr>
      	<td><th>Sell Currency Code:&nbsp <input type="text" name="sellcode" id="sellcode" maxlength=3 onkeyup="this.value = this.value.toUpperCase();"></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    
    <td><th>Exchange Rate:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="xrate" id="xrate"></th></td>
    
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    
    <tr>
        <td><th>Buy Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="buyval" id="buyval"></th></td>
    </tr>
    
    <tr>
      	<td><th>Sell Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type"text" name="sellval" id="sellval" maxlength=3></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="1" align="center">
    <tr>
        <td><th>Customer Code:</th></td>
        <td><th>Settlement:</th></td>
    </tr>
    
    <tr>
      	<td><th><input type"text" name="code" id="code"></th></td>
      	<td><th><input type"text" name="settlement" id="settlement"></th></td>
    </tr>
    </table>
    
    <br>
    <br>
    
    <table border="0" align="center">
    <tr>
    
    <td><input type="submit" name="submit" id="submit" align="center"> </td>
    
    </tr>
    </table>
    
    </form>
    </body>
    </html>
    Thanks for helping so far though mate, really appreciate it

  9. #9
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    It may also be that the text file it's grabbing needs to be served with a content type of text/xml. The .txt file is being served with a text/plain content type, and perhaps that's the problem.

    Also, the JavaScript making the AJAX call must be on the same domain as the URL to the AJAX call. For example, a page on www.mysite.com cannot have a function in a JavaScript hosted on mysite.com make an AJAX call to www.google.com.

    If the page on www.mysite.com linked to an external javascript file on Google, then www.mysite.com can make AJAX calls to google.com. This is how google maps work. You might be running into domain permission problems.

  10. #10
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Code:
    <script type="javascript">
    <script language = "javascript">
    ...
    <form id="my form">
    </script>

  11. #11
    Join Date
    Jun 2007
    Posts
    96
    Error: getData is not defined
    Source File: http://localhost/xxTrade/trade.htm
    Line: 1

    This is the onlt thing going wrong i think, but it is defined, or does it have to be a variable?

  12. #12
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    What I'm saying is to replace:
    Code:
    <script type="javascript">
    <script language = "javascript">
    ...code defining getData...
    <form id="my form">
    </script>
    with:
    Code:
    <script type="text/javascript">
    ...code defining getData...
    </script>
    since getData is never defined due to invalid HTML syntax.

  13. #13
    Join Date
    Jun 2007
    Posts
    96
    Thanks, I changed it to that, and now when i click there is no error, but i still doesnt do anything, it may be that i have placed the button in the wrong place in the code, is there anywhere specific that the call wouldnt work?

  14. #14
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Your code has come a long way... what does it look like now?

    Although I suspect that you are running it server-less and you should replace:
    Code:
    if(XMLHttpRequestObject.readyState == 4 &&
       XMLHttpRequestObject.status == 200){
    with:
    Code:
    if(XMLHttpRequestObject.readyState==4 && (!XMLHttpRequestObject.status || XMLHttpRequestObject.status==200)){
    Last edited by Ultimater; 07-09-2007 at 04:31 AM.

  15. #15
    Join Date
    Jun 2007
    Posts
    96

    Wooooo

    OMG you legend that worked, yes its come a long way and now it works! thanks so much for help: even though it gets harder from here, and instead of getting that text from a .txt file i have to get it from a database now

    but this is a great improvement thank you

Thread Information

Users Browsing this Thread

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

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