函数未定义,但显示在页面源中

时间:2011-02-05 08:51:55

标签: javascript ajax

我有一个在用户点击按钮时调用的函数。 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" lang="en" xml:lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="Wildberry,Incense,Coconut,100Pcs" />
    <meta name="description" content="A true coconut fragrance.It's part of our 'Fruits' Fragrance Family." />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>The Realms of Wickedry &bull; Wildberry Incense Coconut 100Pcs</title>

    <link rel="stylesheet" type="text/css" href="css/shadowbox.css" />

    <script type="text/javascript" src="js/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
        handleOversize: "drag",
        modal: true
    });

    var ajaxRequest;
    var url = "ajax.php";

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    function cartRemove(id)
    {
        ajaxRequest.onreadystatechange = function()
        {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
                document.getElementById('cart').innerHTML = ajaxRequest.responseText;
            }
        }
        var params = "mode=cartremove&id=" + id;
        ajaxRequest.open("POST", url, true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(params);
    }

    function wishRemove(id)
    {
        ajaxRequest.onreadystatechange = function()
        {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
                document.getElementById('wishlist').innerHTML = ajaxRequest.responseText;
            }
        }
        var params = "mode=wishremove&id=" + id;
        ajaxRequest.open("POST", url, true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(params);
    }

    function addReview(id)
    {
        var u = 2;
        var review = document.review.reviewContent.value;
        ajaxRequest.onreadystatechange = function()
        {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
            {
                document.getElementById('reviews_div').innerHTML = ajaxRequest.responseText;
            }
        }
        var params = "mode=reviews&id=" + id + "&u=" + u + "&reviewContent=" + review;
        ajaxRequest.open("POST", url, true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(params);
    }

    function wishAdd(id)
    {
        ajaxRequest.onreadystatechange = function()
        {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
                document.getElementById('wishlist').innerHTML = ajaxRequest.responseText;
            }
        }
        var params = "mode=wishlist&id=" + id;
        ajaxRequest.open("POST", url, true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(params);
    }

    function shareWish()
    {
        window.open("./../shop/pages/share_pop.php","Share Wishlist","menubar=0,resizable=0,location=0,width=550,height=300");
    }

    function checkList()
    {
        var email_list = document.getElementById['email_list'].innerHTML;
        if(email_list == '')
        {
            return;
        }
        else
        {
            var urlStr = '';
            var emails = email_list.replace(/^\s+|\s+$/g,"");
            emails = emails.split(",");
            var count = emails.length;
            var i = 0;
            while(i <= count)
            {
                urlStr += "&email"+i+"="+emails[i];
            }

            ajaxRequest.onreadystatechange = function()
            {
                if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
                    document.getElementById('share_results').innerHTML = ajaxRequest.responseText;
                }
            }

            var params = "mode=share_wish"+urlStr;
            ajaxRequest.open("POST", url, true);
            ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajaxRequest.setRequestHeader("Content-length", params.length);
            ajaxRequest.setRequestHeader("Connection", "close");
            ajaxRequest.send(params);
        }
    }
    </script>

