Problèmes de comportement de formulaire de boîte de dialogue JQuery

J'utilise JQuery pour la première fois et j'ai travaillé avec l'exemple de boîte de dialogue JQuery UI. Je l'ai prolongé avec quelques entrées supplémentaires. Je rencontre des comportements étranges dans différents navigateurs.Problèmes de comportement de formulaire de boîte de dialogue JQuery

Lorsque j'essaie IE, l'ajout fonctionne comme prévu.

Lorsque j'utilise Chrome, l'ajout fonctionne mais il est ajouté deux fois. Lorsque j'essaie FireFox, le formulaire est visible sur la page. Lorsque la boîte de dialogue est chargée, seul le texte avant le formulaire s'affiche. Cliquez sur le bouton Ajouter des dimensions pour ajouter une ligne vide.

C'est seulement mon deuxième jour d'expérimentation, donc je vais probablement faire un certain nombre de choses mal.

Comment puis-je créer une boîte de dialogue pour ajouter correctement une entrée à partir du formulaire en utilisant les trois navigateurs?

Toutes les suggestions seraient grandement appréciées.

Voici le code, je travaille avec:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$ (function() {

var  dClass = $("#dClass"), 
     dWeight = $("#dWeight"), 
     dLength = $("#dLength"), 
     dWidth = $("#dWidth"), 
     dHeight = $("#dHeight"), 
     WeightMetric = $("#WeightMetric"), 
     LxWxHMetric = $("#LxWxHMetric"); 

    $("#dialogExample").dialog({ 
     autoOpen:false, 
     modal: true, 
     buttons: { 
       'Add dimensions': function(){ 
         $('#dimensions tbody').append('<tr>' + 
          '<td>' + dClass.val() + '</td>' + 
          '<td>' + dWeight.val() + '</td>' + 
          '<td>' + WeightMetric.val() + '</td>' + 
          '<td>' + dLength.val() + '</td>' + 
          '<td>' + dWidth.val() + '</td>' + 
          '<td>' + dHeight.val() + '</td>' + 
          '<td>' + LxWxHMetric.val() + '</td>' + 
          '</tr>'); 
         $(this).dialog('close'); 
         } 
      }, 
      Cancel: function(){ 
        $(this).dialog('close'); 
      } 
    }); 

    $('#add-dimensions') 
      .button() 
      .click(function(){ 
       $('#dialogExample').dialog('open'); 
      }); 
}); 
</script>

Classe: Poids: L: W: H:

<div> 
    <button id='add-dimensions'>Add</button> 
    </div> 
</div> 

<div style="display: none;" id="dialogExample" title="Add Dimensions"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae 

felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. 

<form> 
<fieldset> 
    <label for="dClass">Class: </label> 
    <input type="text" name="dClass" id="dClass" class="text ui-widget-content ui-corner-all" /> 

    <label for="dWeight">Weight: </label> 
    <input type="text" name="dWeight" id="dWeight" class="text ui-widget-content ui-corner-all" /> 

    <select id="WeightMetric"> 
       <option value="Metric1">metric 1</option> 
       <option value="Metric2">metric 2</option> 
       <option value="Metric3">metric 3</option> 
     </select> 

    <label for="dLength">L: </label> 
    <input type="text" name="dLength" id="dLength" class="text ui-widget-content ui-corner-all" /> 

    <label for="dWidth">W: </label> 
    <input type="text" name="dWidth" id="dWidth" class="text ui-widget-content ui-corner-all" /> 

    <label for="dHeight">H: </label> 
    <input type="text" name="dHeight" id="dHeight" class="text ui-widget-content ui-corner-all" /> 

    <select id="LxWxHMetric"> 
      <option value="Metric1">metric 1</option> 
      <option value="Metric2">metric 2</option> 
      <option value="Metric3">metric 3</option> 
    </select> 
</fieldset> 
</form> 
</div> 
</body>

Source

2010-07-19 Excelsior

Le problème était le format html malformé. J'ai manqué plusieurs balises de fermeture de clé dans le code HTML. C'est ce que je reçois pour l'utilisation de vieux bloc-notes sans caféine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$ (document).prêt (function() {

 var dClass = $("#dClass"), 
     dWeight = $("#dWeight"), 
     dLength = $("#dLength"), 
     dWidth = $("#dWidth"), 
     dHeight = $("#dHeight"), 
     WeightMetric = $("#WeightMetric"), 
     LxWxHMetric = $("#LxWxHMetric"); 

     $("#dialogExample").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       'Add dimensions': function() { 
        $('#dimensions tbody').append('<tr>' + 
          '<td>' + dClass.val() + '</td>' + 
          '<td>' + dWeight.val() + '</td>' + 
          '<td>' + WeightMetric.val() + '</td>' + 
          '<td>' + dLength.val() + '</td>' + 
          '<td>' + dWidth.val() + '</td>' + 
          '<td>' + dHeight.val() + '</td>' + 
          '<td>' + LxWxHMetric.val() + '</td>' + 
          '</tr>'); 
        $(this).dialog('close'); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     }); 

     $('#add-dimensions') 
      .button() 
      .click(function() { 
       $('#dialogExample').dialog('open'); 
      }); 
    }); 
</script>

Classe: Poids: L: W: H: Ajouter Lorem ipsum dolor sit amet, consectetuer adipiscing elit. La sollicitudin en Aenean. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Nombre entier vitae felis quis diam laoreet ullamcorper. Etiam tincidunt is is vitae Classe:. Poids: métrique une métrique 2 métrique 3 L: W: H: métrique une métrique 2 métrique 3

Source

2010-07-19 18:06:28 Excelsior

Problèmes de comportement de formulaire de boîte de dialogue JQuery

Répondre

Questions connexes