2010-11-23 21 views
2

J'utilise un dialogue avec une zone de texte. En cliquant sur le bouton ok, la valeur de textarea est envoyée à un serveur via ajax.
La première fois que l'utilisateur écrit dans la zone de texte, la valeur est lue correctement, mais lors de toutes les actions suivantes, la valeur envoyée est la même que si l'utilisateur avait entré la même chaîne encore et encore.Jquery Dialog ne lit qu'une seule fois la valeur textarea

function message(url) { 
    var mydiv; 
    mydiv = $(document.createElement('div')); 
    mydiv.html("enter message: <textarea name='message' id='message'/>"); 
    mydiv.dialog(setProps(url)); 
    mydiv.dialog('open'); 
} 

function setProps(url) { 
    return { 
    buttons: { 
     "ok": function() { 
     $.get('/act?url=' + url + '&message=' + $("#message").val().trim(), 
      function(data) { 
      $("#content").load('/react?url=' + url); 
      } 
     ); 
     $(this).dialog("close"); 
     $(this).dialog("destroy"); 
     // If I use the following all subseq. actions are empty: 
     // $("#message").val(''); 
     } 
    } 
    } 
} 
+0

Je pense, le problème est la tentative d'ajouter un élément avec id = plusieurs fois « message » (puisque id doivent être uniques). Le remplacer par class = 'message' 'pourrait résoudre votre problème. –

+0

@conqenator - '.val()' obtiendrait toujours la valeur de * l'élément * first *. –

+0

@Nick: hmmm, en utilisant .last(). Val() résoudrait cela, non? Mais, je suppose que ce n'est pas le meilleur moyen. –

Répondre

5

Lorsque vous créez une boîte de dialogue, il s'annexant à la fin de la <body>, juste parce que vous détruisez la boîte de dialogue ne signifie pas les éléments disparaître, ils sont juste retournés à leur emplacement, ou dans ce cas encore à la fin de la <body>, vous devez également .remove() ces éléments, comme celui-ci:

$(this).dialog("destroy").remove(); 

Sinon (actuellement) vous ajoutez un nouvel élément #message à chaque fois, et ce que vous 're voit est un problème classique d'ID en double, il est ge la valeur du premier (le premier que vous avez ajouté ... qui n'a jamais quitté).


Dans l'ensemble il y a un peu plus de problèmes, par exemple IE 9 < ne pas avoir String.prototype.trim() donc votre valeur éclaterait, comme le fait d'avoir quelque chose comme & dedans. Laissez jQuery encoder vos valeurs, comme ceci:

function message(url) { 
$("<div>enter message: <textarea name='message' id='message'></textarea></div>") 
    .dialog(setProps(url)); 
} 

function setProps(url) { 
    return { 
    buttons: { 
     "ok": function() { 
     $.get('/act', { url: url, message: $.trim($("#message").val()) }, 
      function(data) { 
      $("#content").load('/react?url=' + url); 
      } 
     ); 
     $(this).dialog("destroy").remove(); 
     } 
    } 
    } 
} 
+0

Merci pour l'indice! – trajectory

+0

Même si je suis arrivé tard, merci beaucoup pour l'indice! Il a résolu mon énigme après une matinée passée à déboguer mon code javascript – sthor69