</head>
<body>
<div id="maincontainer">
    <div id="topsection">
        <div class="innertube">
            <div id="header_img">
                <a style="border:none!important;" href="./../shop/index.php"><img style="border:none!important;" src="http://xxxxxxxxxxxx/shop/images/Wickedry.png" alt="header_img" /></a>

            </div>
            <div id="header_nav">
                <a class="nav_links" href="./../shop/index.php">Home</a>
                <a class="nav_links" href="./../shop/login.php?mode=logout&amp;sid=c02fc022a1553cc34964448194c9d20b">Logout [Chaos Creator]</a>

                                <a class="nav_links" href="./../shop/cart.php">View Cart</a>
                <a class="nav_links" href="./../shop/view.php?mode=wishlist">View Wishlist</a>
                            </div>

        </div>
    </div>  <div id="contentwrapper">
        <div id="contentcolumn">
            <div class="innertube">
                <div id="titleBar">
                    <div id="breadcrumb">
                        <a href="./../shop/view.php?mode=cat&id=15">Health & Beauty</a> &#62;&#62; <a href="./../shop/view.php?mode=subcat&id=67"> Candles</a>                  </div>

                    <div id="prod_title">
                        <h1>Wildberry Incense Coconut 100Pcs</h1>
                    </div>
                </div>
                <div id="prod_wrap">
                    <div id="prod_img">
                        <a class="prod_img_link" href="./images/products/large/GL5325.jpg" rel="shadowbox;title=Wildberry Incense Coconut 100Pcs;">
                            <img class="prod_img" src="http://xxxxxxxxx/shop/images/products/thumbs/GL5325.jpg" alt="Wildberry Incense Coconut 100Pcs" />

                        </a>
                    </div>
                    <div id="prod_desc">
                        <p>A true coconut fragrance.It's part of our 'Fruits' Fragrance Family.</p>
                    </div>
                </div>
                <br />
                <div id="details">

                    <div id="prod_details">
                        Manufactured by: Wild Berry<br />
                        Model: GL5325<br />
                    </div>
                    <div id="prod_price">
                        $9.75                   </div>
                    <div id="quantity">

                                                    <form method="post" action="./../shop/view.php?mode=prod&amp;add_id=3806">
                                <input type="hidden" name="id" value="3806" />
                                <input type="text" name="quantity" value="0" onfocus="this.value='';" size="3" />
                                <input class="btn" type="submit" name="submit" value="Add to Cart" />
                            </form>
                                            </div>
                    <br />
                    <br />
                                        <a class="wish" href="#" onclick="wishAdd(3806);">Add to Wish List</a><br />

                    <br />
                    <br />
                    <strong>Add a Review:</strong><br />
                    <form action="" method="post" name="review">
                        <textarea cols="50" rows="10" name="reviewContent" id="reviewContent"></textarea><br />
                        <input type="submit" class="btn" name="review_submit" id="review_submit" onclick="addReview(3806);" value="Submit!" />
                    </form>
                    <br /><br /><div name="reviews_div"><p style="text-alignment:center;">There are no reviews for this item. Be the first to add one!</p></div>                </div>

            </div>
        </div>
    </div>  <div id="leftcolumn">
        <div class="innertube">
            <div style="border: 1px solid white;">
                <div class="innertube">
                                <div id="search">
                <h2>Search</h2>

                <table cellpadding="5" cellspacing="1" class="searchBox" width="100%">
                    <tr>
                        <td align="center">
                            <form method="get" action="http://search.atomz.com/search/">
                                <table>
                                    <tr>
                                        <td align="center">
                                            <input type="hidden" name="sp_a" value="sp10049097" />
                                            <input size="25" name="sp_q" />

                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <input type="submit" value="Search" class="btn" />
                                        </td>
                                    </tr>
                                </table>
                                <input type="hidden" name="sp_p" value="all">

                                <input type="hidden" name="sp_f" value="UTF-8">
                            </form>
                            <br />
                            <a href="./../shop/search.php">Advanced Search</a>
                        </td>
                    </tr>
                </table>
            </div>              </div>

            </div>
            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                                <div id="menu">
                <h2>Categories</h2>
                            </div>              </div>

            </div>
        </div>
    </div>  <div id="rightcolumn">
        <div class="innertube">
            <div style="border: 1px solid white;">
                <div class="innertube">
                                                    Welcome back, Chaos Creator!<br />
                <a href="<b>[phpBB Debug] PHP Notice</b>: in file <b>/shop/pages/blocks/login_box.php</b> on line <b>27</b>: <b>Undefined variable: u_profile</b><br />
">My Account</a><br />

                <a href="./../shop/cart.php">View Cart</a><br />
                <a href="./../shop/view.php?mode=wishlist">View Wishlist</a><br />
                                </div>
            </div>
            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                        <h2>My Shopping Cart</h2>

    <div id="cart">
        You have no items in your cart! </div><br />
                </div>
            </div>
            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                        <h2>My Wishlist</h2>
    <div id="wishlist">

        You have no items in your wishlist! </div>              </div>
            </div>
        </div>
    </div>  <div id="footer">
        &copy; 2010-2011 by <a href="http://www.xxxxxxxx.com/">xxxxxxxxxxxxxx</a><br />
        Search Powered by <a href="http://www.sphider.eu/"><img src="http://xxxxxxxxxxxxx/shop/images/sphider-logo.png" border="0" style="vertical-align: middle" alt="Sphider"></a>

    </div>
