jQuery html() dans Firefox (utilise .innerHTML) ignore les DOM changements

Je suis vraiment surpris, je n'ai pas ce problème avant, mais il semble que l'appel à jQueries .html() de la fonction sur un élément ignore les changements dans les DOM, j'.e elle renvoie le code HTML dans le code source original. IE n'est pas cela. jQueries .html() utilise la propriété innerHTML en interne.

S'agit-il de se produire? Je suis sur Firefox 3.5.2. J'ai un exemple ci-dessous, où peu importe ce que vous modifiez la zone de texte valeur, le innerHTML de la "conteneur" élément n'a jamais renvoie la valeur définie dans la balise HTML. L'échantillon n'est pas à l'aide de jQuery juste pour faire plus simple (le résultat est le même à l'aide de jQuery).

Quelqu'un aurait-il un travail autour de l'endroit où je peux obtenir le code html d'un conteneur dans son état actuel, c'est à dire dont aucun script changements pour les DOM?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script type="text/javascript">
            <!--
            function BodyLoad(){                
                document.getElementById("textbox").value = "initial UPDATE";
                DisplayTextBoxValue();
            }

            function DisplayTextBoxValue(){
                alert(document.getElementById("container").innerHTML);             
                return false;
            }
            //-->
        </script>
    </head>
    <body onload="BodyLoad();">
        <div id="container">
            <input type="text" id="textbox" value="initial" />
        </div>
        <input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" />
    </body>
</html>

InformationsquelleAutor JonoW | 2009-09-07

Firefox ne met pas à jour le value attribut d'un objet DOM basée sur la saisie de l'utilisateur, juste ses value propriété - assez rapide de contourner existe.

DOM:

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  //set the attribute on the DOM Element by hand - will update the innerHTML
  element.setAttribute('value', element.value);
  alert(document.getElementById("container").innerHTML);             
  return false;
}

plugin jQuery qui permet .formhtml() automatiquement ce faire:

(function($) {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $("textarea", this).each(function() {
      //updated - thanks Raja & Dr. Fred!
      $(this).text(this.value);
    });
    $("input:radio,input:checkbox", this).each(function() {
      //im not really even sure you need to do this for "checked"
      //but what the heck, better safe than sorry
      if (this.checked) this.setAttribute('checked', 'checked');
      else this.removeAttribute('checked');
    });
    $("option", this).each(function() {
      //also not sure, but, better safe...
      if (this.selected) this.setAttribute('selected', 'selected');
      else this.removeAttribute('selected');
    });
    return oldHTML.apply(this);
  };

  //optional to override real .html() if you want
  //$.fn.html = $.fn.formhtml;
})(jQuery);

votre plugin fonctionne très bien pour tous les contrôles, mais il ne fonctionne pas pour les Textarea seul dans FF :-(....Avez-vous changer quelque chose pour le faire fonctionner? Avez déjà ajouté 1 puisque cela m'a beaucoup aidé 🙂
Cela fonctionne très bien, mais j'avais besoin d'utiliser @Dr Fred de réglage ci-dessous. Réglage de la textarea de innerHTML pour ça perd de la valeur des retours à la ligne et de tout autre espace.
Mis à jour avec @Dr Fred changement de sens.

InformationsquelleAutor gnarf

6

C'est un "problème" dans Firefox. Le cahier des charges pour innerHTML ne sont pas entièrement claires, de sorte que les différents fournisseurs de navigateur en œuvre d'une manière différente.

Une discussion sur ce sujet peuvent être trouvées ici:

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

InformationsquelleAutor Philippe Leybaert
2

Merci pour votre formhtml plugin.
Afin de l'utiliser avec textarea, j'ai dû le mettre à jour :
```
$("textarea", this).each(function() { 
  $(this).text($(this).val()); 
});
```
- J'ai utilisé @gnarf de réponse avec cet ajustement de conserver tous les espaces dans le textarea (ou assez proche... $this.texte(ce.valeur))
- Merci, tu aurais suggéré une modification ici! J'ai changé ma réponse à intégrer cette.
InformationsquelleAutor Dr Fred
1

Je sais que votre question concerne le innerHTML, mais si c'était juste de la valeur de textbox à l'intérieur de container que vous avez besoin, puis
```
$('#textbox').val()
```
vous donnera le bon (mis à jour) zone de texte valeur.

InformationsquelleAutor Russ Cam
0

Aussi un autre DOM Approche consiste à définir la defaultValue sur l'élément spécifique d'emprunt du même code à partir de l'voté réponse.
```
function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  element.defaultValue = element.value;    
  alert(document.getElementById("container").innerHTML);             
  return false;
}
```
Qui doit imprimer les mises à jour innerHTML.

de jQuery solution est préférable car elle s'attache à tous les éléments d'entrée à la place d'un élément spécifique. Cela peut être fait en utilisant le "DOM seulement" trop, va entraîner à répéter le DOM pour détecter tous les éléments d'entrée et l'ajout de la onChange les appels de méthode sur tous les éléments d'entrée. Dans le cas où vous ne savez pas les champs qui serais sur hte page.

InformationsquelleAutor Swaroop

Cette fonction de mise à jour a été fait de travailler uniquement sur les champs de saisie ne peut être modifiée par la main.
Ajout de la ligne indiquée pour mettre à jour le visible de saisie de texte:

  //set text input value from the associated sel dropdown and reset dropdown
  function set_input_value(eid, sel) {
      var el = document.getElementById(eid);
      el.setAttribute("value", sel.options[sel.selectedIndex].text);

      //added this line to solve the issue:
      el.value = el.getAttribute('value');

      sel.selectedIndex=0;
  }

InformationsquelleAutor Madalin

Vous devez vous connecter pour publier un commentaire.