Question

Un saludo a todos,

Estoy utilizando jQuery y Autocomplete UI para generar un sistema de tags similar al de Youtube y Wordpress. El asunto está en que los tags se van añadiendo dentro de un span y necesito recoger el texto de todos ellos y luego formatearlo de esta forma: "tag1,tag2,tag3...tagn," para luego enviarlo por medio de ajax siempre usando jQuery: "tags: jQuery( '#tags span' ).text()". Sé que de la forma anterior funcionaría si solo fuera un span, pero como podrán notar, serán muchos y necesito que la variable "tags" a la hora de enviarse por post, lleve todos los tags en un solo string con el formato que mencioné antes.

El script se puede ver trabajando aquí: http://jsbin.com/kiyemumune

Gracias de antemano.

Comments

Algo de código de como lo estás haciendo ahora y donde te falla sería de ayuda para así ver cómo lo haces en la actualidad.

---

Hola ankeorum, todo el código lo puse aquí : http://jsbin.com/kiyemumune

De hecho puse todo el HTML. Me pareció que era más sencillo así. ¿Hay problemas para visualizarlo? De ser así lo subo a otro lado o lo adjunto en una respuesta aquí mismo.

Saludos.

---

El código se ve pero el código por detrás para cuando haces el "submit" de la información es lo que no podemos ver porque no existe ningún botón "Enviar"

---

Entiendo ankeorum. Lo que sucede es que estoy adaptando un plugin de importación de videos para Wordpress y para esta tarea, necesito crear el sistema de tags que envie los tags (valga la redundancia) en un string separados por comas, ya que es la forma en la que el plugin procesa los tags.

Puse solo el código anterior porque es la parte que me corresponde y casi todo lo que llevo, sin embargo, lo trabajaré de esta forma, al cliquear el submit corre esta función:

<script  type='text/javascript'>
$(document).ready(function(){
    $("button#submit").click(function(){
        $.ajax({url: "import.php", 
          data: {
            tags:  $( '#tags span' ).text(),
          },
        });
    });
});
</script>

El problema como había mencionado antes, es que esto no formatea el string en la forma en que lo necesito sino que lo pone como: "tag1tag2tag3", entonces no sé cómo formataerlo para colocar la coma entre cada tag.

---

Y si cambias la línea:

tags:  $( '#tags span' ).text(),

por:

tags:  $( '#tags span' ).text() + ',',

y al final ejecutas algo parecido a esto para que te quite la última coma:

str = str.replace(/,\s*$/, "");

En esa función / indica el inicio de una expresión regular, la "," indica que buscas ese caracter \s es cualquier espacio y el símbolo $ indica que debe estar al final de la cadena.

---

Gracias ankeorum, al cambiar la linea agregando el +',' el resultado es similar a este:

"tag1tag2tag3,"

Y al borrar la última coma pues quedo casi en las mismas. Leyendo más la documentación de jQuery y probando otras tantas cosas, llegué a escribir esta solución:

<script>
    $(document).ready(function(){
      $("button#submit").click(function() {
        var arr = [];
        $("#tags span").each(function(){
          arr.push($(this).text());
        });
        arr.join(",");
        $.ajax({url: "import.php", 
          data: {
            tags:  $arr,
          },
        });
      });
    });
</script>

O sea, iterar sobre el span y añadir cada elemento dentro de un arreglo para luego separarlo por la coma. Creo que el código es funcional, pero no sé si sea lo más eficiente (veo raro tener tres funciones en tan poco código).

---

La verdad es que parece algo complejo para algo aparentemente sencillo. A ver si alguno de los gurús para por aquí a dar su opinión.

SaludoS!

Answer 1

La verdad, yo soy de los que no les gusta re-inventar la rueda, así que te recomiendo este plugin de jQuery que te va a dejar mas tranquilo para hacer lo que quieres: jQuery Tag-it!
La misma pagina contiene ejemplos de implementación.