function is not defined, but is shown in page source
I've got a function that is called when a user clicks a button. Firebug keeps telling me that the function is not defined, but the code is in the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<开发者_Go百科;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 • 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&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> >> <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&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">
© 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>
Any idea what might be causing this?
UPDATED CODE using Caio's method:
<!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 • 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&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> >> <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&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&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&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 & 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">
© 2010-2011 by <a href="http://www.xxxxx.com/">xxxxxxx.com</a><br />
</div>
</div>
</body>
</html>
Made some modifications, nothing is wrong, hope this helps.
<!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>
Multiple clicks:
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);
It's the most I can do now, the rest is up to you.
加载中,请稍侯......
精彩评论