Rob_Quads
Member
Registered: 29th Mar 01
Location: southampton
User status: Offline
|
I'm playing around with a home central heating system and hitting a stumbling block on jquery screwing up some of my javascript.
My page has a form which calls a function onchange="override_temp_changed('hot_water')". This function is declared in a .js file and has the following inside...
function override_temp_changed(control_group) {
$("control_group_changed").value = control_group;
$("override_type_changed").value = "temp";
console.debug("Temp change made to " + $("control_group_changed").value + " type: " + $("override_type_changed").value );
$("formoverride").submit();
}
This all works fine. When you select the drop down it logs to the javascript console such as..
--
[14:13:29.083] Temp change made to hot_water type: temp @ xxxxx/home.js:21
BUT as soon as I have jquery.js imported as a script i.e. <script src='../../jquery.js'></script> the commands inside the function are not working. Its going into the function as there is output the syslog such as
--
[14:15:37.836] Temp change made to undefined type: undefined @ xxxxx/home.js:21
Any ideas?? Annoying as once I have jquery in there all my websocket code is working a treat giving me live updates without any reloads.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
You've not used the correct syntax for the selector. jQuery uses Sizzle so you need to use CSS style syntax:
ID's should be #this-is-an-is
Classes should be .this-is-a-class
Name atributes should be input[name=my-input-name]
Tags should be thins like input or div or header
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Also that's not how you set something's value in jQuery. You use something like this:
$('input[name=my-input]').val('This is the new value');
Also, to write to the console you use console.log - I'm not sure if console.debug does anything - ignore me if it does.
[Edited on 26-07-2012 by ed]
|
Rob_Quads
Member
Registered: 29th Mar 01
Location: southampton
User status: Offline
|
Hmm on further research its to do with the way jquery handles $. In query this means something different to normal javascript so while the original code was fine as soon as you import jquery its then interpreted differently.
The working code is
function override_temp_changed(control_group) {
document.getElementById("control_group_changed").value = control_group;
document.getElementById("override_type_changed").value = "temp";
document.getElementById("formoverride").submit();
}
Thanks for the help....its slowly getting there. Now to get the wireless relays working 
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Huh? $ is the name of the jQuery object, it doesn't do things using standard JavaScript methods and objects because it's not meant to. It's a library with its own syntax that must be used.
|
Rob_Quads
Member
Registered: 29th Mar 01
Location: southampton
User status: Offline
|
It must have been doing something as with the old code it was working.
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
As mentioned, the undefined error is due to your malformed JQ ie: no proper selectors, wrong use of setting object/element values.
The dollar sign is purely an alias of 'jQuery.'. However you can have conflicts when using multiple libraries (Prototype etc) using the dollar sign hence why you should use 'noconflict' function.
As said though, rewrite the JQ to conform to the syntax and you should be ok.
|
