Page 1 of 2

Javascript functions and php foreach values

Posted: Tue May 08, 2012 7:43 am
by Pavilion
Hello folks:

I've got an html table populated by a php foreach routine. One field in this table is an Input type=checkbox. The goal is to run a javascript function when the user checks the checkbox. But, since the checkbox is in a table populated by a foreach routine, I'm having some problems. Below is the applicable code for my table:

Code: Select all

<?php
foreach($results as $row)
{
	$bk_owner = $row['BookOwner'];
	$addrss_owner = $row['AddressOwner'];
	$f_name = $row['FName'];
	$l_name = $row['LName'];
	$email = $row['EmailAddress'];
	$d_phone = $row['DeskPhone'];
	$ext = $row['Ext'];
	$cell = $row['CellPhone'];
	$title = $row['Title'];

	echo "<tr>";
		echo "<td class='a'>".$l_name ."</td>";
		echo "<td class ='a'>".$f_name ."</td>";
		echo "<td class ='c'>".$email ."</td>";
		echo "<td class ='a'>".$d_phone ."</td>";
		echo "<td class='b'>".$ext."</td>";
		echo "<td class='a'>".$cell."</td>";
		echo "<td class='c'>".$title."</td>";
		echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>";
	echo "</tr>";
}
echo"</tbody>";
?>
Specifically, note this line:

Code: Select all

echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>";
the value is set to $address_owner. This value is a primary key value and will allow me to run routines related to the record chosen when the checkbox is checked.

Following is the javascript code for selectFunction():

Code: Select all

function selectFunction(){
var check = document.getElementById("chk_Bx").checked;
var val = document.getElementById("chk_Bx").value;
alert(val);
}
At this point the javascript is very simple. All I'm trying to do is pick up applicable values for the record selected. But - I believe because the table is populated through a foreach loop, the javascript alert is returning the same primary key value for every record checked (or unchecked).

Also, if I alert out check, it continually returns false, even if I've checked the box and it should read true. I am assuming this is also related to the foreach table presentation.

How do I grab ONLY the primary key value, or checked true/false for the applicable record?

Thanks in advance:

Pavilion

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 7:57 am
by Celauran
IDs are meant to be unique, hence why it's always grabbing the same value. You'd do better to assign the table an ID, then have a change() listener for its checkboxes and use $(this).val()

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 8:28 am
by Pavilion
Thanks for jumping in here Celauran. I appreciate your advice. As of right now, the changes I made are as follows:
  1. Table id is set to: id='address_bk'
  2. Call to the selectFunction has been removed from the checkbox input element. Current syntax is as follows:

    Code: Select all

    echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. "></input></td>";
  3. A new javascript listener has been added. Following is the script:

    Code: Select all

    	$('#address_bk').change(function() {
    		var check = $(this).checked;
    		var val = $(this).val();
    		alert(val);
    	});
Right now - no alert is triggered when I check the applicable checkbox. My assumption is that there is something off with my listener syntax, but am completely clueless as to what I should be fixing. :?

Celauran - thank you again. Sometimes my questions must seem quite elementary to you. But trying to wrap my head around php, javascript, html and CSS after 20 years of classical programming is (at times) overwhelming. There is so much to learn and my brain is so trained to think the way I've been programming for 2 decades.

Pavilion

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 8:53 am
by Celauran
Try

Code: Select all

$('#address_bk input:checkbox').change(function() {
    // do stuff here
});
Also, I noticed you still have id='chk_Bx' everywhere. This can lead to problems.

Finally, inputs are 'self-closing', so <input /> rather than <input></input>

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 9:18 am
by Pavilion
OK ... I'm getting nothing with my listener. Following is the applicable code:

Full table code:

Code: Select all

<table id='address_bk' name='addressbk' border='0'>
<caption>EMAIL ADDRESS BOOK</caption>
<thead>
<tr>
<th class='a' scope="col">Last Name</th>
<th class='a' scope="col">First Name</th>
<th class='c' scope='col'>Email</th>
<th class='a' scope="col">Desk Phone</th>
<th class='b' scope='col'>Ext</th>
<th class='a' scope="col">Cell Phone</th>
<th class='c' scope="col">Title</th>
</tr>
</thead>
<tfoot>

</tfoot>
<tbody>

<?php
foreach($results as $row)
{
	$bk_owner = $row['BookOwner'];
	$addrss_owner = $row['AddressOwner'];
	$f_name = $row['FName'];
	$l_name = $row['LName'];
	$email = $row['EmailAddress'];
	$d_phone = $row['DeskPhone'];
	$ext = $row['Ext'];
	$cell = $row['CellPhone'];
	$title = $row['Title'];

	echo "<tr>";
		echo "<td class='a'>".$l_name ."</td>";
		echo "<td class ='a'>".$f_name ."</td>";
		echo "<td class ='c'>".$email ."</td>";
		echo "<td class ='a'>".$d_phone ."</td>";
		echo "<td class='b'>".$ext."</td>";
		echo "<td class='a'>".$cell."</td>";
		echo "<td class='c'>".$title."</td>";
		echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. "></input></td>";
	echo "</tr>";
}
echo"</tbody>";
?>
</table>
Following is the javascript:

