2009-03-04 6 views
9

मैंने कुछ जावास्क्रिप्ट लिखा है ताकि एचटीएमएल फॉर्म में वस्तुओं की सूची संपादित करने की अनुमति दी जा सके, जिसमें आइटम जोड़ने और निकालने सहित। यह फ़ायरफ़ॉक्स में काम कर रहा है। इंटरनेट एक्सप्लोरर में इसे आजमाते समय, मैंने पाया कि किसी भी अतिरिक्त आइटम को फ़ॉर्म के साथ सबमिट नहीं किया जा रहा था।आईई सबमिट नहीं कर रहा है; गतिशील रूप से जोड़ा तत्व तत्व; क्या यह एक आईई बग है?

लंबी कहानी लघु ... सरलीकरण के बहुत सारे, डिबगिंग, यह पता लगाया गया है कि कौन सी रेखा आईई को नए फॉर्म इनपुट को अनदेखा करने के लिए ट्रिगर कर रही है। तो व्यवहार की समस्या हल हो जाती है।

लेकिन अब मुझे पूछना चाहिए: क्यों? क्या यह एक आईई बग है?

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     function add() { 
      div = document.getElementById("mylist"); 

      // *** Adding text here works perfectly fine. *** 
      div.innerHTML += " "; 

      e = document.createElement("input"); 
      e.setAttribute("type", "text"); 
      e.setAttribute("name", "field3"); 
      e.setAttribute("value", "--NEWVALUE--"); 
      div.appendChild(e); 

      // *** Adding text here works perfectly fine in Firefox, but for 
      //  Internet Explorer it causes field3 to not be submitted. *** 
      //div.innerHTML += " "; 
     } 
    </script> 
</head> 
<body> 
    <form action="" method="get"> 
     <div id="mylist"> 
      <input type="text" name="field1" value="value1" /> 
      <input type="text" name="field2" value="value2" /> 
     </div> 
     <a href="javascript:" onclick="add()" />Add</a> 
     <input type="submit" value="Submit" /> 
    </form> 
</body> 
</html> 

इसे आज़माने के लिए, स्पष्ट करना: IE में लोड, जोड़ें क्लिक करें, क्लिक करें, जमा करें क्या पता पट्टी में है देखने के

यहाँ सरलीकृत कोड है। यदि आप add() में अंतिम पंक्ति को अनमोल करते हैं, तो आईई अचानक field3 रिपोर्टिंग बंद कर देगा। यह फ़ायरफ़ॉक्स में किसी भी तरह से ठीक काम करता है।

कोई विचार? एक उत्सुक मन जानना चाहता है। (और यदि पोर्टेबल फैशन में आवश्यक हो तो मैं टेक्स्ट कैसे जोड़ूं, तो आईई खुश है?)

उत्तर

7

इस एक IE बग है?

ऐसा लगता है। जब आप DOM विधियों के माध्यम से < इनपुट> तत्व बनाते हैं, तो IE 'नाम' विशेषता को काफी पसंद नहीं करता है। यह उस तरह का है जिसमें तत्व सबमिट करता है, लेकिन यदि आप तत्व के 'आंतरिक HTML' प्रतिनिधित्व को प्राप्त करने का प्रयास करते हैं तो यह रहस्यमय तरीके से गायब हो जाता है। यह तब नहीं होता है जब आप सीधे HTMLHTML पर लिखकर तत्व बनाते हैं।

यदि आप 'myform.elements.x.value' जैसे डोम लेवल 0 फॉर्म नेविगेशन विधियों का उपयोग करते हैं, तो 'तत्व' सरणी के माध्यम से उपयोग नहीं हो सकता है (इसी प्रकार प्रत्यक्ष 'myform.x' कुछ लोगों को गुमराह रूप से उपयोग करने के लिए उपयोग करता है)। किसी भी मामले में इन दिनों आप GetElementById() प्राप्त कर सकते हैं।

तो या तो आंतरिक HTML या का उपयोग डीओएम विधियों का उपयोग करें; फार्म फ़ील्ड बनाते समय उन्हें मिश्रण न करें।

यह documented (see ‘Remarks’) है और अंत में IE8 में तय की।

किसी भी मामले में, ऐसा कभी नहीं:

div.innerHTML + = '...';

यह वह जगह है के लिए केवल वाक्य-चीनी:

div.innerHTML = div.innerHTML + '...';

