[lindsaygelle]

Hey guys. I'm in a bit of a situation,

I'm trying to use a selector to load new content without reloading my entire web page.
While my current code works in reloading the information on a single div class, it doesn't work when I try and do it for multiple.

Below is the code that works for updating only one div class

$(function() {     

    $('#Optionselector').change(function(){ 
        $('.Option').hide(); 
        $('#' + $(this).val()).show(); 
    }); 

}); 

Here is the selector that lets users pick the content they wish to load:

 <Select id="Optionselector"> 
        <option value="Opt1" selected="true">Option 1</option> 
        <option value="Opt2">Option 2</option> 
      </Select> 

These are the divs that are swapped around depending on the option users pick:

<div id="Opt1" class="Option" style="display:none"> 
        
        <!--LOAD NEW DATA 1 --> 
        <div id="NEWDIV1" > 
</div 


<div id="Opt2" class="Option" style="display:none"> 
        
        <!--LOAD NEW DATA 2 --> 
        <div id="NEWDIV2" > 
</div 

What I would like to do is something like this:

$(function() {     

    $('#Optionselector').change(function(){ 
        $('.Option' + '.RSSfeed').hide(); 
        $('#' + $(this).val()).show(); 
    }); 

}); 

(Here is the div class that I want to have updated alongside .Option)

<div class="RSSfeed"> 
<div id="RSSarea1">Feed goes here </div> 
        </div> 

<div class="RSSfeed" style="display:none"> 
<div id="RSSarea2">Feed goes here </div> 
        </div> 

]


Is anyone able to help me out with this? I haven't been able to make it work. I've tried substituting the coma between the two classes with plus signs with no avail


Thanks to everyone who replies !

[japanir]

Here:

$('.Option' + '.RSSfeed').hide();

Are you trying to select multipule selectors?
Id so, they should be seperated with comma.
check here:
http://api.jquery.co...tiple-selector/

[lindsaygelle]

Hi, thanks for getting back to me so quickly.

There is only one Selector that is being used. To put it as an example, when people click an option from the drop-down menu, the content included in the 'select=id' (option value) is brought up, but in addition to that divs not in the selector change (.RSSfeed).

So i'll try and explain that here.


User clicks selector option.

The selected option loads divs inside Option class

but in addition to that, it loads content outside of the option class, which would be the RSSfeed class

I hope that makes sense.

japanir, on 29 June 2011 - 07:51 AM, said:

Here:

$('.Option' + '.RSSfeed').hide();

Are you trying to select multipule selectors?
Id so, they should be seperated with comma.
check here:
http://api.jquery.co...tiple-selector/

[japanir]

.Option and .RSSeed are different classes.
Therefore you have to select them with comma between them as shown in the link I posted.

[lindsaygelle]

Hi Janpanir,

I tried the method stipulated in the link, and it doesn't exactly work. When the item is chosen from the selector id the div box that I am trying to update 'disappears' or is not being loaded. I have tried using double quotes too to see if that made a difference and it hasn't.

Here's what I've tried.

  $('#locationselector').change(function(){
        $('.Option,RSSfeed').hide();
        $('#' + $(this).val()).show();
    });

});

&

  $('#locationselector').change(function(){
        $('.location','RSSfeed').hide();
        $('#' + $(this).val()).show();
    });

});

Double quotes with both functions didn't work either.

Regards,
Lindsay

japanir, on 29 June 2011 - 08:55 AM, said:

.Option and .RSSeed are different classes.
Therefore you have to select them with comma between them as shown in the link I posted.

[japanir]

RSSfield is a class.
so you should use dot before, like:
".RSSfield"
so, it should be something like:

$("div.Option , div.RSSfield").hide();

[lindsaygelle]

Unfortunately that didn't work either. It just doesn't display any content inside that div once updated. I've attached my html to show you what I mean, I think I may have explained it poorly.

japanir, on 29 June 2011 - 04:18 PM, said:

RSSfield is a class.
so you should use dot before, like:
".RSSfield"
so, it should be something like:

$("div.Option , div.RSSfield").hide();

Attached File(s)

•  Malfunctioningcode.html (1.73K)
  Number of downloads: 27

[japanir]

Quote

It just doesn't display any content inside that div once updated