</div>
</body>
</html>

知道可能导致这种情况的原因吗?

使用Caio方法的更新代码:

<!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" lang="en" xml:lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="xxxxxxxxxxxxx" />
    <meta name="description" content="xxxxxxxxxxxxxxxx" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>xxxxxxxxxxxxx &bull; xxxxxxxxxxxxxx</title>

    <link rel="stylesheet" type="text/css" href="css/shadowbox.css" />

    <script type="text/javascript" src="js/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
        handleOversize: "drag",
        modal: true
    });

    Element.prototype.postAjax = function (params, url)
    {
        var ajaxRequest;

        try {
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        }
        catch (e) {
            // Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");
                }
                catch (e) {
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }

        ajaxRequest.open ("POST", url, true);

        ajaxRequest.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader ("Content-length", params.length);
        ajaxRequest.setRequestHeader ("Connection", "close");

        ajaxRequest.send (params);

        var _this = this;

        ajaxRequest.onreadystatechange = function () {
            if (ajaxRequest.readyState === 4) {
                if (ajaxRequest.status === 200) {
                    _this.innerHTML = ajaxRequest.responseText;
                }
                else {
                    alert ("Error, please try again.");
                }
            }
        }
    }

    window.addEventListener ("load", function ()
    {
        var wishRemove = document.getElementById('wishRemove');
        var wishId = document.getElementById('wishId');
        var cartRemove = document.getElementById('cartRemove');
        var wishAdd = document.getElementById('wishAdd');
        var wishShare = document.getElementById('wishShare');
        var reviewAdd = document.getElementById('reviewAdd');
        var id = 1341;
        var wishList = document.getElementById("wishlist");
        var cartList = document.getElementById("cart");
        var reviewContent = document.getElementById("review_content");
        var reviewList = document.getElementById("reviews_div");

        if(cartRemove != undefined)
        {
            cartRemove.addEventListener("click", function () {
                cartList.postAjax("mode=cartRemove&id=" + id, "ajax.php");
            }, false);
        }

        if(wishRemove != undefined)
        {
            wishRemove.addEventListener("click", function () {
                wishList.postAjax("mode=wishRemove&id=" + wishId, "ajax.php");
            }, false);
        }

        if(reviewAdd != undefined)
        {
            reviewAdd.addEventListener("click", function () {
                reviewList.postAjax("mode=reviewAdd&id=" + id + "&reviewContent=" + review, "ajax.php");
            }, false);
        }

        if(wishAdd != undefined)
        {
            wishAdd.addEventListener("click", function () {
                wishList.postAjax ("mode=wishAdd&id=" + id, "ajax.php");
            }, false);
        }

        if(wishShare != undefined)
        {
            wishShare.addEventListener("click", function () {
                var email_list = document.getElementById['email_list'].innerHTML;
                if(email_list == '')
                {
                    return;
                }
                else
                {
                    var urlStr = '';
                    var emails = email_list.replace(/^\s+|\s+$/g,"");
                    emails = emails.split(",");
                    var count = emails.length;
                    var i = 0;
                    while(i <= count)
                    {
                        urlStr += "&email"+i+"="+emails[i];
                    }
                    wishList.postAjax ("mode=wishShare&contacts=" + urlStr, "ajax.php");
                }
            }, false);
        }
    }, false);

    function shareWish()
    {
        window.open("./../shop/pages/share_pop.php","Share Wishlist","menubar=0,resizable=0,location=0,width=550,height=300");
    }
    </script>

