[jQuery] Cascade plugin help
I am new to jquery and I need to make a form that allows a user to
select a state and a city that they go to school in. I am using the
cascade juqery plug-in (http://plugins.jquery.com/project/cascade.
Which I think is a great plugin) The problem is there is a lot of data
and it takes a long time for it all to load (some 28,000 records).
What I want to do is split it up into different files and then load
only the file that contains the data for that start/region. A sample
of my code is blow:
My html:
div class=container-1
label for=rsvp_stateState/label
select id=rsvp_state
option value=Pick a State/option
option value=OROregon/option
option value=WAWashington/option
option value=CACalifornia/option
/select
/div
div class=container-2
label for=rsvp_cityPick a City/label
select id=rsvp_city
/select
/div
//below are the different loads that contain different data based on
the state
var OR = {
ajax: {url: ‘orData.js' },
template: commonTemplate,
match: commonMatch
};
var WA = {
ajax: {url: ‘waData.js' },
template: commonTemplate,
match: commonMatch
};
var opts = {
ajax: {url: ‘otherData.js' },
template: commonTemplate,
match: commonMatch
};
$(document).ready(function() {
var currentState;
// #rsvp_state refers to a dropdown menu that contains all the states
//what I want to do with this is determine what state is currently //
selected and store that in a variable
$('#rsvp_state').change(function(){currentState
= $
('#rsvp_state').val();});
jQuery(.container-2 select).each(function() {
var child = jQuery(this);
child.parents(.container-2:first).siblings(.container-1).find
(select).each(function() {
//below I want to compare the verable to the different options I have
above
if(currentState == 'OR'){
child.cascade(jQuery(this),OR);
}
if(currentState == 'WA'){
child.cascade(jQuery(this),WA);
}
else{
child.cascade(jQuery(this),opts);
}
});
});
//below is a sample line from orData.js
{'When':'Portland','Value':'123','Text':'Benson Highschool'}]
Any help is greatly appreciated.
-Chris
[jQuery] Re: Cascade plugin help
I forgot to say what my issue is. It dose load anything if I remove
the if statments it works fine.
On Apr 17, 11:50 am, Chrisw chris.p.wel...@gmail.com wrote:
I am new to jquery and I need to make a form that allows a user to
select a state and a city that they go to school in. I am using
thecascadejuqery plug-in (http://plugins.jquery.com/project/cascade.
Which I think is a greatplugin) The problem is there is a lot of data
and it takes a long time for it all to load (some 28,000 records).
What I want to do is split it up into different files and then load
only the file that contains the data for that start/region. A sample
of my code is blow:
My html:
div class=container-1
label for=rsvp_stateState/label
select id=rsvp_state
option value=Pick a State/option
option value=OROregon/option
option value=WAWashington/option
option value=CACalifornia/option
/select
/div
div class=container-2
label for=rsvp_cityPick a City/label
select id=rsvp_city
/select
/div
//below are the different loads that contain different data based on
the state
var OR = {
ajax: {url: ‘orData.js' },
template: commonTemplate,
match: commonMatch
};
var WA = {
ajax: {url: ‘waData.js' },
template: commonTemplate,
match: commonMatch
};
var opts = {
ajax: {url: ‘otherData.js' },
template: commonTemplate,
match: commonMatch
};
$(document).ready(function() {
var currentState;
// #rsvp_state refers to a dropdown menu that contains all the states
//what I want to do with this is determine what state is currently //
selected and store that in a variable
$('#rsvp_state').change(function(){currentState = $
('#rsvp_state').val();});
jQuery(.container-2 select).each(function()
{
var child = jQuery(this);
child.parents(.container-2:first).siblings(.container-1).find
(select).each(function() {
//below I want to compare the verable to the different options I have
above
if(currentState == 'OR'){
child.cascade(jQuery(this),OR);
}
if(currentState == 'WA'){
child.cascade(jQuery(this),WA);
}
else{
child.cascade(jQuery(this),opts);
}
});
});
//below is a sample line from orData.js
{'When':'Portland','Value':'123','Text':'Benson Highschool'}]
Any help is greatly appreciated.
-Chris
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
Thank you very much to everyone I got the bug fixed and got to learn
about some new tools for debugging in IE. Could not have done without
everyone!
-cw
On Jan 20, 10:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
thanks for your input I will give this a try.
p.s sorry for my late response I was out of town.
On Jan 16, 8:33 am, ryan.joyce...@googlemail.com
ryan.joyce...@googlemail.com wrote:
I know... no Firebug in IE. Poo.
maybe give firebug lite a go. it's a firebug library you can embed
into a page and view through any browser you like.
http://getfirebug.com/lite.html
it's always useful for trying to hack out random IE bugs.
On Jan 15, 5:00 am, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over anarea(based on the
iamges ID and thearea'sclass)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
thanks for your input I will give this a try.
p.s sorry for my late response I was out of town.
On Jan 16, 8:33 am, ryan.joyce...@googlemail.com
ryan.joyce...@googlemail.com wrote:
I know... no Firebug in IE. Poo.
maybe give firebug lite a go. it's a firebug library you can embed
into a page and view through any browser you like.
http://getfirebug.com/lite.html
it's always useful for trying to hack out random IE bugs.
On Jan 15, 5:00 am, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over anarea(based on the
iamges ID and thearea'sclass)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
Really?! were you hovering over one of the states or the images below
the map? I already know it works if you hover over the images below
but my problem is what the states adding a border to an image below.
Also Oregon and Washington may already be working but other states are
not working.
Thanks to all for helping.
On Jan 15, 1:43 am, jQuery Lover ilovejqu...@gmail.com wrote:
Did you solve the problem?
My FF and IE show the same border and act the same way (except FF has
fade in/out effect).
I'm using IE7.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Thu, Jan 15, 2009 at 10:44 AM, Chrisw chris.p.wel...@gmail.com wrote:
Let me try to clear this up in FF when you hover over a state (an
area element) one (or more) of the images below should get a border
around them, however, in IE nothing happens.. and I put an alert box
in to see if anything was going on when you hover a state but in IE
the alert box never showed, and in FF the alert did show up.
-c
On Jan 14, 9:36 pm, Chrisw chris.p.wel...@gmail.com wrote:
Sorry about all the alert boxes they should be gone now, also thank
you for the shorter code I was going to make the code shorter once I
got this error worked out and you just saved me sometime ;) ... but I
still have the same issue I cannot get $(area).hover(or mouseover)
to work in IE.
On Jan 14, 9:00 pm, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over anarea(based on the
iamges ID and thearea'sclass)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
On my computer I am still having issues can anyone else confirm if
they are having the issue as well?
On Jan 15, 1:44 pm, Chrisw chris.p.wel...@gmail.com wrote:
Really?! were you hovering over one of the states or the images below
the map? I already know it works if you hover over the images below
but my problem is what the states adding a border to an image below.
Also Oregon and Washington may already be working but other states are
not working.
Thanks to all for helping.
On Jan 15, 1:43 am, jQuery Lover ilovejqu...@gmail.com wrote:
Did you solve the problem?
My FF and IE show the same border and act the same way (except FF has
fade in/out effect).
I'm using IE7.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Thu, Jan 15, 2009 at 10:44 AM, Chrisw chris.p.wel...@gmail.com wrote:
Let me try to clear this up in FF when you hover over a state (an
area element) one (or more) of the images below should get a border
around them, however, in IE nothing happens.. and I put an alert box
in to see if anything was going on when you hover a state but in IE
the alert box never showed, and in FF the alert did show up.
-c
On Jan 14, 9:36 pm, Chrisw chris.p.wel...@gmail.com wrote:
Sorry about all the alert boxes they should be gone now, also thank
you for the shorter code I was going to make the code shorter once I
got this error worked out and you just saved me sometime ;) ... but I
still have the same issue I cannot get $(area).hover(or mouseover)
to work in IE.
On Jan 14, 9:00 pm, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i
am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over anarea(based on the
iamges ID and thearea'sclass)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] $(area) not working in IE (sorry if this is a repost)
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over an area (based on the
iamges ID and the area's class)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:
http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] $(area) not selecting in IE
I am using an image map and some jquery to highlight (by applying a
border) an image outside of the image map. I am using the code below:
$(area).hover(function(){
var stateClass;
stateClass =
$(this).attr(class);
var stateClassQuery;
alert(stateClass);//for testing
stateClassQuery =
#+stateClass;
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass =
$(this).attr(class);
var stateClassQuery;
stateClassQuery =
#+stateClass;
$(stateClassQuery).removeClass('selected');
}
);
It works in FF and Safire however, it will not work in IE. For some
reason IE dose not seem to be selecting any of the “area” elements.
-chris
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
Sorry about all the alert boxes they should be gone now, also thank
you for the shorter code I was going to make the code shorter once I
got this error worked out and you just saved me sometime ;) ... but I
still have the same issue I cannot get $(area).hover(or mouseover)
to work in IE.
On Jan 14, 9:00 pm, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over an area (based on the
iamges ID and the area's class)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
[jQuery] Re: $(area) not working in IE (sorry if this is a repost)
Let me try to clear this up in FF when you hover over a state (an
area element) one (or more) of the images below should get a border
around them, however, in IE nothing happens.. and I put an alert box
in to see if anything was going on when you hover a state but in IE
the alert box never showed, and in FF the alert did show up.
-c
On Jan 14, 9:36 pm, Chrisw chris.p.wel...@gmail.com wrote:
Sorry about all the alert boxes they should be gone now, also thank
you for the shorter code I was going to make the code shorter once I
got this error worked out and you just saved me sometime ;) ... but I
still have the same issue I cannot get $(area).hover(or mouseover)
to work in IE.
On Jan 14, 9:00 pm, James Van Dyke jame...@gmail.com wrote:
Ok... that's a hard page to get away from with all those alert boxes.
I know... no Firebug in IE. Poo.
I believe that class is not what IE calls that attribute. For
instance, element.class will return nothing. element.className is the
correct property. Try that.
Plus, you could shorten your code and make it a bit more readable:
$(area).mouseover( function(){
$(# . $(this).attr(class)).addClass('selected');}.mouseout(
function() {
$(# . $(this).attr(class)).removeClass('selected');
};
Let me know how that works out.
On Jan 14, 6:30 pm, Chrisw chris.p.wel...@gmail.com wrote:
sorry if this is a repost but I didn't see it in the group and I
didn't get a copy in my email. I am working with an image map and i am
using the maphilight plugin and I want to add a border to an image
below the image map when a user hovers over an area (based on the
iamges ID and the area's class)(see code below) I got it to work in FF
but I cannot get it to work in IE. Any help?
URL:http://oregonstate.edu/admissions/firstyear/recruitmap/map/
Code:
$(area).hover(function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
alert(stateClassQuery);//for testing
$(stateClassQuery).addClass('selected');
//mouse out
},
function(){
var stateClass;
stateClass = $(this).attr(class);
var stateClassQuery;
stateClassQuery = #+stateClass;
$(stateClassQuery).removeClass('selected');
}