Code: Select all

$(document).ready(function() {
	$('#address_bk input:checkbox').change(function() {
		alert("you checked the checkbox");
	});
});
:banghead: It shouldn't be so hard to create a simple javascript routine (sigh).

Thanks for your patience Celauran:

Pavilion

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 9:31 am
by Celauran
I see no obvious reason this shouldn't work. Anything in your error console?

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 10:05 am
by Pavilion
Celauran wrote:I see no obvious reason this shouldn't work. Anything in your error console?
OK - after using CTRL+SHIFT+J the following block is shown.
Timestamp: 05/08/2012 10:02:23 AM
Error: WT_LOG_WT971163 is not a function
Source File: chrome://pdfforge/content/widgilisteners.js
Line: 207
In thewidgilisteners.js file this is the line that is highlighted.
catch(err)
{
WT_LOG_WT971163("WT_WebProgressListener_WT971163.observe - " + err);
}
Not sure what any of it means, but it may help you.

Thanks Celauran. I've got to spend some time on client projects right now, but I'll check back in later.

Pavilion

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 1:23 pm
by Pavilion
Celauran wrote:I see no obvious reason this shouldn't work. Anything in your error console?
Celauran - I figured out what the problem is.

On a hunch I linked my addressbk.php file to jquery-1.7.1.js and the listener worked. Until this moment I had absolutely no idea that what you call a "listener" is dependent on jquery files. I thought I could just construct them the way on constructs an internal javascript function.

Now I know, lesson learned.... sigh...

Thanks for helping me through this. Someday all these different languages and codes and scripts (and the way they work together) is actually going to make logical sense to me. Right now, it seems as though the languages for programming on-line have been hobbled together with minimum standardization across environments. .... (sigh).

Anyway - thank you so much. I'm sure I'll be back with more questions as I build the routines within this listener.

Pavilion

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 1:36 pm
by Celauran
Pavilion wrote:Right now, it seems as though the languages for programming on-line have been hobbled together with minimum standardization across environments.
Yeah, that's about right.

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 2:01 pm
by Pavilion

Code: Select all

Pavilion wrote:Right now, it seems as though the languages for programming on-line have been hobbled together with minimum standardization across environments.
Yeah, that's about right.
:lol: :lol: :lol:

Speaking of minimum standardization across environments - please note the following :D

Code: Select all

var check = $(this).checked;
DOES NOT work within a jQuery function ... sigh...

Code: Select all

var check = $(this).is(':checked');
DOES work within a jQuery function and is the proper syntax... :D

Just found that out about 2 seconds ago...

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 2:16 pm
by Celauran
You can also use .prop('checked')

Re: Javascript functions and php foreach values

Posted: Tue May 08, 2012 9:35 pm
by Pavilion
Well - it didn't take long for the questions to arise.

OK - the listener is working and executing an if statement. Now for the next step. My goal is to create an array of values and pass the array to the jQuery listener function for processing. Following is the syntax for my input element:

Code: Select all

echo "<td class='b'><input type='checkbox' id='chk_Bx' name='check' value=".array($addrss_owner, $l_name, $f_name)."></input></td>";
And here is the syntax for the listener (as it is currently written):

$(document).ready(function() {
$('#address_bk input:checkbox').change(function() {
var check = $(this).is(':checked');
var var_array = $(this).val();
alert(var_array);
if (check == true)
{
alert("check = true");
}
});
});

Now here is my problem.
  1. With the current syntax alert(var_array); returns Array
  2. With the syntax as follows: alert($.isArray(var_array));, then false is returned.
  3. After defining var_array as follows: var var_array = $(this).unwrap(); the return is [object Object]
So... am I constructing the array properly within the php foreach assembled table properly?

Or am I doing something wrong within the jQuery function?


Celauran - thanks so much for your help, it really is appreciated.

Pavilion

_________

I tried something new. My foreach block is now as follows:

Code: Select all

<?php
foreach($results as $row)
{
	$bk_owner = $row['BookOwner'];
	$addrss_owner = $row['AddressOwner'];
	$f_name = $row['FName'];
	$l_name = isset($row['LName']) ? trim($row['LName']) : '';
	$email = $row['EmailAddress'];
	$d_phone = $row['DeskPhone'];
	$ext = $row['Ext'];
	$cell = $row['CellPhone'];
	$title = $row['Title'];
	$pass_array = array($addrss_owner, $f_name, $l_name, $email);

	echo "<tr>";
		echo "<td class='a'>".$l_name."</td>";
		echo "<td class ='a'>".$f_name ."</td>";
		echo "<td class ='c'>".$email ."</td>";
		echo "<td class ='a'>".$d_phone ."</td>";
		echo "<td class='b'>".$ext."</td>";
		echo "<td class='a'>".$cell."</td>";
		echo "<td class='c'>".$title."</td>";
		echo "<td class='b'><input type='checkbox' id='chk_Bx' name='check' value=". $row ."></input></td>";
	echo "</tr>";
}
echo"</tbody>";
?>
Now instead of trying to construct the array inline, I just fed it $row. And it makes no difference. $row is an array - so why is jQuery returning false for this alert?