</head>
<body>
<div id="maincontainer">
    <div id="topsection">
        <div class="innertube">
            <div id="header_img">
                <a style="border:none!important;" href="./../shop/index.php"><img style="border:none!important;" src="http://xxxxxxxxxxxxxxxxxxxxxx/shop/images/Wickedry.png" alt="header_img" /></a>

            </div>
            <div id="header_nav">
                <a class="nav_links" href="./../shop/index.php">Home</a>
                <a class="nav_links" href="./../shop/login.php?mode=logout&amp;sid=c02fc022a1553cc34964448194c9d20b">Logout [Chaos Creator]</a>

                                <a class="nav_links" href="./../shop/cart.php">View Cart</a>
                <a class="nav_links" href="./../shop/view.php?mode=wishlist">View Wishlist</a>
                            </div>

        </div>
    </div>  <div id="contentwrapper">
        <div id="contentcolumn">
            <div class="innertube">
                <div id="titleBar">
                    <div id="breadcrumb">
                        <a href="./../shop/view.php?mode=cat&id=19">xxxxxxxxxxx</a> &#62;&#62; <a href="./../shop/view.php?mode=subcat&id=230">xxxxxxxxxxxxxxx</a>                  </div>

                    <div id="prod_title">
                        <h1>xxxxxxxxxxxxxxxxxxxxxxxxx</h1>
                    </div>
                </div>
                <div id="prod_wrap">
                    <div id="prod_img">
                        <a class="prod_img_link" href="./images/products/large/DJ0279-02.gif" rel="shadowbox;title=xxxxxxxxxxxxxx;">
                            <img class="prod_img" src="http://xxxxxxxxx/shop/images/products/thumbs/DJ0279-02.gif" alt="xxxxxxxxxx" />

                        </a>
                    </div>
                    <div id="prod_desc">
                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                    </div>
                </div>
                <br />
                <div id="details">

                    <div id="prod_details">
                        Manufactured by: <br />
                        Model: DJ0279-02<br />
                    </div>
                    <div id="prod_price">
                        $8.18                   </div>
                    <div id="quantity">

                                                    <form method="post" action="./../shop/view.php?mode=prod&amp;add_id=1341">
                                <input type="hidden" name="id" value="1341" />
                                <input type="text" name="quantity" value="0" onfocus="this.value='';" size="3" />
                                <input class="btn" type="submit" name="submit" value="Add to Cart" />
                            </form>
                                            </div>
                    <br />
                    <br />
                                        <input type="button" class="btn" id="wishAdd" value="Add To WishList!" />

                    <br />
                    <br />
                    <strong>Add a Review:</strong><br />
                    <textarea cols="50" rows="10" id="review_content"></textarea><br />
                    <input type="submit" class="btn" id="reviewAdd" value="Add Review!" />
                    <br /><br /><div name="reviews_div"><p style="text-alignment:center;">There are no reviews for this item. Be the first to add one!</p></div>                </div>
            </div>

        </div>
    </div>  <div id="leftcolumn">
        <div class="innertube">
            <div style="border: 1px solid white;">
                <div class="innertube">
                                <div id="search">
                <h2>Search</h2>
                <table cellpadding="5" cellspacing="1" class="searchBox" width="100%">

                    <tr>
                        <td align="center">
                            <form method="get" action="http://xxxxxxx/search/">
                                <table>
                                    <tr>
                                        <td align="center">
                                            <input type="hidden" name="sp_a" value="sp10049097" />
                                            <input size="25" name="sp_q" />
                                        </td>

                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <input type="submit" value="Search" class="btn" />
                                        </td>
                                    </tr>
                                </table>
                                <input type="hidden" name="sp_p" value="all">
                                <input type="hidden" name="sp_f" value="UTF-8">

                            </form>
                            <br />
                            <a href="./../shop/search.php">Advanced Search</a>
                        </td>
                    </tr>
                </table>
            </div>              </div>
            </div>

            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                                <div id="menu">
                <h2>Categories</h2>
                ....
                <br />          </div>              </div>

            </div>
        </div>
    </div>  <div id="rightcolumn">
        <div class="innertube">
            <div style="border: 1px solid white;">
                <div class="innertube">
                                                    Welcome back, Chaos Creator!<br />
                <a href="./../shop/user.php">My Account</a><br />

                <a href="./../shop/cart.php">View Cart</a><br />
                <a href="./../shop/view.php?mode=wishlist">View Wishlist</a><br />
                                </div>
            </div>
            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                        <h2>My Shopping Cart</h2>

    <div id="cart">
        <table><tr><td>     <table>
                            <tr>
                                <td rowspan="2" align="left">
                                    <a class="cart" href="#" onclick="cartRemove(13);">X</a>
                                </td>
                                <td align="right">
                                    <a class="cart" href="./../shop/view.php?mode=prod&amp;id=3806">Wildberry Incense Coconut 100Pcs</a>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    $9.75
                                </td>
                            </tr>
                        </table>
                    </td>

                </tr></table>   </div><br />
                </div>
            </div>
            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                        <h2>My Wishlist</h2>
    <div id="wishlist">
        <table><tr><td align="center">      <a class="prod_img_link" href="./images/products/large/DJ0279-02.gif" rel="shadowbox;title=xxxxxxx;">

                                <img class="prod_img" src="http://xxxxxxxx/shop/images/products/thumbs/DJ0279-02.gif" alt="" />
                            </a><br />
                            <a class="wish" href="./../shop/view.php?mode=prod&amp;id=1341">xxxxxx</a><br />
                            $8.18<br />
                            <input type="hidden" id="wishId" value="11" />
                            <input type="button" class="btn" id="wishRemove" value="Remove" /></td></tr></table>    </div>              </div>
            </div>

            <div style="border: 1px solid white;margin-top: 10px;">
                <div class="innertube">
                                <div id="menu">
                <h2>Information</h2>
                <a href="./../shop/index.php?mode=shipping">Shipping &amp; Returns</a><br />
                <a href="./../shop/index.php?mode=conditions">Conditions</a><br />

                <a href="./../shop/index.php?mode=privacy">Privacy Notice</a><br />
                <a href="./../shop/index.php?mode=contact">Contact Us</a><br />
            </div>              </div>
            </div>
        </div>
    </div>  <div id="footer">
        &copy; 2010-2011 by <a href="http://www.xxxxx.com/">xxxxxxx.com</a><br />

    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

