[SOLVED] Getting elements with similar id's

[KevinM1]

I have a PHP script that displays advertiser info to the site administrator.  This info is displayed within a table.  One of the table's cells has two links - one to bring the site administrator to the script that displays that advertiser's transactions, another to delete that advertiser and all of their info.  The second link is where my problem lies.

 

I'd like a confirmation box to appear, asking the site administrator if they really, really want to delete all that info.  The crux of the problem is that multiple advertisers (and multiple tables) can appear on each page.  My basic setup is this:

 

PHP:

<?php
$count = 0;
$linkCount = 1;

while($rs_query && ($count < $dispOptions)){
$numBannersQuery = "SELECT COUNT(*) FROM sbclassified_ads WHERE adv_id = '{$rs_query['id']}'";
$numBannersResult = mysql_fetch_array(mysql_query($numBannersQuery));
$numBanners = $numBannersResult[0];

$numPaidQuery = "SELECT COUNT(*) FROM sbclassified_ads WHERE paid = 'yes' AND adv_id = '{$rs_query['id']}'";
$numPaidResult = mysql_fetch_array(mysql_query($numPaidQuery));
$numPaid = $numPaidResult[0];

$numNotPaidQuery = "SELECT COUNT(*) FROM sbclassified_ads WHERE paid = 'no' AND adv_id = '{$rs_query['id']}'";
$numNotPaidResult = mysql_fetch_array(mysql_query($numNotPaidQuery));
$numNotPaid = $numNotPaidResult[0];

$numApprovedQuery = "SELECT COUNT(*) FROM sbclassified_ads WHERE approved = 'yes' AND adv_id = '{$rs_query['id']}'";
$numApprovedResult = mysql_fetch_array(mysql_query($numApprovedQuery));
$numApproved = $numApprovedResult[0];

$numNotApprovedQuery = "SELECT COUNT(*) FROM sbclassified_ads WHERE approved = 'no' AND adv_id = '{$rs_query['id']}'";
$numNotApprovedResult = mysql_fetch_array(mysql_query($numNotApprovedQuery));
$numNotApproved = $numNotApprovedResult[0];

$balanceQuery = "SELECT SUM(amount) FROM sbclassified_adv_transactions WHERE adv_id = '{$rs_query['id']}' GROUP BY adv_id";
$balanceResult = mysql_fetch_array(mysql_query($balanceQuery));

if($balanceResult){
	$balance = $cur['cur_name'].$balanceResult[0];
}
else{
	$balance = $cur['cur_name'] . "0.00";
}

echo <<<EOT
<table cellspacing ="0" cellpadding="5">
	<tr>
		<th>ID:</th><td>{$rs_query['id']}</td>
	</tr>
	<tr>
		<th>User Name:</th><td>{$rs_query['uname']}</td>
	</tr>
	<tr>
		<th>E-mail:</th><td><a href="email.php?id={$rs_query['email']}">{$rs_query['email']}</a></td>
	</tr>
	<tr>
		<th>Total Number of Banners:</th><td>$numBanners</td>
	</tr>
	<tr>
		<th>Number of Paid Banners:</th><td>$numPaid</td>
	</tr>
	<tr>
		<th>Number of Unpaid Banners:</th><td>$numNotPaid</td>
	</tr>
	<tr>
		<th>Number of Approved Banners:</th><td>$numApproved</td>
	</tr>
	<tr>
		<th>Number of Unapproved Banners:</th><td>$numNotApproved</td>
	</tr>
	<tr>
		<th>Total Balance:</th><td>$balance</td>
	</tr>
	<tr>
        	<th>Options:</th><td><a href="view_adv_transactions.php?advId={$rs_query['id']}&pg=$pg">View Transactions</a> | <a id="deleteAdv$linkCount" href="deleteadvertiser.php?advId={$rs_query['id']}&pg=$pg">Delete Advertiser</a></td>
	</tr>
</table>
EOT;

$count++;
$linkCount++;
$jmpcnt++;
$rs_query = mysql_fetch_array($query);
}
?>

 

JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);



function init(){

         if (!W3CDOM) return;

 var deleteLink = document.getElementById('deleteAdv');
 deleteLink.onclick = handleClick;


}

function handleClick(evt){
 evt = (evt) ? evt : ((event) ? event : null);

 if(evt){
 	  return confirm('This advertiser and all of their information will be deleted.  Continue?');
 }
}






window.onload = init;

 

Obviously, the current code won't work as I'm attempting to get an element with an id of 'deleteAdv' when all of the elements I want to handle have id's like 'deleteAdv1.'  Is there a relatively easy way to grab a hold of all of the 'deleteAdvx' elements that my PHP script generates?

 

