jQuery function not executing inside PHP foreach loop

Question

I'm trying to generate a number of checkboxes for a filter panel that when checked will refresh a list of products taking a specific parameter into account.

In a foreach loop, I'm successfully creating the checkboxes by gathering the filter attributes from xml data called from an API

foreach ($attrib->attributeValues->attributeValue as $attribValue)
{
$attribValue = $attribValue->name;
$attribValueID = $attribValue[@id];

$BODY .= sprintf("<input type=\"checkbox\" name=\"%s\" value=\"%s\" id=\"%s\" checked%s=\"checked\" /> %s ",
$attribClass, $attribValue, $attribValue, $attribValue, $attribValue);

Next, I'm testing a basic jQuery function with two simple alerts to insure that the functions are actually being called

$BODY .= "<script type=\"text/javascript\">";
$BODY .= "alert('Hello world!');";
$BODY .= "$(\"#".$attribValue."\").change(function() {";
$BODY .= "var $input = $(this);";
$BODY .= "alert(\"".$attribValue."\");";
$BODY .= "}).change();</script>";

When I run this on the page, the rendered html source code definitely shows that the jQuery function is being generated (multiple times, one for each checkbox created), but I'm not seeing either of the alerts - the one outside the function, or the one inside. It's my first time working with jQuery - any thoughts? Thanks as always!

Edit: Sorry, here's the generated HTML source code for two checkboxes - this continues for all the checkboxes present, which are in the double digits.

<input type="checkbox" name="Color" value="Black" id="Black" checkedBlack="checked" /> Black <script type="text/javascript">alert('Hello world!');$("#Black").change(function() {var  = $(this);alert("Black");}).change();</script>
<input type="checkbox" name="Color" value="Silver" id="Silver" checkedSilver="checked" /> Silver <script type="text/javascript">alert('Hello world!');$("#Silver").change(function() {var  = $(this);alert("Silver");}).change();</script>

Answer 1

I think you are overwriting $attribValue here: $attribValue = $attribValue->name; - you shoul dprobably use a different variable to store that value: $myAttribValue = $attribValue->name;

Answer 2

Here is my updated fix.

$BODY .= "<script type=\"text/javascript\">";
$BODY .= "$(document).ready(function(){";
$BODY .= "alert('Hello world!');";
$BODY .= "$(\"#".$attribValue."\").live('click',function() {";
$BODY .= "var \$input = $(this);";
$BODY .= "alert(\"".$attribValue."\");";
$BODY .= "}).click();});</script>";

you can see an example of this output in this Fiddle

I did have to write in the $(document).ready() as well as escape the $input in php to ensure it is not rendered as a php string. I also changed the .change() to .live('click', and .click()

the live part will ensure dynamically loaded checkboxes are seen. I just prefer the click event, you can have it set to change if you prefer.

Cheers!

Answer 3

You don't need to use jQuery to overcomplicate this here.

Use this:

function filterToggle(element){
var elementII = document.getElementById(element)
if(elementII.checked){
alert("Checked");
}
else{
alert("Unchecked");
}
}

then add an onclick="filterToggle('%s')" to your checkboxes