Code: Select all

alert($.isArray(var_array));
:?

Re: Javascript functions and php foreach values

Posted: Wed May 09, 2012 10:54 am
by Pavilion
As the jQuery function evolves.

Well, in my research I discovered what I thought was an answer. But it only partially solving the problem. As of now my php foreach block looks like this:

Code: Select all

<?php
foreach($results as $row)
{
	$bk_owner = $row['BookOwner'];
	$addrss_owner = $row['AddressOwner'];
	$f_name = $row['FName'];
	$l_name = isset($row['LName']) ? trim($row['LName']) : '';
	$email = $row['EmailAddress'];
	$d_phone = $row['DeskPhone'];
	$ext = $row['Ext'];
	$cell = $row['CellPhone'];
	$title = $row['Title'];
	$pass_array = array($addrss_owner, $f_name, $l_name, $email);

	echo "<tr>";
		/* echo "<td class='a'>".$l_name."</td>";
		echo "<td class ='a'>".$f_name ."</td>";
		echo "<td class ='c'>".$email ."</td>";
		echo "<td class ='a'>".$d_phone ."</td>";
		echo "<td class='b'>".$ext."</td>";
		echo "<td class='a'>".$cell."</td>";
		echo "<td class='c'>".$title."</td>";  Commented out all above table cells because I want to see what I am passing to the jQuery function. */ 
		echo "<td class='b'><input type='checkbox' id='chk_Bx' name='check' value=". json_encode($row) ."></input></td>"; /* This <td> passes the whole $row array to JQuery as json_encode($row) */
		echo "<td class='c'>". json_encode($row)."</td>"; /* this <td> allows me to actually view the json_encode($row) */
	echo "</tr>";
}
echo"</tbody>";
?>
My jQuery listener is structured as follows:

Code: Select all

$(document).ready(function() {
	$('#address_bk input:checkbox').change(function() {
		var check = $(this).is(':checked');
		catch_array = jQuery.trim($(this).val());
			document.getElementById("demo").innerHTML=catch_array;

	});
});
At this point:

]The json_encode($row) is displaying data as follows:
{"BookOwner":"2","0":"2","AddressOwner":"1301","1":"1301","LName":"Jones","2":"Jones","FName":"Doug","3":"Doug","DeskPhone":"(999) 238-4601","4":"(999) 238-4601","Ext":"116","5":"116","CellPhone":"(999) 238-8276","6":"(999) 238-8276","EmailAddress":"dougl@yahoo.org","7":"dougl@yahoo.org","Title":"","8":""}
The jQuery function document.getElementById("demo").innerHTML=catch_array; line is displaying the array as follows:
{"BookOwner":"2","0":"2","AddressOwner":"1301","1":"1301","LName":"Jones","2":"Jones","FName":"Doug","3":"Doug","DeskPhone":"(999)
For whatever reason catch_array = jQuery.trim($(this).val()); is dropping data in a row, when it hits a space.

Does anyone have any idea on how to catch the WHOLE encoded array and parse it?

Thanks in advance - Pavilion

Re: Javascript functions and php foreach values

Posted: Wed May 09, 2012 8:36 pm
by Pavilion
The solution has been found. Just posting it here in case anyone else comes along with the same problem.

To pass the whole encoded array, all I needed to to do was enclose the json_encode($row) with single quotes. The single quotes have to be inside the double-quotes. An example follows:

Code: Select all

echo "<td class='b'><input type='checkbox' id='chk_Bx' name='check' value='". json_encode($row) ."'></input></td>";
To parse (and extract data from) the json_encode array after it arrives in the jQuery function proper syntax is as follows:

Code: Select all

$(document).ready(function() {
	$('#address_bk input:checkbox').change(function() {
		var check = $(this).is(':checked');
		catch_array = jQuery.trim($(this).val());
			var data_row = $.parseJSON(catch_array);
		if (check == true)
		{
			$("#f_name").val(data_row.FName);
			$("#l_name").val(data_row.LName); 
			$("#e_mail").val(data_row.EmailAddress);
			$("#d_phone").val(data_row.DeskPhone);		

	});
});
Feels good to solve this piece of the puzzle. Now onto others.

Pavilion

Re: Javascript functions and php foreach values

Posted: Mon May 14, 2012 12:14 pm
by Pavilion
Celauran wrote:Try

Code: Select all

$('#address_bk input:checkbox').change(function() {
    // do stuff here
});
Also, I noticed you still have id='chk_Bx' everywhere. This can lead to problems.

Finally, inputs are 'self-closing', so <input /> rather than <input></input>
OK - I've another question about constructing listeners.

In the example above your syntax: $('#address_bk input:checkbox').change(function() references the type of input, rather than the name of the input or the the ID of the input. This can cause problems if you're using (for example) multiple checkboxes (for different purposes). Is it possible to construct a listener and reference an input ID or input name?

Thanks in advance - Pavilion