[jQuery] Appending Results to <p>
Hi,
I posted the thread below in the wrong forum... im hoping to get a
solution here.. hopefully..
Thanks
Original Post:
================================================================================
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
Follow Up:
=================================================================================
It looks like there was an error in the js, and that the posted result
is due to the HTML POST, rather than the ajax POST.
Further digging, I found the error in the error console of firefox...
Error: [Exception... "Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "file:///C:/
Inetpub/wwwroot/links/jquery.js Line: 3395"] Source File:
file:///C:/Inetpub/wwwroot/links/jquery.js
Line: 3395
ps Ive just installed firebug and opened the console, and htought that
the js errors should be displayed in the console, so when i didnt see
anything i assumed the script were fine... but i still have to open
the error console CTRL SHIFT - J ( BT W is this how you guys do it to
make sure everything is kosher when using in combination to firebug?)
=================================================================================
<!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>