Thanks.

[emehrkay]

my advice would be to give them the same class name and simply use this function

 

http://www.netlobo.com/javascript_getelementsbyclassname.html

 

[KevinM1]

my advice would be to give them the same class name and simply use this function

 

http://www.netlobo.com/javascript_getelementsbyclassname.html

 

 

Oooh, thanks.  I didn't know there was a built-in function like that.

[KevinM1]

my advice would be to give them the same class name and simply use this function

 

http://www.netlobo.com/javascript_getelementsbyclassname.html

 

 

Might help if I read through the link.

 

Unfortunately, my attempt isn't working.  Specifically, no confirmation box is popping up when I click on the links.  I'm not getting any JavaScript errors, so my problem appears to be logical in nature.  Here's what I have so far (please ignore the form validation bits -- that part actually works! -- and apologies for the weird spacing gedit put into my code):

var W3CDOM = (document.createElement && document.getElementsByTagName);



function init(){

if (!W3CDOM) return;

document.getElementsByClassName = function(clsName){
	var retVal = new Array();
	var elements = document.getElementsByTagName("*");

	for(var i = 0; i < elements.length; i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");

			for(var j = 0; j < classes.length; j++){
				if(classes[j] == clsName){
					retVal.push(elements[i]);
   	         }
			}
		}
		else if(elements[i].className == clsName){
			retVal.push(elements[i]);
		}
	}

return retVal;
}


var inputform = document.getElementById('advertiserSearch');
var deleteLink = document.getElementsByClassName('deleteAdv');
deleteLink.onclick = handleClick;

inputform.onsubmit = validate;

}

function handleClick(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
	var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

	if(elem){
		return confirm('This advertiser and all of their information will be deleted.  Continue?');
	}
}
}



function validate(evt){

evt = (evt) ? evt : ((event) ? event : null);



if(evt){

	var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

        

	if(elem){

		var notNum, keywordNotEmpty;

		var radios = document.getElementById('radios');



		keywordNotEmpty = isNotEmpty(elem.elements['keyword']);

		notNum = isNotNumber(elem.elements['keyword'], radios);



		if(keywordNotEmpty && !notNum){

			return true;

		} 

		else{

			return false;

		}     

	}

}

}



function isNotEmpty(argKeyword){

var str = argKeyword.value;

var re = /.+/;

    

if(!str.match(re)){

	alert('Please enter a value for the Keyword field!');

	return false;

}

else{

	return true;

}

}



function isNotNumber(argKeyword, argRadio){

var inputs = argRadio.getElementsByTagName('input');

    

for(var i = 0; i < inputs.length; i++){

	if(inputs[i].checked){

		var value = inputs[i].value;

	}

}

    

if(isNaN(argKeyword.value) && (value == 2)){

	alert('Please enter a valid numeric value for the product #');

	argKeyword.select();

	argKeyword.focus();

	return true;

}

else{

	return false;

}

}



window.onload = init;

 

I'm thinking that it wants me to loop through the array of links, but I don't see why it's necessary, since I just need to know that one of the links has been clicked.  I don't actually need to do anything with the links when the event fires.

[emehrkay]

well that function returns an array of elements with the same classname. you could access them by doing array[index] but if the length is unknown, youll miss a few.

 

look in this thread at how i loop through an array and attach events to each element in the iteration

 

http://www.phpfreaks.com/forums/index.php/topic,161095.0.html

[KevinM1]

well that function returns an array of elements with the same classname. you could access them by doing array[index] but if the length is unknown, youll miss a few.

 

look in this thread at how i loop through an array and attach events to each element in the iteration

 

http://www.phpfreaks.com/forums/index.php/topic,161095.0.html

 

Awesome, worked like a charm!  I keep forgetting that you have to attach events to elements one at a time.  For some reason I always think that attaching them to an array of elements will suffice.  D'oh!

 

Thanks!

[emehrkay]

well that function returns an array of elements with the same classname. you could access them by doing array[index] but if the length is unknown, youll miss a few.

 

look in this thread at how i loop through an array and attach events to each element in the iteration

 

http://www.phpfreaks.com/forums/index.php/topic,161095.0.html

 

Awesome, worked like a charm!  I keep forgetting that you have to attach events to elements one at a time.  For some reason I always think that attaching them to an array of elements will suffice.  D'oh!

 

Thanks!

 

with mootools, and other javascript libraries, you can do exactly that.

 

//mootools

$$('.class_name').addEvent('click',function(){

//do something

});

 

all of the elements with the className class_name now have a click event attached to them