What content you want to be displayed?
In which div element?
The line of code I posted simply hides div elements with certain classes.

[lindsaygelle]

I would love to have the divs listed as "RSS1" and "RSS2" to show once they have been selected, but I can't get it.

japanir, on 29 June 2011 - 05:32 PM, said:

Quote

It just doesn't display any content inside that div once updated

What content you want to be displayed?
In which div element?
The line of code I posted simply hides div elements with certain classes.

[japanir]

Do you mean something like:

HTML

<select id='options'>
<option value='1'>RSS1</option>
<option value='2'>RSS2</option>
</select>

<div class='RSSDiv' id='RSS1'>rss1</div>
<div class='RSSDiv' id='RSS2'>rss2</div>

JQuery

$('div.RSSDiv').hide();

$('#options').change(function(){
 $("div#RSS" + $(this).val()).show();
});

I may have typos as I am typing into the browser, so consider it as an idea, to get you started.

[lindsaygelle]

Not exactly,

In my reference file can you see how there are divs holding numbers (05, 11) and divs holding words like 'yeah' etc?

I woud like those to swap when an option is chosen from the menu.

For example I go to the page and I see

05
RSS1
'Yeah'

When I click 'Option2' from the selector menu

I would like

11
RSS2
'Blah'

to be shown.


Nothing I have tried seems to get that to work - largely because it's not inside the div being selected in the drop down menu.

I was hoping there was a way JQuery could talk to the selector to prompt the RSS div to be changed when the Option is selected.

japanir, on 29 June 2011 - 06:26 PM, said:

Do you mean something like:

HTML

<select id='options'>
<option value='1'>RSS1</option>
<option value='2'>RSS2</option>
</select>

<div class='RSSDiv' id='RSS1'>rss1</div>
<div class='RSSDiv' id='RSS2'>rss2</div>

JQuery

$('div.RSSDiv').hide();

$('#options').change(function(){
 $("div#RSS" + $(this).val()).show();
});

I may have typos as I am typing into the browser, so consider it as an idea, to get you started.

[japanir]

I understand now..
It is simply an issue of hiding and showing the correct div elements.
i.e. when an option is selected, the current div should be hidden, and a new div should be shown.
you can have a variable to hold the current div id to show.
when an option is selected, hide that div, and change this variable value to the new div's id.
then show that new div.
something like:

html

<select id='options'>
<option id='RSS1'>1</option>
<option id='RSS2'>2</option>
</select>

<div id='RSS1'></div>
<div id='RSS2'></div>

script

var currDiv = '';
$('#.options').change(function(){
  $('#' + currDiv).hide();
  currDiv = $(this).value();
  $('#' + currDiv).show();
});

[lindsaygelle]

Thanks for that code, I gave it a shot and it worked fine on its own. But when I tried to apply that solution to updating divs that aren't inside the selector it didn't work.

What I'm trying to do is have the selector class talk to multiple divs, using the same class, to update them when an option choice is made.

For example I have one div at the top of my page not written into the selector option, but when a option is made from there the div at the top of the page changes over too.

That isn't working still

Is it even possible to do something like that?

japanir, on 29 June 2011 - 06:55 PM, said:

I understand now..
It is simply an issue of hiding and showing the correct div elements.
i.e. when an option is selected, the current div should be hidden, and a new div should be shown.
you can have a variable to hold the current div id to show.
when an option is selected, hide that div, and change this variable value to the new div's id.
then show that new div.
something like:

html

<select id='options'>
<option id='RSS1'>1</option>
<option id='RSS2'>2</option>
</select>

<div id='RSS1'></div>
<div id='RSS2'></div>

script

var currDiv = '';
$('#.options').change(function(){
  $('#' + currDiv).hide();
  currDiv = $(this).value();
  $('#' + currDiv).show();
});

[lindsaygelle]

I've figured out that the code is working for this

$(function() {    
    $('#Optionselector').change(function(){
        $('.Option').hide();
$('.RSSF').hide();
        $('#' + $(this).val()).show();
    });
});

The issue is with the hide on the RSSF option!

Somehow I need to make that when that line is trigger instead of hiding it, it like swaps with a div of the same class.

Does that make sense?

[japanir]

You want to replace the content of the .Option div?
You can use .html().
Is that what you mean?