Opciones que cambian al ser cliceados

nocktis21 30 Dec, 2010, 2:11 pm

URL del foro: localhost
Versión del foro: 1.6
Actualización: Ninguna
Actualización: Tengo un div que dice "Clic aquí para mostrar opciones de filtro" y quiero que al dar clic sobre el se cambie por las opciones de filtro y se mantengan las opciones de filtro hasta que se actualice la página. ¿Como podría hacer esto?

SergioM 30 Dec, 2010, 2:17 pm

JS (podria ir en la plantilla headerinclude):

Código:
<script type='text/javascript' language='javascript'>

function mostrarOpciones(contenedor){

var codigoHTML = "El HTML que se va a mostrar";

contenedor.innerHTML = codigoHTML;

}

</script>

HTML:

Código:
<div id='tuDiv'><a href='#' onClick='mostrarFiltros(this);'>Clic aquí para mostrar opciones de filtro</a></div>

nocktis21 30 Dec, 2010, 2:30 pm

¿Entonces iría así?

Código:
<script type='text/javascript' language='javascript'>

function mostrarOpciones(contenedor){

var codigoHTML = "    <form action="forumdisplay.php" method="get">

                <input type="hidden" name="selectall" value="{$allselected}" />

                <input type="hidden" name="fid" value="{$fid}" />

                <select name="sortby">

                    <option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>

                    <option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>

                    <option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>

                    <option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>

                    {$ratingsort}

                    <option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>

                    <option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>

                </select>

                <select name="order">

                    <option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>

                    <option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>

                </select>

                <select name="datecut">

                    <option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>

                    <option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>

                    <option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>

                    <option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>

                    <option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>

                    <option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>

                    <option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>

                    <option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>

                    <option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>

                </select>

                {$gobutton}

            </form>";

contenedor.innerHTML = codigoHTML;

}

</script>

SergioM 30 Dec, 2010, 2:38 pm

No presisamente, digo si esta bien excepto por las comillas. La variable la inicias con doble comilla y los valores en el html tmb tienes doble comillas, entonces tienes que cambiar las doble comillas por comillas sencillas, como en este ejemplo:

Código:
<option value="9999" {$datecutsel['9999']}>

Código:
<option value='9999' {$datecutsel['9999']}>

nocktis21 30 Dec, 2010, 2:48 pm

Las cambie y sigue sin funcionar Confused

SergioM 30 Dec, 2010, 3:02 pm

Ahh que barbaro yo, puse las funciones diferentes. Bueno asi como se quedaba con el link, pero de esta forma ya no:
JS:

Código:
<script type='text/javascript' language='javascript'>

