Double Checking AJAX code

HDFilmMaker2112 · May 20, 2011

I'm looking to make a three links to update a table set-up below them. Just checking to make sure I did this right (I use AJAX and javascript infrequently at best):

<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);
var parts2 = url.split("=");
var parts3 = parts2.split("&");
var product_id = parts3[0];
}
</script>

<script type="text/javascript">
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) {
    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;
    }
}

</script>

<script type="text/javascript">
function changeClr(sel) {
    if(sel == "navoverview"){
        document.getElementById('navoverview').style.backgroundColor = '#AA0000';
        document.getElementById('navspecifications').style.backgroundColor = '#660000';
        document.getElementById('navreviews').style.backgroundColor = '#660000';
    }
    else if(sel == "navspecifications"){
        document.getElementById('navoverview').style.backgroundColor = '#660000';
        document.getElementById('navspecifications').style.backgroundColor = '#AA0000';
        document.getElementById('navreviews').style.backgroundColor = '#660000';

    }
    else if(sel == "navreviews"){
        document.getElementById('navoverview').style.backgroundColor = '#660000';
        document.getElementById('navspecifications').style.backgroundColor = '#660000';
        document.getElementById('navreviews').style.backgroundColor = '#AA0000';
    }
}
</script>


<div class="border" id="navoverview" style="background-color: #AA0000;">
<a href="./store.php?product='.$product_id.'#overview" onclick="sndReq(\'overview\'); changeClr(\'navoverview\');">Ovewview</a>
</div>
<div class="border" id="navspecifications" style="background-color: #660000;">
<a href="./store.php?product'.$product_id.'#specifications" onclick="sndReq(\'specifications\'); changeClr(\'navspecifications\');">Specifications</a>
</div>
<div class="border" id="navreviews" style="background-color: #660000;">
<a href="./store.php?product='.$product_id.'#reviews" onclick="sndReq(\'reviews\'); changeClr(\'navreviews\');">Customer Reviews</a>
</div>

<noscript>
<div class="border" id="navoverview" style="background-color: #AA0000;">
<a href="./store.php?product='.$product_id.'">Overview</a>
</div>
<div class="border" id="navspecifications" style="background-color: #660000;">
<a href="./store.php?product'.$product_id.'&get=specifications">Specifications</a>
</div>
<div class="border" id="navreviews" style="background-color: #660000;">
<a href="./store.php?product='.$product_id.'&get=reviews">Customer Reviews</a>
</div>
</noscript>

<div class="center" id="ajaxout">
Please select a section from the tabs above.
</div>

HDFilmMaker2112 · May 21, 2011

Well I just tried integrating the above into my site, and it doesn't work. At all. Ideas?

http://ghosthuntersportal.com/store.php?product=2

HDFilmMaker2112 · May 22, 2011

Alright, I just downloaded Firebug and I'm getting "sndReq not defined".

<!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">
© 2011  Ghost Hunter's Portal (Designed by: Andrew McCarrick)
</div>
</body>
</html>

Sign In

Double Checking AJAX code

Recommended Posts

HDFilmMaker2112

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information