2017-09-24 1 views
1

J'essaie d'utiliser la méthode la plus proche dans dojo pour trouver le premier parent d'un élément que je veux afficher/masquer en fonction de la valeur sélectionnée dans l'un des filtres de sélection. Cela marche bien dans le navigateur firefox mais dans IE il est dit que l'objet ne supporte pas le plus proche. Toute aide ici est vraiment appréciée. Ci-dessous est un exemple de code html et js.dojoquery avec la méthode la plus proche ne fonctionne pas dans Internet Explorer

HTML

<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_3" widgetId="pvr_widget_Property_3"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_3_label" for="pvr_widget_editors_FilteringSelectEditor_0" data-dojo-attach-point="_labelNode">Product Type</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_0" widgetId="pvr_widget_editors_FilteringSelectEditor_0"> 
</div> 
</div> 
</div> 
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_4" widgetId="pvr_widget_Property_4"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_4_label" for="pvr_widget_editors_FilteringSelectEditor_1" data-dojo-attach-point="_labelNode">Document Type</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_1" widgetId="pvr_widget_editors_FilteringSelectEditor_1"> 
</div> 
</div> 
</div> 
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_5" widgetId="pvr_widget_Property_5"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_5_label" data-dojo-attach-point="_labelNode">Document Type Others</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<input type="textbox"></input> 
</div> 
</div> 

Javascript:

query(".pvrPropertyLabel").forEach(function(node){ 
     var labelName=node.innerHTML; 
     if(labelName=="Document Type"){ 
      alert("lableName"+labelName); 
      filtertingSelectId=domAttr.get(node,"for"); 
      var temp=dijit.byId(filtertingSelectId).get('value'); 
      alert("value of filtering select is:"+temp); 
     } 
     else if(labelName=="Document Type Others"){ 
      alert("lableName"+labelName); 
      //alert("query(labelNodes[i])"+query(labelNodes[i])); 
      alert("equality test"+node===query(node)); 
      var parentNode=query(node).closest(".pvrProperty");/*node.closest(".pvrProperty") works fine here but not query(node)*/ 
      var spanNode=query(node).closest(".pvrPropertyLabelWrapper"); 
      domStyle.set(spanNode,{"width":"175px"}); 
      var propEditnode=dijit.byId(filtertingSelectId); 
      alert("parentNode:"+parentNode); 
      alert("parentNode id"+domAttr.get(parentNode,"id")); 
      //var dropdownId=domAttr.get(labelNodes[i],"for"); 
      if(propEditnode.get('value')=="Other"){ 
       alert("other"); 
       domClass.remove(parentNode,"pvrLayoutItemHidden"); 
       domClass.remove(parentNode,"pvrPropertyHidden"); 
       domClass.add(parentNode,"pvrLayoutItem"); 
      }else{ 
       alert("not other"); 
       domClass.add(parentNode,"pvrLayoutItemHidden"); 
       domClass.add(parentNode,"pvrPropertyHidden"); 
       domClass.remove(parentNode,"pvrLayoutItem"); 
      } 
     } 
    }); 

Même j'ai essayé test d'égalité pour vérifier si les deux noeuds sont identiques ou non, mais ils sont not.If je node.closest simples ('') dans le code ci-dessus fonctionne très bien dans firefox mais quand j'utilise query (node) .closest ('') ne fonctionne pas dans firefox aussi. Je ne sais pas ce que je manque ici. Toute aide est vraiment appréciée.Merci

+0

quelle version d'IE? –

+0

J'utilise IE 11.0 version –

+0

a dû ajouter polyfill pour la méthode la plus proche pour IE pour le soutenir. Cela a fait fonctionner pour IE aussi bien, mais je voudrais savoir si c'est une approche correcte ou non. –

Répondre

0

J'ai dû utiliser polyfill pour que le navigateur IE prenne en charge la méthode la plus proche. Le code ci-dessous a résolu le problème pour moi. J'espère que cela aidera quelqu'un qui fait face à un problème similaire.

 if (window.Element && !Element.prototype.closest) { 
       Element.prototype.closest = 
       function(s) { 
        var matches = (this.document || this.ownerDocument).querySelectorAll(s), 
         i, 
         el = this; 
        do { 
         i = matches.length; 
         while (--i >= 0 && matches.item(i) !== el) {}; 
        } while ((i < 0) && (el = el.parentElement)); 
        return el; 
       }; 
      } 
     query(".pvrPropertyLabel").forEach(function(node){ 
      var labelName=node.innerHTML; 
      if(labelName=="Document Type"){ 
       //alert("lableName"+labelName); 
       filtertingSelectId=domAttr.get(node,"for"); 
       var temp=dijit.byId(filtertingSelectId).get('value'); 
       //alert("value of filtering select is:"+temp); 
      } 
      else if(labelName=="Document Type Others"){ 
       //alert("lableName"+labelName); 
       //alert("query(labelNodes[i])"+query(labelNodes[i])); 
       var lableId=domAttr.get(node,"id"); 
       //alert("labelId:"+lableId); 
       var parentNode=node.closest(".pvrProperty"); 
       var spanNode=node.closest(".pvrPropertyLabelWrapper"); 
       domStyle.set(spanNode,{"width":"175px"}); 
       var propEditnode=dijit.byId(filtertingSelectId); 
       //alert("parentNode:"+parentNode); 
       //var dropdownId=domAttr.get(labelNodes[i],"for"); 
       if(propEditnode.get('value')=="Other"){ 
        domClass.remove(parentNode,"pvrLayoutItemHidden"); 
        domClass.remove(parentNode,"pvrPropertyHidden"); 
        domClass.add(parentNode,"pvrLayoutItem"); 
       }else{ 
        domClass.add(parentNode,"pvrLayoutItemHidden"); 
        domClass.add(parentNode,"pvrPropertyHidden"); 
        domClass.remove(parentNode,"pvrLayoutItem"); 
       } 
      } 
     });