Jump to content

Double Checking AJAX code

HDFilmMaker2112

By HDFilmMaker2112
in Javascript Help

Recommended Posts

HDFilmMaker2112 Advanced Member

HDFilmMaker2112

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/237001-double-checking-ajax-code/
Share on other sites
HDFilmMaker2112 Advanced Member

HDFilmMaker2112

Posted
  • Author
Posted

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.