JQuery - Pasar valores de un input mediante un enlace

metacortex · #1 (**permalink**) 21/06/2012, 17:29

Estoy usando .selectable (UI) para seleccionar unos elementos de lista y guardarlos en un input. Dejo el código por si alguien anda buscando algo similar:

Código Javascript:

Ver original<script type="text/javascript">
jQuery(document).ready(function($) {
    //<![CDATA[
    $( "#wpsi-selectable" ).selectable({
        stop: function() {
            $( "#valores" ).val("");
            $( ".ui-selected", this ).each(function() {
                var index = $(this).attr("id");
                $("#valores").val($("#valores").val() + $(this).attr("id") + ",");
            });
        }
    });
});
//]]>
</script>

Y éste es el resultado:

Ahora bien, ocurre la siguiente situación: Esa lista tendrá muchos elementos (100, 500, 1000...) y deberán paginarse en intervalos de 20. Quisiera que el input (que al final será un hidden) pase los valores recogidos a la siguiente página mediante el método post. El input conservaría los datos de la página anterior y agregaría las selecciones de la actual. Agradezco cualquier pista al respecto.

fjrueda · #2 (**permalink**) 21/06/2012, 18:01

Metacortex.

Eso lo puede realizar por me dio de las propiedades de envio de un formulario POST o por medio del metodo GET.

Ejemplo por link:

Código:

<script>
function copiaVS(campoInput)
{
    va datos = document.getElementById(campoInput).value;
    location = "next.html?sendDatos="+datos;
}
</script>
<input type="hidden" id="valores" value="25,26,27" />
<a onClick="copiar('valores')" style="cursor: pointer;">Next</a>

Y en la otra pagina los recoge con "$_get['sendDatos']".

Ejemplo por formulario:

Código:

<form name="valores" method="POST" action="next.html"
<input type="hidden" name="valores" value="25,26,27" />
<input type="submit" value="siguiente" />
</form>

Y en la otra pagina los recoge con "$_post[valores]".
-------------------------------------------------------------------

Espero haberle ayudado, cualquier cosa me cuenta.

metacortex · #3 (**permalink**) 22/06/2012, 14:02

Gracias por responder fjrueda. Te comento que el método GET (con los datos de números) no es una opción en este caso particular. En cuanto al POST, obligatorio que sea un enlace quien envíe y no un botón.

A estas altura me rindo. No consigo mandar los endemoniados valores luego del refrescamiento. Solucioné esta parte efectuando un append que trae los datos desde la url "siguiente" con una paginación tipo Twitter. Dejo el archivo de prueba:

Código PHP:

  <?php

$cabecera ='<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Prueba Selectable</title>

    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

    <script src="../../jquery-1.7.2.js"></script>

    <script src="../../ui/jquery.ui.core.js"></script>

    <script src="../../ui/jquery.ui.widget.js"></script>

    <script src="../../ui/jquery.ui.mouse.js"></script>

    <script src="../../ui/jquery.ui.selectable.js"></script>

    <link rel="stylesheet" href="../demos.css">

    <style>

    #feedback { font-size: 1.4em; }

    #selectable .ui-selecting { background: #FECA40; }

    #selectable .ui-selected { background: #F39814; color: white; }

    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

    </style>

<script type="text/javascript">

jQuery(document).ready(function($) {

    //<![CDATA[

    $( "#selectable" ).selectable({

        stop: function() {

            $( "#valores" ).val("");

            $( ".ui-selected", this ).each(function() {

                var splid =  $(this).attr("id").split("-");

                $("#valores").val($("#valores").val() + splid[1] + ",");

            });

        }

    });

 
    $("#siguiente").click(function(e) {

        e.preventDefault();

        $.get("?t=siguiente", function(r) {

            $("#selectable").append(r);

        });

    });

});

//]]>

</script>

</head>

<body>

<div class="demo">

    <p id="feedback">

        <form method="post" action="">

            <input type="text" name="valores" id="valores" value="" />

        </form>

    </p>

    <ol id="selectable">';

 
$pie = '

        </ol>

    <a id="siguiente" href="#">Enlace</a>

    </div>

</body>

</html>';

 
$contenido ='

    <li id="i-28">ID 28</li>

    <li id="i-27">ID 27</li>

    <li id="i-26">ID 26</li>

    <li id="i-25">ID 25</li>

    <li id="i-24">ID 24</li>

    <li id="i-21">ID 21</li>

    <li id="i-20">ID 20</li>

    <li id="i-19">ID 19</li>

    <li id="i-13">ID 13</li>

    <li id="i-12">ID 12</li>';

 
$contenido2 ='

    <li id="i-08">ID 281</li>

    <li id="i-07">ID 271</li>

    <li id="i-06">ID 261</li>

    <li id="i-05">ID 251</li>

    <li id="i-04">ID 241</li>

    <li id="i-01">ID 211</li>

    <li id="i-00">ID 201</li>

    <li id="i-59">ID 191</li>

    <li id="i-53">ID 131</li>

    <li id="i-52">ID 121</li>';

 
$html = isset($_GET['t']) ? ($_GET['t'] == 'siguiente' ? $contenido2 : null) : $cabecera . $contenido . $pie;

 
echo $html;

?>

Pensándolo bien, esta nueva opción hasta resulta mejor que la primera, ya que es más cómoda y usable para el usuario que la mera paginación.

dontexplain · #4 (**permalink**) 22/06/2012, 14:15

Si los datos los almacenas en el value de un input type oculto puedes parsearlo dividiendo la cadena por , en el lado del servidor y añada al array de elementos seleccionados averiguando qué elementos ya existen en el registro

Código PHP:

Ver original$el=$_POST/GET['cadena'];
$p = explode(",", $el);
 
foreach($p in $a){
if(!in_array($a,$seleccionados)){
$seleccionados[] = $a;
}
}

fjrueda · #5 (**permalink**) 22/06/2012, 14:17

Pues siempre hay una solucion usando el formulario y consta que el boton se puede camuflar en una imagen, usando GET los link se pueden encriptar (si la cuestion es por seguridad) pero si usted considera que su solucion es valida y es util, entonses no hay mas que decir :).

De todas formas cualquier cosa me comenta y miramos que se puede hacer.

dontexplain · #6 (**permalink**) 22/06/2012, 14:19

Cita:

foreach($p as $a){

Un saludo-