Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Issue with AJAX

  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Issue with AJAX

    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


    Code:
    <!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>
    Last edited by HDRebel88; 05-22-2011 at 07:04 PM. Reason: Solved

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by HDRebel88
    <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.
    Last edited by Kor; 05-24-2011 at 11:43 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •