Need Little help in ajax

Question

architact 25 Junior Poster

15 Years Ago

Why this code is not working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
var http="";
if(navigator.appName == "Microsoft Internet Explorer"){
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
http = new XMLHttpRequest();
}
function insert(){
document.getElementById('error').innerHTML = "Please wait a second";
var tp = document.getElementById('type').value;
var it = document.getElementById('item').value;
http.open('GET', '1.php?type='+tp+'&item='+it);
http.send = null;
if(http.readyState == 4){
document.getElementById('error').innerHTML = "Data Inserted";
}
}
</script>
<style type="text/css">
<!--
body,td,th {
	font-family: Comic Sans MS;
}
-->
</style></head>

<body>
<form action="javascript:insert()" method="get">
  <table width="422" cellspacing="3" cellpadding="3">
    <tr>
      <td width="66">Type</td>
      <td width="333"><input name="type" type="text" id="type" /></td>
    </tr>
    <tr>
      <td>Item</td>
      <td><input name="item" type="text" id="item" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" value="Insert" onclick="insertg();"/></td>
    </tr>
  </table>
</form>
  <div id="error"></div>
</body>
</html>

And the 1.php

<?php
mysql_connect("localhost","name","password") or die(mysql_error());
mysql_select_db("database")or die(mysql_error());
$type = $_GET['type'];
$item = $_GET['item'];
if($type <> ""){
mysql_query("INSERT INTO likings (type, item) VALUES('$type', '$item')") or die(mysql_error());
}
?>

php

3 Contributors
8 Replies
116 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by architact

All 8 Replies

scru 909 Posting Virtuoso

15 Years Ago

What error are you receiving?

langsor

15 Years Ago

Hi,

I'm not familiar with this http.send = null;, maybe I've just not run into this before, but I do http.send( request ); whether I'm doing a GET or a POST request and that seems to work for me.

Also, what browser is it not working in? IE, FF, both?

Thanks

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

architact 25 Junior Poster · Answer 1 · 2008-08-24T18:08:29+00:00

It is not working without any error, I am not receiving data in the database, but 1.php is working without ajax but not working with ajax.

architact 25 Junior Poster · Answer 2 · 2008-08-26T09:50:55+00:00

architact 25 Junior Poster

15 Years Ago

thanx langsor
it is not working in both...

langsor · Answer 3 · 2008-08-26T11:58:06+00:00

Okay, you still have some Google searching in front of you ... I got it to work in FF 3 but not IE 7.

One problem you were having is using a type="submit" instead of type="button" in your form which was confusing things some.

Also, I believe it is good practice to reinitialize your http object to null each request.

Also, there are some newer ActiveXObjects out there now, so I'm testing a whole array of them.

I tinkered around with some other stuff too -- hope you don't mind. But still can't make IE swallow this thing. My Ajax class seems to work, but I'm not finding the difference right now. I'll show it to you if you like, could use some testing since it's pretty new too.

Where I'm stuck is IE 7 is not registering the onreadystatechange event for the http-request object, at all. I separated out the response block into it's own function and that didn't help -- just stabbing in the dark really. -- so I put it back as an inline function.

I might note that I did a reboot (in case some process was hung up) and IE responded to the onreadystatechange but alerted empty values ... so maybe going back to http from this is in order for IE? But then it stopped responding at all again. Wish I could give it more time, but not tonight.

I'm not an Ajax guru, maybe someone who is will chime in and fix this thing for us.

Here's where I ended up -- good luck.
1.php

<?php
print 1;
exit;
?>

Modified Ajax script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">

function insert_data () {
  var http = null;
  if( window.ActiveXObject != null ) {
    axo = [
      "Msxml2.XMLHTTP.7.0",
      "Msxml2.XMLHTTP.6.0",
      "Msxml2.XMLHTTP.5.0",
      "Msxml2.XMLHTTP.4.0",
      "MSXML2.XMLHTTP.3.0",
      "MSXML2.XMLHTTP",
      "Microsoft.XMLHTTP"
    ];
    for ( i in axo ) {
      try {
        http = new ActiveXObject(axo[i]);
        break;
      } catch ( e ) {}
    }
  } else {
    http = new XMLHttpRequest();
  }
  var display = document.getElementById('error').firstChild;
  display.nodeValue = "Please wait a second";
  var tp = document.getElementById('type').value;
  var it = document.getElementById('item').value;
  var request = 'type=' + tp + '&item=' + it;
  http.open( 'GET', '1.php', true );
  http.send(request);
  http.onreadystatechange = function () {
    alert( this.readyState ); // not firing in IE 7
    if ( this.readyState == 4 ) { // COMPLETE
      if ( this.status == 200 ) { // OK
        display.nodeValue = "Data Inserted";
      } else if ( this.status != 0 ) {
        display.nodeValue = 'There was a problem with your request';
      }
    }
  };
}

</script>
<style type="text/css">
<!--
body,td,th {
  font-family: Comic Sans MS;
}
-->
</style></head>

<body>
<form>
  <table width="422" cellspacing="3" cellpadding="3">
    <tr>
      <td width="66">Type</td>
      <td width="333"><input name="type" type="text" id="type" /></td>
    </tr>
    <tr>
      <td>Item</td>
      <td><input name="item" type="text" id="item" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="button" name="Submit" value="Insert" onclick="insert_data();"/></td>
    </tr>
  </table>
</form>
  <div id="error">&nbsp;</div>
</body>
</html>

langsor · Answer 4 · 2008-08-26T12:03:57+00:00

Okay, fixed it...after that last long post I knew it would work for me ;-)

I recalled something about the order of initializing the onreadystate event function before opening the http request...

Also I went back to http from this in that function, FF liked this, but IE wanted http.

Here is is ...

function insert_data () {
  var http = null;
  if( window.ActiveXObject != null ) {
    axo = [
      "Msxml2.XMLHTTP.7.0",
      "Msxml2.XMLHTTP.6.0",
      "Msxml2.XMLHTTP.5.0", // IE 7 likes this one
      "Msxml2.XMLHTTP.4.0",
      "MSXML2.XMLHTTP.3.0",
      "MSXML2.XMLHTTP",
      "Microsoft.XMLHTTP"
    ];
    for ( i in axo ) {
      try {
        http = new ActiveXObject(axo[i]);
        break;
      } catch ( e ) {}
    }
  } else {
    http = new XMLHttpRequest();
  }
  var display = document.getElementById('error').firstChild;
  display.nodeValue = "Please wait a second";
  var tp = document.getElementById('type').value;
  var it = document.getElementById('item').value;
  http.onreadystatechange = function () {
    if ( http.readyState == 4 ) { // COMPLETE
      if ( http.status == 200 ) { // OK
        display.nodeValue = "Data Inserted";
      } else if ( http.status != 0 ) {
        display.nodeValue = 'There was a problem with your request';
      }
    }
  };
  var request = 'type=' + tp + '&item=' + it;
  http.open( 'GET', '1.php', true );
  http.send(request);
}

Let me know if it's working on your end too.

Peace

langsor · Answer 5 · 2008-08-26T12:05:11+00:00

If XMLHTTP isn't the pickiest piece of JavaScript, I don't know what is !

architact 25 Junior Poster · Answer 6 · 2008-08-26T16:17:22+00:00

thanks a lot langsor it is working now, you are a real legend.

Need Little help in ajax

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers