Menzioni con @ problemi legati iframe

[ringo83]

Buongiorno a tutti, spero di postare nella sezione giusta.
Ho un problema con il mio sito, ero intenzionato ad inserire la possibilità di inserire le citazioni nei commenti del mio sito.

In parole povere volevo ricreare l'effetto che vediamo tutti i giorni su fb, scriviamo @ si apre un menu con dei suggerimenti mentre scriviamo, selezioniamo un nome e appare un tag HTML contenente il nome (quindi non modificabile ma solo eliminabile) nella textarea.

Non ho avuto problemi a scrivere lo script per azionare il menu a tendina:

$(function()
 {
  $("#eAd_Post_Home").triggeredAutocomplete({
  	source: "add_user.php",
    close: function(event, ui) {
      $('#tri_autocomplete_div ul').empty();
      $("#tri_autocomplete_div").css("display", "none");
    },
    trigger: "@"
  })
  .data("triggeredAutocomplete")._renderItem = function(ul, item) {

    if($('#tri_autocomplete_div').css('display') == 'none')
     {$("#tri_autocomplete_div").css("display", "block");}
    
    var inner_html = "<a onclick=\"mention('add', '"+item.id+"', '"+item.label+"', '1');\"><div class='autocomplete_image'>"+item.image+"</div><div>"+item.label+"</div>

"+item.desc+"</p></a><div style='clear:both'></div>";
	return $("<li class='autocomplete_li'>")
  	  .data("item.autocomplete", item)
	  .append(inner_html)
	  .appendTo($('#tri_autocomplete_div ul'));
  };
 });

Solo che nelle textarea non posso inserire del tag html, quindi quando inserivo il mio "bottone modificato via CSS" ne vedevo solo il codice.

Allora ho provato a sostituire la textarea con un iframe con design mode, in questo caso i bottoni vengono visualizzati correttamente, ma lo script che ho postato precedentemente non si attiva per un iframe.

Potete aiutarmi?

[cavicchiandrea]

Vedi se questo può aiutarti

[ringo83]

Ciao! Quel post è sempre mio

Ovviamente non ho fatto molti passi aventi

[carlomarx]

Originariamente inviato da ringo83
Allora ho provato a sostituire la textarea con un iframe con design mode, in questo caso i bottoni vengono visualizzati correttamente, ma lo script che ho postato precedentemente non si attiva per un iframe.

Potete aiutarmi?

invece di una textarea prova a usare un div con l'attributo contenteditable:

<div contenteditable id="mioDiv">Ciao mondo!</div>

[ringo83]

Ciao! Grazie mille non conoscevo questa funzionalità è molto più facile da gestire degli Iframe .

Però c'è ancora un problema, quando inserisco la @ non si attiva il menu a tendina che dovrebbe farmi scegliere l'utente da citare.
Non sono una cima in jquery però credo che il problema possa risiedere nel fatto che la lettura della textarea si fa da value e da div si fa con innerHTML, può essere?

$(function()
 {
  $("#eAd_Post_Home").triggeredAutocomplete({
  	source: "add_user.php",
    close: function(event, ui) {
      $('#tri_autocomplete_div ul').empty();
      $("#tri_autocomplete_div").css("display", "none");
    },
    trigger: "@"
  })
  .data("triggeredAutocomplete")._renderItem = function(ul, item) {

    if($('#tri_autocomplete_div').css('display') == 'none')
     {$("#tri_autocomplete_div").css("display", "block");}
    
    var inner_html = "<a onclick=\"mention('add', '"+item.id+"', '"+item.label+"', '1');\"><div class='autocomplete_image'>"+item.image+"</div><div>"+item.label+"</div>

"+item.desc+"</p></a><div style='clear:both'></div>";
	return $("<li class='autocomplete_li'>")
  	  .data("item.autocomplete", item)
	  .append(inner_html)
	  .appendTo($('#tri_autocomplete_div ul'));
  };
 });

Lo script è questo, sapere come posso ovviare questo problema?

[ringo83]

Nel caso servisse a qualcuno ho risolto così:

$(function()
 {
  $.fn.val = $.fn.html;
  $("#eAd_Post_Home").triggeredAutocomplete({
  	source: "add_user.php",
    close: function(event, ui) {
      $('#tri_autocomplete_div ul').empty();
      $("#tri_autocomplete_div").css("display", "none");
    },
    trigger: "@"
  })
  .data("triggeredAutocomplete")._renderItem = function(ul, item) {

    if($('#tri_autocomplete_div').css('display') == 'none')
     {$("#tri_autocomplete_div").css("display", "block");}
    
    var inner_html = "<a onclick=\"mention('add', '"+item.id+"', '"+item.label+"', '1');\"><div class='autocomplete_image'>"+item.image+"</div><div>"+item.label+"</div>

"+item.desc+"</p></a><div style='clear:both'></div>";
	return $("<li class='tri_autocomplete_li'>")
  	  .data("item.autocomplete", item)
	  .append(inner_html)
	  .appendTo($('#tri_autocomplete_div ul'));
  };
 });

[carlomarx]

Originariamente inviato da ringo83
Non sono una cima in jquery però credo che il problema possa risiedere nel fatto che la lettura della textarea si fa da value e da div si fa con innerHTML, può essere?

Sono una cima in jQuery meno di te. In ogni caso quello che vuoi fare non è affatto così semplice.

[ringo83]

Originariamente inviato da carlomarx
Sono una cima in jQuery meno di te. In ogni caso quello che vuoi fare non è affatto così semplice.

In realtà sei stato fondamentale, mi hai sbloccato un problema su cui ero fermo da settimane

Ora però ho un nuovo strano problema ho inserito il codice che vi ho mostrato nel mio sito e ora l'auto-completamento funziona a dovere. Quando scelgo l'utente da "citare" viene inserito nel div un bottone che ne mostra il nome, così che l'utente che sta scrivendo non lo possa modificare ma lo possa solo cancellare.

Ho notato che se però cancello il bottone e poi torno a scrivere nel div la grafica cambia e vengono aggiunti nuovi tag all'interno di quest'ultimo.

Potete vedere il problema qui: http://jsfiddle.net/xvnaA/254/

Sapere da cosa può dipendere?