jQuery यूआई गैर AJAX टैब पूरी वेबसाइट खुद लोड हो रहा है?

Question

jQuery टैब के साथ एक बड़ी समस्या होने के बाद।

मैं अपनी साइट्स उत्पाद पृष्ठ पर टैब लोड करने का प्रयास कर रहा हूं ... जब पृष्ठ लोड होता है तो मुझे लगता है कि टैब एक सेकंड के लिए सामग्री (मानक HTML टैब AJAX नहीं) तो अचानक मेरी पूरी वेबसाइट टैब के अंदर लोड हो जाती है।

मैं jquery ui टैब डेमो पृष्ठ से मानक कोड का उपयोग कर रहा हूं।

<div id="productTabs"> 
    <ul> 
     <li><a href="#tabDescription">Description</a></li> 
     <li><a href="#tabSpecs">Specifications</a></li> 
     <li><a href="#tabReviews">Reviews</a></li> 
     <li><a href="#tabDownloads">Downloads</a></li> 
    </ul> 
    <div id="tabDescription">test</div> 
    <div id="tabSpecs">test</div> 
    <div id="tabReviews">test</div> 
    <div id="tabDownloads">Sorry, no downloads available for this product.</div> 
</div> 
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#productTabs").tabs();});</script> 

लेकिन, मेरे पास साइट के आस-पास कई अन्य जावास्क्रिप्ट हैं, बस सोच रहा है कि किसी ने इसे पहले देखा है या नहीं।

बहुत धन्यवाद

Answer 1

आप सही हैं, यह आधार मेटा टैग है। यह एक समस्या है जिसे आप jQuery UI (1.9) के नवीनतम संस्करण के साथ सामना करेंगे, यह 1.8 के साथ काम करता है। टैब एपीआई में बहुत सारे बदलाव हुए थे, लेकिन जब तक आप jQuery स्रोत कोड की जांच नहीं करते हैं तब तक कुछ भी इस समस्या का कारण नहीं लग रहा था।

