...
PDA

View Full Version : Resolved Issue with AJAX

HDRebel88
05-22-2011, 05:12 PM
The below ajax is not working. When you click on the link it changes the URL to add #"section". But doesn't actually load anything. I just downloaded Firebug and I'm getting "sndReq not defined" when I click on one of the tabs. It would perfectly fine when Javascript is turned off because it's inbetween the <noscript> tags



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="http://ghosthuntersportal.com/" />
<title>Ghost Hunter's Portal - Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="ghost, hunters, hunter, ghosts, spirit, spirits, paranormal, investigation, investigator, investigators, k2, emf, meter, kii" />
<meta name="description" content="Ghost Hunters Potal. Parnormal research equipment store." />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />

<style type="text/css">
body {background-color: #000000; color: #FFFFFF; font-family: Verdana; margin-top: 10px;
margin-right:auto;margin-left:auto;max-width:1000px;}</style>
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="shortcut icon" href="./favicon.png" />
<script type=\"text/javascript\">
<!--
function load(){
var url = window.location.href;
var parts = url.split("#");
var type = parts[1];
if(type==undefined){
type="overview";
}
sndReq(type);
changeClr('nav'+type);
}


function requestObj() {
var reqObj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
reqObj = new ActiveXObject("Microsoft.XMLHTTP");
}else{
reqObj = new XMLHttpRequest();
}
return reqObj;
}

var http = requestObj();

function sndReq(action) {
var product_id ="2";
http.open('get', 'store.php?product='+product_id+'&get='+action, true);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById("ajaxout").innerHTML = response;
}
}

function changeClr(sel) {
if(sel == "navoverview"){
document.getElementById('navoverview').style.backgroundColor = '#AA00AA';
document.getElementById('navspecifications').style.backgroundColor = '#660066';
document.getElementById('navreviews').style.backgroundColor = '#660066';
}
else if(sel == "navspecifications"){
document.getElementById('navoverview').style.backgroundColor = '#660066';
document.getElementById('navspecifications').style.backgroundColor = '#AA00AA';
document.getElementById('navreviews').style.backgroundColor = '#660066';

}
else if(sel == "navreviews"){
document.getElementById('navoverview').style.backgroundColor = '#660066';
document.getElementById('navspecifications').style.backgroundColor = '#660066';
document.getElementById('navreviews').style.backgroundColor = '#AA00AA';
}
}
//-->
</script></head>
<body load();>
<div class="header">
<a href="./index.php">
<div class="logo"><img src="./logo.png" alt="Ghost Hunter's Portal" /></div>
<div class="tag"><img src="./tag.png" alt="Ghost Hunter's Portal" /></div>
</a>
<div class="header_right">
<div class="ad">

</div>
<div class="header_links">
<a href="./index.php">Home</a> | View Cart | <a href="./index.php?returns">Returns</a> | <a href="./index.php?aboutus">About Us</a> | <a href="./index.php?contactus">Contact Us</a>

</div>
</div>
</div>
<div class="content_wrapper">
<div class="links">
<div class="categories">Categories</div>
<div><a href="store.php?cat=test">Test</a></div>
<div><a href="store.php?cat=test2">Test2</a></div>
<div><a href="store.php?cat=test10">Test10</a></div>
<div><a href="store.php?cat=test20">Test20</a></div>
<div><a href="store.php?cat=test50">Test50</a></div>

<div class="sig"><img src="./sig.png" /></div>
</div>
<div class="data_wrapper">
<div class="search_crumbs">
<div class="crumbs">
<a href="./index.php">Home</a> <span class="eleven">></span> <a href="./store.php?cat=test">Test</a>
<span class="eleven">></span> <a href="./store.php?product=2">Test123</a></div>
<div class="search">
<form action="./index.php?search" method="post">

<label>Search</label> <input type="text" name="search" size="30" />
<input type="submit" value="Go" name="Go" />
</form>
</div>
</div>
<div class="content">

<div class="product_wrapper">
<div>Test123</div>
<div class="product_image">
<div><img src="test123.png" alt="Test123" /></div>
</div>
<div class="product_details">
<div class="product_price">Price: $1000</div>

<div class="product_code">GHP#: test</div>
<div class="rating_image"><img src="4.5.png" alt="4.5" /> <span class="twelve">(2 Reviews)</span></div><div><div class="product_highlights_text">Product Highlights</div><div class="product_highlights_item"><ul><li>test</li>
<li>test2</li>
<li>test3</li></ul></div>
</div>
</div>
<div class="add_cart">ADD CART BUTTON</div>
</div>
<script type="text/javascript"><!--
document.write("\n<div class=\"product_tab_wrapper\">\n<div class=\"product_tab\" id=\"navoverview\" style=\"background-color: #AA00AA;\">\n<a href=\"./store.php?product=2#overview\" onclick=\"sndReq(\'overview\'); changeClr(\'navoverview\');\">Overview</a>\n</div>\n<div class=\"product_tab\" id=\"navspecifications\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#specifications\" onclick=\"sndReq(\'specifications\'); changeClr(\'navspecifications\');\">Specifications</a>\n</div>\n<div class=\"product_tab\" id=\"navreviews\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#reviews\" onclick=\"sndReq(\'reviews\'); changeClr(\'navreviews\');\">Customer Reviews</a>\n</div>\n</div>\n<div class=\"product_information\" id=\"ajaxout\">\nPlease select a section from the tabs above.\n</div>\n\n");
//--></script>


<noscript>
<div class="product_tab_wrapper">
<div class="product_tab" id="navoverview" style="background-color: #AA00AA;">
<a href="./store.php?product=2">Overview</a>
</div>
<div class="product_tab" id="navspecifications" style="background-color: #660066">
<a href="./store.php?product=2&get=specifications">Specifications</a>
</div>
<div class="product_tab" id="navreviews" style="background-color: #660066;">
<a href="./store.php?product=2&get=reviews">Customer Reviews</a>
</div>
</div>

<div class="product_information"><div>test</div>
</div>
</noscript>

</div>
<br />
</div>
</div>
<div class="footer">
&copy; 2011 Ghost Hunter's Portal (Designed by: Andrew McCarrick)
</div>
</body>
</html>
Kor
05-24-2011, 10:38 AM
<script type=\"text/javascript\">
<!--
... code ...
//-->
</script>

Remove the red. I don't understand why you have escaped the quotes. And the <!-- //--> tokens marks HTML comments, not JavaScript comments. They must not be used inside the JavaScript code. Under an XHTML Doctype, as yours, will bring errors (because they are interpreted as < > start/end tags)

They were used like that in the Old Age of IE2 IE3 or NS2, to prevent an error in case the browsers were not able to interpret the JavaScript language. Now all the browsers in use know JavaScript, so that those comments inside the JavaScript codes are absolutely useless and, in some cases, even harmful.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum