jQuery UI scheda non audio che carica tutto il sito Web in sé stesso?

Question

Avere un grosso problema con le schede jQuery.

Sto cercando di caricare le schede nella pagina del prodotto dei miei siti ... Quando la pagina viene caricata, vedo quel contenuto di schede per un secondo (le schede HTML standard non sono ajax) e improvvisamente tutto il mio sito web viene caricato nella scheda.

sto usando il codice standard dalla pagina demo delle schede ui jquery.

<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> 

Ma, ho un sacco di altri javascript intorno al sito, chiedo solo se qualcuno ha visto questo prima.

Molte grazie

Answer 1

Hai ragione, è il meta tag BASE. Questo è un problema con l'ultima versione di jQuery UI (1.9), ha funzionato con 1.8. Ci sono state molte modifiche all'API delle schede, ma non sembra che questo problema abbia causato questo problema finché non controlli il codice sorgente di jQuery.

1. la base meta tag indica al browser di trasformare l'attributo href nelle schede (che si usa come riferimento per il contenuto schede) da hash + id a un URL completo (utilizzando il valore del tag BASE). Questo è il comportamento previsto.
2. Le versioni precedenti dell'interfaccia utente Tabs tentavano di indovinare se l'href era realmente remoto o no, dividendo il valore della scheda href, quindi confrontandolo con l'attuale URL AND al tag BASE, quindi decidendo se effettivamente era Locale.
3. L'ultima versione di jQuery non controlla il valore del tag BASE.
4. Quindi, l'ultima versione, se utilizzata con il meta tag BASE, tenterà di caricare il contenuto della scheda utilizzando Ajax, ricaricandosi (o qualsiasi cosa sia nell'URL BASE).

Questo è ciò che jQuery UI schede utilizzate nella versione 1.8.24:

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; 
     } 

Questo è ciò che jQuery UI Tabs utilizza nella versione 1.9.2:

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"); 
    } 

Il codice è organizzato in modo diverso a causa della vasta riscrittura del codice Tabs, ma è possibile ottenere l'idea (Il $ ("base") [0] è il valore del meta tag BASE).

Finora non ho trovato alcun modo di dire alle schede "questo è locale, non usare Ajax" usando le normali API delle schede. Quello che posso offrirti è quello che ho fatto per risolverlo rapidamente nel frattempo (mentre chiedo, ricontrollo e magari riempire un bug report): un hack.

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)); 
    } 

Questa è la versione più recente più il controllo eseguito nella versione precedente.

In una copia non minificata della più recente interfaccia utente di jQuery, sostituire la funzione isLocal con quella. Quindi, riduci il file. Sostituisci la versione originale. Test.

Ha funzionato per me in Firefox (17.0.1) e Chromium (18.0.1025.168).

Lo svantaggio è che non è possibile utilizzare una copia di terze parti (da un CDN). Per me non è un problema dato che la maggior parte delle mie applicazioni sono utilizzate nelle intranet.

Se qualcuno trova una soluzione migliore o è a conoscenza di come farlo senza aver hackerato il codice dell'interfaccia utente jQuery, faccelo sapere.

AGGIORNAMENTO: Ho trovato questa segnalazione di errore (con diversi duplicati): http://bugs.jqueryui.com/ticket/7822 Sono stato tentato di aggiungere il mio commento ma sembra che gli sviluppatori di jQuery non "risolveranno" questo dato che considerano il problema altrove. Citazione dal bugtracker:

non vedo come questo non è banale per risolvere ...

Ecco il banale, implementazione PHP dinamico: 'http: //'. $ _SERVER ['HTTP_HOST']. $ _SERVER ['REQUEST_URI']. '#foo'.

È anche piuttosto semplice risolvere questo problema in JavaScript, ma non fornirò codice di esempio perché è il posto sbagliato da correggere e dovrebbe essere fortemente scoraggiato. Il comportamento dei collegamenti è chiaramente definito e coerente su tutti i browser. Non c'è assolutamente alcun motivo per cui le persone debbano utilizzare URL errati e quindi violare intorno a loro in JavaScript.

Infine, è importante notare che "risolvere" questo significherebbe infrangere il comportamento corretto per tutti coloro che usano correttamente. Tieni presente che questo problema è stato risolto perché le persone con URL corretti stavano eseguendo il bug reale esistente nel vecchio codice.

Answer 2

Questa è una soluzione semplice che funziona all'interno del file .js, quindi è possibile utilizzare una copia di terze parti per jquery.ui.
Testato con interfaccia utente Jquery 1.10.2.
Risolvi il problema del meta tag di base e anche il problema con l'URL finale della barra opzionale.

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

Answer 3

Come @MV menzionato, il problema è che jquery confonde il tag di base sulla parte superiore della mia pagina web. Così, invece di modificare il file ui strega jQuery non è nelle mie possibilità, ho semplicemente rimosso il tag base utilizzando jQuery così

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

Questo sembra funzionare per me, dal momento che non mi dispiace di rimuovere il tag base temporanea per il controllo delle schede su quella specifica pagina. Ma stavo anche pensando una soluzione nel caso in cui uno ha bisogno di quelle definizioni, come la raccolta di quei tag di base in una matrice, rimuoverli e dopo aver eseguito il metodo tabs(), aggiungerli di nuovo che sembra un po 'st..id ma dovrebbe funzionare se tabs() non implementa alcun pattern listener. Non l'ho provato e non lo farò ancora. Comunque sembra che jQuery ui abbia un bug in effetti!

Answer 4

mia conclusione

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"); 
}); 

Forse guarda questo può essere molto utile per rimuovere il BasePath, che creare le schede(), e quando i vostri lavori con schede sono finiti si deve accodare Ritorna in testa

Answer 5

Attribuire l'attributo base solo per rendere operative le schede.E 'troppo

Un'altra soluzione hacky:

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(); 
 
    } 
 
});

testato con jQuery UI - v1.11.1

Answer 6

Angelica ha avuto la risposta che ha lavorato per me. L'ho usato in un file requirejs per qualsiasi pagina con le 'schede' della classe come selettore per le schede.

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