[SOLUCIONADO] Serializar array y incluirlo en input

No-NaMe · #1 (**permalink**) 04/06/2014, 04:27

Muy buenas, lo primero gracias por vuestro tiempo y paciencia conmigo en Jquery ya que soy un poco pato.

Estoy intentando hacer lista de preferencias ordenable y ahora ya estoy en el ultimo paso, tengo que serializar los datos y meterlos en el campo "value" para poder enviarlos y luego procesarlos tranquilamente.

Y la verdad, ni idea de como hacer para que se serializen y meterlos en un input, se que en una mala puedo crear todo el input y meterlo dentro de un formulario atraves de ID, pero la parte de serializar datos me esta pillando grade, por mas que miro no me sale.

Agradezco todo tipo de ayuda.

Aqui el codigo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
    <script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 
    <script>
         $(function () {
                $("#opciones").sortable();
                $("#opciones").disableSelection();
                updateOrder();
                $("#sortButton").click(sortClick);
            });
 
            $('#opciones').sortable().bind('sortupdate', function () {
                updateOrder();
            });
            function updateOrder() {
                var orderArray = [];
 
                $("#opciones li").each(function (i, el) {
                    orderArray.push($(el).text());
                    orderArray.push($("li")[i].className.slice(5));
                });
 
                $("#display").text(orderArray.join(" "));
                
                
            }
 
           function sortClick() {
                updateOrder();
                $("#display").text("click: " + $("#display").text());
            }
    </script>
  <meta charset="utf-8">
</head>
<body> 
<span id="display"></span>
<ul id="opciones">
    <li class="item_1">Item 1</li>
    <li class="item_2">Item 2</li>
    <li class="item_3">Item 3</li>
    <li class="item_4">Item 4</li>
    <li class="item_5">Item 5</li>
    <li class="item_5">Item 6</li>
    <li class="item_6">Item 7</li>
</ul>
<p>
    <input type="button" value="actualizar_array" id="sortButton"/>
</p>

No-NaMe · #2 (**permalink**) 04/06/2014, 06:00

Arreglado, he cambiado un par de cosas, me he leido la documentacion de: http://api.jquery.com/serialize/

y he añadido esta linea html:

Código HTML:

<input type="hidden" id="display2">

Código Javascript:

Ver original$(function () {
                $("#opciones").sortable();
                $("#opciones").disableSelection();
                updateOrder();
                $("#sortButton").click(sortClick);
            });
 
            $('#opciones').sortable().bind('sortupdate', function () {
                updateOrder();
            });
            function updateOrder() {
                var orderArray = [];
 
                $("#opciones li").each(function (i, el) {
                    orderArray.push($(el).text());
                    orderArray.push($("li")[i+1].className.slice(5));
                });
                var myJsonString = JSON.stringify(orderArray);
                $("#display").text(orderArray.join(" "));   
                $("#display2").val(myJsonString);   
            }
           function sortClick() {
                updateOrder();
                $("#display").text("click: " + $("#display").text());
                $("#display2").val(myJsonString);
            }