做了一些修改,没有错,希望这有帮助。

enter image description here

<!doctype html>

<html>
    <head>
        <script>
            Element.prototype.postAjax = function (params, url) {
                var ajaxRequest;

                try {
                    // Opera 8.0+, Firefox, Safari
                    ajaxRequest = new XMLHttpRequest();
                }
                catch (e) {
                    // Internet Explorer Browsers
                    try {
                        ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");
                        }
                        catch (e) {
                            // Something went wrong
                            alert("Your browser broke!");
                            return false;
                        }
                    }
                }

                ajaxRequest.open ("POST", url, true);

                ajaxRequest.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
                ajaxRequest.setRequestHeader ("Content-length", params.length);
                ajaxRequest.setRequestHeader ("Connection", "close");

                ajaxRequest.send (params);

                var _this = this;

                ajaxRequest.onreadystatechange = function () {
                    if (ajaxRequest.readyState === 4) {
                        if (ajaxRequest.status === 200) {
                            _this.innerHTML = ajaxRequest.responseText;
                        }
                        else {
                            alert ("Error, please try again.");
                        }
                    }
                }
            }

            window.addEventListener ("load", function () {
                var button = document.getElementsByTagName ("input")[0];
                var id = 1; // Don't know where you get it
                var wishlist = document.getElementById ("wishlist");

                button.addEventListener ("click", function () {
                    wishlist.postAjax ("mode=wishlist&id=" + id, "ajax.php");
                }, false);
            }, false);
        </script>

        <title></title>
    </head>

    <body>
        <input type = "button" value = "Click me man !" />

        <div id = "wishlist"></div>
    </body>
</html>

多次点击:

document.body.addEventListener ("click", function (event) {
    var target = event.target;

    if (target.nodeName === "INPUT") {
        if (target.getAttribute ("type") === "button") {
            // Every single button inside your document
        }
    }
}, false);

这是我现在能做的最多,其余的由你决定。