[Error]  Opciones que cambian al ser cliceados
* 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...

  • 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?
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>
¿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>
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']}>
A:
Código:
<option value='9999' {$datecutsel['9999']}>
Las cambie y sigue sin funcionar Confused
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>
Los agregue pero sigue sin funcionar...
Hmm intenta pover el JS de headerinclude a donde tienes el HTML, ponlo exactamente debajo del div que se cambia.

<div
....
</div>
<script....
Nada Confused sigue sin funcionar -.o
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.