[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'); }