jQuery: Array[] doesn't play nice with $.val()
14 views
Skip to first unread message
Aaron Pelzer
Aug 10, 2010, 5:25:53 AM8/10/10
to NYIT Programmers
I had a dilemma of jQuery not recognizing .val() within an array as an
index. In short little script loads from MySQL into a Dropdown list.
Based on the selection the user makes, it would display an explanation
on the side. My problem, is that the js array doesn't read the value
from jQuery option:selected. When the elements are by themselves it
works perfectly.
When merged as desc[ sel ] or desc[ $("#criType
option:selected").val() ] it becomes undefined? If anyone could give a
reason why if you happen to know. I did find a workaround although
lengthy but you can't go wrong with if/else 11x. Thanks in advance.
<?php
// LOADS DB CONFIGURATION & SETTINGS
require_once('../bin/inc.initialize.php');
?>
<html><head>
<script type="text/javascript" src="../scripts/jquery.1.4.2.js"></
script>
<script type="text/javascript" src="../scripts/ui/
jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../scripts/ui/
jquery.ui.widget.min.js"></script>
</head><body>
<div id="cSection" style="border: solid 1px black; width: 475px;">
Type of Incident: <br />
<div id="left" style="float: left; margin-top: 2em;">
<?php
$q = 'SELECT ID, type, comment FROM crime_type ORDER BY type';
$results = $cn->query($q);
echo('<select id="criType" name="criType">');
// CREATE PHP [] FOR JAVASCRIPT
global $desc;
$desc = array();
// O INDEX SHIFT
array_push($desc, '');
while( $row = $cn->fetch($results) )
{
$ID = $row["ID"];
$name = $row["type"];
// STORES FROM DB
array_push($desc, $row["comment"]);
echo ('<option value="' . $ID . ' ">' . $name . '</option>');
}
echo ('</select>');
?>
</div>
<div id="right" style="float: right; width: 325px; font-size: 14px;">
<?php
// CREATES JS ARRAY
echo('<script>var desc = new Array();');
// JS STORES [] OF PHP
foreach($desc as $value)
{
echo('desc.push("' . $value . '");');
}
?>
</script>
</div>
</div>
<script>
// DD CHANGES, DESCRIPTION OF SELECTED INDEX
// APPEARS IN EMPTY DIV
$("#crimeType").change(function(){
var sel = $("#criType option:selected").val();
$("#criType option:selected").each( function(){
// DISPLAYS AS UNDEFINED
// WHY????
$("#right").text(desc[sel]);
});
});
</script>
</body></html>
index. In short little script loads from MySQL into a Dropdown list.
Based on the selection the user makes, it would display an explanation
on the side. My problem, is that the js array doesn't read the value
from jQuery option:selected. When the elements are by themselves it
works perfectly.
When merged as desc[ sel ] or desc[ $("#criType
option:selected").val() ] it becomes undefined? If anyone could give a
reason why if you happen to know. I did find a workaround although
lengthy but you can't go wrong with if/else 11x. Thanks in advance.
<?php
// LOADS DB CONFIGURATION & SETTINGS
require_once('../bin/inc.initialize.php');
?>
<html><head>
<script type="text/javascript" src="../scripts/jquery.1.4.2.js"></
script>
<script type="text/javascript" src="../scripts/ui/
jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../scripts/ui/
jquery.ui.widget.min.js"></script>
</head><body>
<div id="cSection" style="border: solid 1px black; width: 475px;">
Type of Incident: <br />
<div id="left" style="float: left; margin-top: 2em;">
<?php
$q = 'SELECT ID, type, comment FROM crime_type ORDER BY type';
$results = $cn->query($q);
echo('<select id="criType" name="criType">');
// CREATE PHP [] FOR JAVASCRIPT
global $desc;
$desc = array();
// O INDEX SHIFT
array_push($desc, '');
while( $row = $cn->fetch($results) )
{
$ID = $row["ID"];
$name = $row["type"];
// STORES FROM DB
array_push($desc, $row["comment"]);
echo ('<option value="' . $ID . ' ">' . $name . '</option>');
}
echo ('</select>');
?>
</div>
<div id="right" style="float: right; width: 325px; font-size: 14px;">
<?php
// CREATES JS ARRAY
echo('<script>var desc = new Array();');
// JS STORES [] OF PHP
foreach($desc as $value)
{
echo('desc.push("' . $value . '");');
}
?>
</script>
</div>
</div>
<script>
// DD CHANGES, DESCRIPTION OF SELECTED INDEX
// APPEARS IN EMPTY DIV
$("#crimeType").change(function(){
var sel = $("#criType option:selected").val();
$("#criType option:selected").each( function(){
// DISPLAYS AS UNDEFINED
// WHY????
$("#right").text(desc[sel]);
});
});
</script>
</body></html>
Ben Zajac
Aug 10, 2010, 10:01:32 AM8/10/10
to nyit-pro...@googlegroups.com
.val() works on the <select> element, not the <option> element.
var sel = $("#criType option:selected").val();
should be either:
var sel = $("#criType").val();
or
var sel = $("#criType option:selected").attr('value');
--
EG. Making a come back.
To post to this group, send email to nyit-pro...@googlegroups.com
To unsubscribe from this group, send email to
nyit-programme...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/nyit-programmers?hl=en
Ben Zajac
Aug 10, 2010, 10:03:03 AM8/10/10
to nyit-pro...@googlegroups.com
Jon also noticed: $("#crimeType").change(function(){
Should that be $("#criType").change(function(){ ?
Jonathan Kraska
Aug 10, 2010, 10:08:12 AM8/10/10
to nyit-pro...@googlegroups.com
Also, your conglomerate of php, mysql, html and javascript in a single file echo-ed out with php makes me cringe.
Aaron Pelzer
Aug 10, 2010, 2:11:03 PM8/10/10
to NYIT Programmers
I know, I know. It's bad in all it's glory This was quick and dirty,
if it's a useful feature then it will be cleaned up for your viewing
pleasure. Thanks!
On Aug 10, 10:08 am, Jonathan Kraska <jakra...@gmail.com> wrote:
> Also, your conglomerate of php, mysql, html and javascript in a single file
> echo-ed out with php makes me cringe.
>
> Jonathan Kraskawww.jkraska.com
>
>
>
> On Tue, Aug 10, 2010 at 10:03 AM, Ben Zajac <ben.za...@gmail.com> wrote:
> > Jon also noticed: $("#crimeType").change(function(){
>
> > Should that be $("#criType").change(function(){ ?
>
if it's a useful feature then it will be cleaned up for your viewing
pleasure. Thanks!
On Aug 10, 10:08 am, Jonathan Kraska <jakra...@gmail.com> wrote:
> Also, your conglomerate of php, mysql, html and javascript in a single file
> echo-ed out with php makes me cringe.
>
> Jonathan Kraskawww.jkraska.com
>
>
>
> On Tue, Aug 10, 2010 at 10:03 AM, Ben Zajac <ben.za...@gmail.com> wrote:
> > Jon also noticed: $("#crimeType").change(function(){
>
> > Should that be $("#criType").change(function(){ ?
>
> > On Tue, Aug 10, 2010 at 10:01 AM, Ben Zajac <ben.za...@gmail.com> wrote:
>
> >> .val() works on the <select> element, not the <option> element.
>
> >> var sel = $("#criType option:selected").val();
>
> >> should be either:
>
> >> var sel = $("#criType").val();
>
> >> or
>
> >> var sel = $("#criType option:selected").attr('value');
>
>
> >> .val() works on the <select> element, not the <option> element.
>
> >> var sel = $("#criType option:selected").val();
>
> >> should be either:
>
> >> var sel = $("#criType").val();
>
> >> or
>
> >> var sel = $("#criType option:selected").attr('value');
>
Reply all
Reply to author
Forward
0 new messages