Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> My Function Says This Value Is Undefined...

This is a discussion on My Function Says This Value Is Undefined..., within the Javascript section. This forum and the thread "My Function Says This Value Is Undefined..." are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> My Function Says This Value Is Undefined..., Why doesn't this simple thing work?
cosmicbdog
post Jul 8 2008, 05:19 AM
Post #1


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Imagine on a page having a bunch of rows which refer to bookings in a db. Each of those bookings is connected to a uID. What I'm trying to do is have a dropdown in each row that ajax style updates their status...

e.g
CODE
<select name="status<? echo $rowbooked['uID']; ?>" onChange="changeStatus(<? echo $rowbooked['uID']; ?>)">
<option>-Select-</option>
<option value="booked">Booked</option>
<option value="attend">Attended</option>
<option value="pending">Pending</option>
</select>



Now I have created a JS function changeStatus() and I'm sending the uID via that, so that my php file knows what to update.

The js function is
CODE
function changeStatus(uID) {
         $j.ajax({
             type: "GET",
               url: "changeStatus.php",
               data: "uID=" + uID + "&type=" + this.value,
               success: function(html){
                 $j("#statusUpdated" + uID).append(html);
               }
         });
}


However, when I change the status, it doesn't pass through the value from the select dropdown and simply says undefined when referred to in the js function as 'this.value'.


Additionally to this underneath each dropdown I have a div
CODE
<div id="statusUpdated<? echo $rowbooked['uID']; ?>"></div>

so that the JS function knows which div to update specifically... basically so a little confirmation comes up straight underneath the dropdown that has just been altered.

I feel there is a flaw in my approach on this. I think
a) there is a way to make this work, but
b ) there could be an entirely better way to do this without having to name all these divs with custom ID's and still achieve the same outcome.

Any ideas?

This post has been edited by cosmicbdog: Jul 8 2008, 05:45 AM
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 8 2008, 07:37 AM
Post #2


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
I think your problem lies here:

CODE
<select name="status<? echo $rowbooked['uID']; ?>" onChange="changeStatus(<? echo $rowbooked['uID']; ?>)">


You haven't got quotes around the string you echo to the onchange event handler

CODE
<select name="status<? echo $rowbooked['uID']; ?>" onChange="changeStatus('<? echo $rowbooked['uID']; ?>')">


And just for purists sake, you know you can abolish inline event handlers completely with the DOM? Or more specifically and gracefully in you case using jQuery

CODE
$(document).ready(function()
{
    $('select[name=status<?php echo $rowbooked['uID']; ?>').change(function () { changeStatus('<? echo $rowbooked['uID']; ?>');});
});


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 10 2008, 03:27 AM
Post #3


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (Rakuli @ Jul 8 2008, 10:37 PM) *
And just for purists sake, you know you can abolish inline event handlers completely with the DOM? Or more specifically and gracefully in you case using jQuery

CODE
$(document).ready(function()
{
     $('select[name=status<?php echo $rowbooked['uID']; ?>').change(function () { changeStatus('<? echo $rowbooked['uID']; ?>');});
});




So are you saying that I could do this...
CODE
<script>
$(document).ready(function()
{
     $('select[name=status<?php echo $rowbooked['uID']; ?>').change(function () { changeStatus('<? echo $rowbooked['uID']; ?>');});
});
</script>


<?php

$sql = 'SELECT * FROM bookings';
$res = mysql_query($sql);

while($rowbooked = mysql_fetch_array($res)) {

echo '<select name="status ' . $rowbooked['uID'] . '"><option></option></select>';

}


And say there are a hundred select's put out on screen, the JS is going to insert itself for each row? My brain is finding it a challenge to bend to this logic!
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 10 2008, 07:22 AM
Post #4


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
No you wouldn't do it exactly like that.

Say that you give everything a uniform naming structure.

All of the selects have a class called "iAmActive" and they get the id of $rowBooked['uID']

Bang jQuery does it in one line biggrin.gif -- mine is a few lines for readability sake wink.gif

CODE
$(document).ready(function() {
    $('.iAmActive').change(function() {
       changeStatus($(this).attr('id'));
    });
});


This will potentially save your HTML from hundreds of onclick="" at the cost of giving you select boxes a class and id -- sounds logical to me smile.gif


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 10 2008, 08:50 AM
Post #5


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (Rakuli @ Jul 10 2008, 10:22 PM) *
No you wouldn't do it exactly like that.

Say that you give everything a uniform naming structure.

All of the selects have a class called "iAmActive" and they get the id of $rowBooked['uID']

Bang jQuery does it in one line biggrin.gif -- mine is a few lines for readability sake wink.gif

CODE
$(document).ready(function() {
     $('.iAmActive').change(function() {
        changeStatus($(this).attr('id'));
     });
});


This will potentially save your HTML from hundreds of onclick="" at the cost of giving you select boxes a class and id -- sounds logical to me smile.gif



AAH HA!

Yes thats what I was looking for!!! I hate the onclick man and working out how to not have it on every row was exactly what I was seeking smile.gif

attr() ... gets the attributes of the element... perfect... exactly what I was needing...

Rakuli... you put the kool in Internet. Somebody should patent you as a solution to global warming. damn.
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 11 2008, 11:18 AM
Post #6


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (cosmicbdog @ Jul 10 2008, 11:50 PM) *
AAH HA!

Yes thats what I was looking for!!! I hate the onclick man and working out how to not have it on every row was exactly what I was seeking smile.gif

attr() ... gets the attributes of the element... perfect... exactly what I was needing...

Rakuli... you put the kool in Internet. Somebody should patent you as a solution to global warming. damn.


I just implemented this Man... you are a mega kilobyte saver... considering on a page there are sometimes 2000+ rows with onClick=balha in each one its a decent saving smile.gif Rock on champ
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 cosmicbdog 241 4th July 2008 - 01:50 AM
Last post by: cosmicbdog
No New Posts   2 cosmicbdog 222 4th July 2008 - 06:08 AM
Last post by: cosmicbdog
No New Posts   2 mcdanielnc89 236 26th July 2008 - 04:47 PM
Last post by: mcdanielnc89
No New Posts   13 Monie 813 29th October 2008 - 12:31 AM
Last post by: Monie
No New Posts   5 rich97 309 5th November 2008 - 04:53 AM
Last post by: rich97