1. आधार मेटा टैग href विशेषता (आपके द्वारा टैब सामग्री के लिए संदर्भ के रूप में इस्तेमाल करते हैं) हैश + आईडी से एक पूर्ण यूआरएल के लिए टैब में रूपांतरित करने के लिए (अपने आधार टैग मान का प्रयोग करके) ब्राउज़र निर्देश देता है। यह अपेक्षित व्यवहार है।
2. टैब यूआई के पिछले संस्करण अनुमान लगाने के लिए कड़ी मेहनत करेंगे कि अगर href वास्तव में दूरस्थ था या नहीं, तो href टैब मान को विभाजित कर रहा है, फिर इसे वर्तमान URL और पर BASE टैग से तुलना कर रहा है, फिर यह तय करना कि वास्तव में यह वास्तव में था या नहीं स्थानीय।
3. jQuery का नवीनतम संस्करण BASE टैग मान की जांच नहीं करता है।
4. तो, नवीनतम संस्करण, जब BASE मेटा टैग के साथ उपयोग किया जाता है, तो अजाक्स का उपयोग करके टैब सामग्री को लोड करने का प्रयास करेगा, स्वयं को पुनः लोड कर देगा (या जो भी आधार URL में है)।

   function isLocal(anchor) { 
        return anchor.hash.length > 1 && 
        anchor.href.replace(rhash, "") === 
         location.href.replace(rhash, "") 
         // support: Safari 5.1 
         // Safari 5.1 doesn't encode spaces in window.location 
         // but it does encode spaces from anchors (#8777) 
         .replace(/\s/g, "%20"); 
       } 
   

   कोड आयोजित किया जाता है:

   this.anchors.each(function(i, a) { 
        var href = $(a).attr("href"); 
        // For dynamically created HTML that contains a hash as href IE < 8 expands 
        // such href to the full page url with hash and then misinterprets tab as ajax. 
        // Same consideration applies for an added tab with a fragment identifier 
        // since a[href=#fragment-identifier] does unexpectedly not match. 
        // Thus normalize href attribute... 
        var hrefBase = href.split("#")[ 0 ], 
        baseEl; 
        if (hrefBase && (hrefBase === location.toString().split("#")[ 0 ] || 
         (baseEl = $("base")[ 0 ]) && hrefBase === baseEl.href)) { 
        href = a.hash; 
        a.href = href; 
        } 
   

   यह वही है jQuery यूआई टैब्स संस्करण 1.9.2 में उपयोग करता है:

यह वही है jQuery यूआई टैब्स संस्करण 1.8.24 में प्रयोग किया जाता है टैब कोड के व्यापक पुनर्लेखन के कारण अलग-अलग, लेकिन आप विचार प्राप्त कर सकते हैं ($ ("आधार") [0] आधार मेटा टैग मान है)।

अब तक मुझे सामान्य टैब एपीआई का उपयोग करके "यह स्थानीय है, अजाक्स का उपयोग न करें" टैब को बताने का कोई तरीका नहीं मिला है। मैं आपको जो पेशकश कर सकता हूं वह वही है जो मैंने इसे सही समय में ठीक करने के लिए किया था (जबकि मैं पूछता हूं, पुनः जांच करता हूं और शायद एक बग रिपोर्ट भर सकता हूं): एक हैक।

function isLocal(anchor) { 
     return anchor.hash.length > 1 && 
     ((anchor.href.replace(rhash, "") === location.href.replace(rhash, "").replace(/\s/g, "%20")) || 
      (anchor.href.replace(rhash, "") === $("base")[ 0 ].href)); 
    } 

यह नया संस्करण है और पिछले संस्करण में किया गया चेक है।

नवीनतम jQuery UI की एक गैर-मिनीफाइड प्रति में, उस के साथ isLocal फ़ंक्शन को प्रतिस्थापित करें। फिर फ़ाइल को छोटा करें। मूल संस्करण को बदलें। परीक्षा।

यह फ़ायरफ़ॉक्स (17.0.1) और क्रोमियम (18.0.1025.168) में मेरे लिए काम किया।

नुकसान यह है कि आप किसी तृतीय-पक्ष प्रति (सीडीएन से) का उपयोग नहीं कर सकते हैं। मेरे लिए यह कोई समस्या नहीं है क्योंकि मेरे अधिकांश एप्लिकेशन इंट्रानेट में उपयोग किए जाते हैं।

अगर किसी को कोई बेहतर समाधान मिल जाए या jQuery UI कोड को हैक किए बिना इसे कैसे किया जाए, तो कृपया हमें बताएं।

अद्यतन: मुझे यह बग रिपोर्ट मिली (कई डुप्लिकेट के साथ): http://bugs.jqueryui.com/ticket/7822 मुझे अपनी टिप्पणी जोड़ने का लुत्फ उठाना पड़ा लेकिन ऐसा लगता है कि jQuery डेवलपर्स इसे "ठीक" नहीं करेंगे क्योंकि वे समस्या कहीं और सोचते हैं। बगट्रैकर से उद्धरण:

मैं नहीं दिख रहा है कि यह कैसे तय करने के लिए गैर तुच्छ है ...

यहाँ तुच्छ, गतिशील पीएचपी कार्यान्वयन है: 'http: //'। $ _SERVER ['HTTP_HOST']। $ _SERVER ['REQUEST_URI']। '#foo'।

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

अंत में, यह ध्यान रखना महत्वपूर्ण है कि "फिक्सिंग" का मतलब यह होगा कि सही तरीके से उपयोग करने वाले सभी के लिए सही व्यवहार तोड़ना होगा। ध्यान रखें कि यह तय किया गया था क्योंकि उचित URL वाले लोग पुराने कोड में मौजूद वास्तविक बग में चल रहे थे।

Answer 2

यह एक साधारण कामकाज है जो आपके .js के अंदर काम करता है, ताकि आप jquery.ui के लिए किसी तृतीय-पक्ष प्रति का उपयोग कर सकें।
Jquery UI 1.10.2 के साथ परीक्षण किया गया।
बेस मेटा टैग समस्या हल करें और वैकल्पिक पीछे की स्लैश एन यूआरएल के साथ समस्या भी हल करें।

$("#mytabs UL LI A").each(function() { 
    $(this).attr("href", location.href.toString()+$(this).attr("href")); 
}); 
$("#mytabs").tabs(); 

Answer 3

@MV उल्लेख किया है, समस्या यह है कि jQuery अपने वेबपृष्ठ के शीर्ष पर आधार टैग भ्रामक है। तो बजाय संपादन jQuery ui फ़ाइल डायन के मेरे विकल्प में नहीं है, मैं बस उस

<script> 
    jQuery(function() { 
     jQuery('base').remove(); 
     jQuery("#tabs").tabs();     
    }); 
</script> 

यह मेरे लिए काम करने के लिए लगता है jQuery का उपयोग कर आधार टैग निकाल दिया गया के बाद से मैं आधार टैग के लिए अस्थायी दूर करने से परहेज नहीं करते उस विशिष्ट पृष्ठ पर टैब नियंत्रण के लिए। लेकिन अगर किसी को उन परिभाषाओं की आवश्यकता होती है, तो उन समाधानों की आवश्यकता होती है, जैसे कि उन मूल टैग को सरणी में एकत्र करना, उन्हें हटाने और फिर टैब() विधि को निष्पादित करने के बाद, उन्हें फिर से जोड़ें जो थोड़ा सा दिखता है .. लेकिन काम करना चाहिए टैब() किसी भी श्रोता पैटर्न को लागू नहीं कर रहा है। मैंने कोशिश नहीं की है और मैं अभी तक नहीं हूं। वैसे भी ऐसा लगता है कि jQuery UI में वास्तव में एक बग है!

Answer 4

मेरे निष्कर्ष

var base=$('base').clone(true); 

$("#selector").dialog({ 
    open: function(event, ui) { 
     $('base').remove(); //Delete the Basepath to solve the Problem by loading Content 
     $('#tabs').tabs();//Create the Tabs 
    } 
    close: function(event, ui) {base.insertAfter("head"); 
}); 

हो सकता है कि इसे देखो यह basepath दूर करने के लिए, की तुलना में अपने टैब (बनाने के बहुत उपयोगी हो सकता है), और जब टैब के साथ अपने काम करता है काम पूरा होने पर आप

सिर वापस संलग्न करने के लिए है

Answer 5

base के साथ मेसिंग केवल टैब काम करने के लिए विशेषता है।

element.tabs({ 
 
    create: function(event, ui){ 
 
    var tabsData = $(event.target).data('ui-tabs'); 
 
    tabsData.anchors.each(function(idx, anchor){ 
 
     var contentId = $(anchor).attr('href'); 
 
     var $panel = $(tabsData.panels[idx]); 
 
     $panel.html($(contentId).remove().html()); 
 
    }); 
 
    }, 
 
    beforeLoad: function(event, ui){ 
 
    event.preventDefault(); 
 
    } 
 
});

साथ jQuery UI - v1.11.1

Answer 6

एंजेलिका परीक्षण किया जवाब यह है कि मेरे लिए काम किया था: यह बहुत ज्यादा

एक और hacky वैकल्पिक हल है। मैंने इसे टैब के चयनकर्ता के रूप में कक्षा 'टैब' वाले किसी भी पेज के लिए एक आवश्यकता फ़ाइल में उपयोग किया था।

jQuery(".tabs ul li a").each(function() { 
    jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href")); 
}); 
jQuery(".tabs").tabs();