function mostrarOpciones(contenedor){

var codigoHTML = "    <form action='forumdisplay.php' method='get'>

                <input type='hidden' name='selectall' value='{$allselected}' />

                <input type='hidden' name='fid' value='{$fid}' />

                <select name='sortby'>

                    <option value='subject' {$sortsel['subject']}>{$lang->sort_by_subject}</option>

                    <option value='lastpost' {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>

                    <option value='starter' {$sortsel['starter']}>{$lang->sort_by_starter}</option>

                    <option value='started' {$sortsel['started']}>{$lang->sort_by_started}</option>

                    {$ratingsort}

                    <option value='replies' {$sortsel['replies']}>{$lang->sort_by_replies}</option>

                    <option value='views' {$sortsel['views']}>{$lang->sort_by_views}</option>

                </select>

                <select name='order'>

                    <option value='asc' {$ordersel['asc']}>{$lang->sort_order_asc}</option>

                    <option value='desc' {$ordersel['desc']}>{$lang->sort_order_desc}</option>

                </select>

                <select name='datecut'>

                    <option value='1' {$datecutsel['1']}>{$lang->datelimit_1day}</option>

                    <option value='5' {$datecutsel['5']}>{$lang->datelimit_5days}</option>

                    <option value='10' {$datecutsel['10']}>{$lang->datelimit_10days}</option>

                    <option value='20' {$datecutsel['20']}>{$lang->datelimit_20days}</option>

                    <option value='50' {$datecutsel['50']}>{$lang->datelimit_50days}</option>

                    <option value='75' {$datecutsel['75']}>{$lang->datelimit_75days}</option>

                    <option value='100' {$datecutsel['100']}>{$lang->datelimit_100days}</option>

                    <option value='365' {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>

                    <option value='9999' {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>

                </select>

                {$gobutton}

            </form>";

document.getElementById(contenedor).innerHTML = codigoHTML;

}

</script>

HTML:

Código:
<div id='tuDiv'><a href='#' onClick='mostrarOpciones("tuDiv");'>Clic aquí para mostrar opciones de filtro</a></div>

nocktis21 30 Dec, 2010, 3:13 pm

Los agregue pero sigue sin funcionar...

SergioM 30 Dec, 2010, 3:20 pm

Hmm intenta pover el JS de headerinclude a donde tienes el HTML, ponlo exactamente debajo del div que se cambia.

<div
....
</div>
<script....

nocktis21 30 Dec, 2010, 3:28 pm

Nada

sigue sin funcionar -.o

SergioM 30 Dec, 2010, 3:45 pm

#10

La variable en el JS si esta muy grande, no conocia esa limitante de JS.... Lo siento.
El otro metodo que y lo acabo de probar es el siguiente:

HTML:

Código:
<div id='tuDiv'><a href='#' onClick='mostrarOpciones();'>Clic aquí para mostrar opciones de filtro</a></div>

<div style="display: none" id='tuDiv2'>

<form action='forumdisplay.php' method='get'>

<input type='hidden' name='selectall' value='{$allselected}' />

<input type='hidden' name='fid' value='{$fid}' />

<select name='sortby'>

<option value='subject' {$sortsel['subject']}>{$lang->sort_by_subject}</option>

<option value='lastpost' {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>

<option value='starter' {$sortsel['starter']}>{$lang->sort_by_starter}</option>

<option value='started' {$sortsel['started']}>{$lang->sort_by_started}</option>

{$ratingsort}

<option value='replies' {$sortsel['replies']}>{$lang->sort_by_replies}</option>

<option value='views' {$sortsel['views']}>{$lang->sort_by_views}</option>

</select>

<select name='order'>

<option value='asc' {$ordersel['asc']}>{$lang->sort_order_asc}</option>

<option value='desc' {$ordersel['desc']}>{$lang->sort_order_desc}</option>

</select>

<select name='datecut'>

<option value='1' {$datecutsel['1']}>{$lang->datelimit_1day}</option>

<option value='5' {$datecutsel['5']}>{$lang->datelimit_5days}</option>

<option value='10' {$datecutsel['10']}>{$lang->datelimit_10days}</option>

<option value='20' {$datecutsel['20']}>{$lang->datelimit_20days}</option>

<option value='50' {$datecutsel['50']}>{$lang->datelimit_50days}</option>

<option value='75' {$datecutsel['75']}>{$lang->datelimit_75days}</option>

<option value='100' {$datecutsel['100']}>{$lang->datelimit_100days}</option>

<option value='365' {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>

<option value='9999' {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>

</select>

{$gobutton}

</form></div>

JS:

Código:
<script type='text/javascript' language='javascript'>

function mostrarOpciones(){

document.getElementById('tuDiv').style.display = 'none';

document.getElementById('tuDiv2').style.display = 'inline';

}

</script>

El truco aqui es encerrar la forma en un div... y el otro que contiene en enlace para mostrarlo simplemente se oculta y el que estaba oculto lo muestra, en lugar de reemplazarlo como en el método anterior.

Última modificación: 30 Dec, 2010, 3:46 pm por atorrante.

[Error] Opciones que cambian al ser cliceados