Changing Tag Parameters Through A Dropdown

[CAC]

Basically I have the Quotes Made Simple module installed and it does nearly everything I want.

If you have used the Quotes Made Simple module then you will know that you can add quotes to groups. To insert quotes in your page you simple use the {quotes} tag.

This tag has a parameter which is {quotes group=""} which causes the page to only show quotes within a certain pre-determined group. This all works nicely!

What I would like to be able to do is change this value:

{quotes group="VALUE"}

.. through a drop down box. So if people want to know about quotes relating to Liverpool FC then they select Liverpool FC and it changes the above value so that the quotes have to be within my pre-determined Liverpool group.

I realise a method of doing this would be to have a page for each unique group and use the drop down to load these pages but I think that is pretty inefficient which is why I am asking here if there is a better method.

Think this would be pretty useful information to know anyway!

Thank you for any help.

[Nullig]

Just create a select tag with the different values:


  Opt1
  Opt2
  Opt3
  Opt4


Then some javascript/jquery for an onselect that produce the tag:

{quotes group="selected value"}

Nullig

[CAC]

That sounds like a sensible way of easily incorporating the selection drop down, thank you.

Do you know any good examples of how I would write this Javascript? I am okay with CSS & HTML but I hardly ever use this sort of things. Failing that, could you suggest some keywords (to search with!) which would get me close to what I desire, such as a technical name for this sort of function.

Thanks again.

[Nullig]

Something like this...

In the portion of your template:

Code: Select all

<__script__ type="text/javascript" src="path/to/jquery.js"></__script>
{literal}
<__script__ type="text/javascript">
$(document).ready(function(){
$('#grp1').hide();
$('#grp2').hide();
$('#grp3').hide();
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});

$("#thechoices").change();
});
</__script>
{/literal}

And in the page:

Code: Select all

<select id="thechoices">
<option value="grp1">Group 1</option>
<option value="grp2">Group 2</option>
<option value="grp3">Group 3</option>
</select>

<!-- the DIVs -->
<div id="quotes">
<div id="grp1">{quotes group="grp1"}</div>
<div id="grp2">{quotes group="grp2"}</div>
<div id="grp3">{quotes group="grp3"}</div>
</div>

Nullig

[calguy1000]

ahem... already blogged about it:
http://calguy1000.com/Blogs/17/60/news-category-dropdown.html

[CAC]

Both fantastic.

Thank you very much!

[CAC]

I have used the above code and it works well until you have numerous categories.

I have over 50 categories so pre-loading all the divs is not a good idea as it means the page takes 10 seconds to load.

Could somebody suggest a way of getting around this? Thank you for all your help.