Append Result to a <p>
Hi
I'm having problems appending my results to a paragraph without
refreshing ...
I've done a simple ajax test on my own form but calling google.ca to
do a search . I want to output the result within a DIV on the current
page without refreshing the page. For some reason, it is displaying
the whole result in a new page instead.
Can anyone tell me what I am doing wrong here?
Thanks
<!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" />
<script language="JavaScript" type="text/javascript" src="../links/
jquery.js"></script>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script language="javascript">
$(document).ready(function(){
$('#submit').click(function(){
$('#container').append('<img src="loading-balls.gif"
alt="loading ..." id="loadingImg"/>');
var q = $('#q').val();
$.ajax({
url: 'http://www.google.ca/search',
type: GET',
data: 'q=' + q,
success: function(result) {
//console.log(result);
$('#response').remove();
$('#container').append('<p id="response">' + result + '');
$('#loadingImg').fadeOut(500);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="GET" action="http://
www.google.ca/search">
Search Criteria
<input name="q" type="text" id="q" />
Submit
<input type="submit" name="Submit" value="Submit" id="submit" />
<div id="container"></div>
</form>
</body>
</html>
Topic Participants
Richard Worth