CODEWITHSUNDEEP
javascriptajaxformssearch
Kbob
Kbob

Reputation: 177

Why Doesn't my ajax,javascript work?

I'm writing a website to search through my python database. The nonjavascript version worked perfectly. But now I want to use ajax so that the page doesn't have to be refreshed. I.e., the results will show up as soon as the search button is clicked. But it don't work (I click the button and nothing happens). Why not??? 

<script language="javascript">
var xmlhttp;
   if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();}
   else
     {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

function getData(){
if(xmlhttp) {
var obj = document.getElementById("search-results");
xmlhttp.open("GET","http://127.0.0.1:8000/search/?name=i&city=o",true);
xmlhttp.onreadystatechange = function()  {
    if (xmlhttp.readyState == 4 &&
    xmlhttp.status == 200) {
    obj.innerHTML = xmlhttp.responseXML;
    }}
xmlhttp.send(null);
  }}
</script>
</head><body>
<form id="search-form" action="" method="get">
    <input type="text" name="name" id="name">
    <input type="text" name="city" id="city">
    <input type="button" value="Search" onclick = "getData()">
</form>     
<div id="search-results"></div></body>

Upvotes: 1

Views: 186

Answers (3)

secretformula
secretformula

Reputation: 6432

You may need to return false inside your event handler to prevent the default from executing.

Upvotes: 1

Kbob
Kbob

Reputation: 177

I got it to work by changing two things:

1)I changed xmlhttp.responseXML to xmlhttp.responseTEXT even though my fetched file is written in HTML. Shouldn't it be XML and not TEXT then?

2) the target element was a <div>. I changed the target element to a <p> and it worked. Does innerHTML not work in <div>?

Upvotes: 0

Baz1nga
Baz1nga

Reputation: 15579

Well the problem is that this is considered a cross domain request and your browser natively blocks such responses. You need to use jsonp for the same.

http://remysharp.com/2007/10/08/what-is-jsonp/

http://code.google.com/p/jquery-jsonp/

you can get an example of your exact problem here: http://code.google.com/p/google-web-toolkit-doc-1-5/wiki/GettingStartedJSON (search for Same Origin Policy on the page)

in essence this is what you want:

var url = "http://127.0.0.1:8000/search/?name=i&city=ocallback=jsonCallback";

var script = document.createElement("script");
  script.setAttribute("src", url);
  script.setAttribute("type", "text/javascript");

  window.jsonCallback = function(jsonObj) {

  document.body.removeChild(script);
  delete window[callback];
}

document.body.appendChild(script);

Upvotes: 1

Related Questions