दूसरे शब्दों में इसे दूर सभी मूल सामग्री फेंकने तत्व की पूरी बच्चे HTML सामग्री serialise करने के लिए है, तो स्ट्रिंग संयोजन करते हैं, तो नए स्ट्रिंग तत्व में वापस फिर से पार्स है। इसका मतलब है कि आप कुछ भी है कि धारावाहिक नहीं किया जा सकता खो: के साथ ही IE के फर्जी आधा बनाया 'नाम' गुण है कि किसी भी जावास्क्रिप्ट ईवेंट हैंडलर्स, डोम श्रोताओं या अन्य कस्टम गुण आप प्रत्येक बच्चे तत्व से जुड़ी है का मतलब है। इसके अलावा, अनावश्यक धारावाहिक/पार्स चक्र धीमा है।

3

आईई रनटाइम पर कुछ अंतर्निहित गुणों को बदलने के बारे में बहुत पसंद है। उदाहरण के लिए, सेट करते समय इनपुट तत्व का नाम बदला नहीं जा सकता है।

दो बातें करता है, तो मैं तुम्हें थे मैं कोशिश करेंगे: इस नहीं करता है, तो

e.name = "text";

  • :

    1. setAttribute() उपयोग करने के बजाय, स्पष्ट रूप से name, type और value गुण सेट करने का प्रयास काम नहीं करते हैं, आपको इन सभी विशेषताओं को document.createElement() कॉल में शामिल करना पड़ सकता है:

      var e = document.createElement("<input type='text' name='field'>");

      यह वास्तव में कुछ ब्राउज़रों में अपवाद फेंक सकता है। तो जाने के लिए सबसे अच्छा क्रॉस ब्राउज़र तरीका होगा:

    var e; 
        try { 
        e = document.createElement("<input type='text' name='field'>"); 
        } catch (ex) { 
        e = document.createElement("input"); 
        e.type = 'text'; 
        e.name = 'field'; 
        } 
        e.value = 'value'; 
    
  • +0

    setAttribute से परहेज पर +1। -1 createElement-साथ-मार्कअप कॉल जो एक आक्रामक रूप से बदसूरत है पर IE-केवल हैक। – bobince

    +0

    मैं इसे एक हैक होने के बारे में सहमति व्यक्त करते हैं - जिसके कारण मैं पोस्टर पहले गुण स्थापित करने की कोशिश का सुझाव दे रहा हूँ। अगर यह काम नहीं करता है, तो मुझे वह बनने का एक और तरीका नहीं दिखता है जो वह चाहता है। – levik

    3

    आप bobince और अपने जवाब के लिए levik धन्यवाद। उन का उपयोग करके, और कुछ और प्रयोग, यहां मेरे निष्कर्ष हैं:

    1. हां यह एक आईई बग है।

    2. आईई 8 Microsoft के अनुसार बग को हल करता है: "इंटरनेट एक्सप्लोरर 8 और बाद में निर्माण एलीमेंट विधि के साथ गतिशील रूप से बनाए गए तत्वों पर रन टाइम पर NAME विशेषता सेट कर सकता है।"

    3. यह बग यह है: e.setAttribute("name", "field3") पर कॉलिंग केवल प्रकार नाम सेट करता है। अगर तत्व के साथ कुछ भी नहीं होता है तो यह काम करेगा, लेकिन अगर serialize करने का अनुरोध किया गया है, तो नाम धारावाहिक नहीं है। तो जब मैं innerHTML += " " कि एक क्रमबद्धता, जो नाम खो मजबूर कहा, तो यह अक्रमांकन पर बरामद नहीं किया गया था। कोई नाम नहीं, फॉर्म सबमिशन में शामिल नहीं है।

    4. वर्कअराउंड # 1: e = document.createElement("<input name='field3' />") सीरियलाइजेशन का सामना करते समय भी काम करेगा।

    5. वर्कअराउंड # 2: आंतरिक HTML + = का उपयोग कर पाठ जोड़ने की बजाय, मैं इस तरह एक टेक्स्ट तत्व जोड़ सकता हूं: div.appendChild(document.createTextNode(" "));। मैंने पाया था कि पाठ जोड़ने का एक बेहतर तरीका होना चाहिए, और अब मुझे यह पता है :-)।

    चीयर्स,
    --jsf

    +0

    मैं document.createElement के माध्यम से कई तत्व जोड़ रहा हूं और प्रत्येक तत्व में एकाधिक विशेषताएं हैं .. आईडी के रूप में कोई विशेषता है। मेरे पास उसी पृष्ठ पर एक जावास्क्रिप्ट फ़ंक्शन भी है जो दस्तावेज़.getElementById (ID) और आंतरिक HTML के माध्यम से आईडी को पकड़ता है। डायनामिक रूप से बनाए गए तत्व की आईडी के आधार पर मैं सही तत्व को कैसे संदर्भित या पकड़ूं?मैं आईई 8 का उपयोग कर रहा हूँ .. फ़ायरफ़ॉक्स में काम करता है :) – Jim

    संबंधित मुद्दे