JQuery UI schede callback non funziona

Question

Ho cercato di ottenere questo lavoro per gli ultimi 7 ore in modo scusate il leggero tono di frustrazione.

Ho implementato con successo un bel set di schede jQuery UI che caricano i loro contenuti tramite la tecnologia AJAX.

Il contenuto caricato tramite la tecnologia AJAX dispone di un modulo. Volevo il primo campo nella forma (che ha un ID di #title) per mettere a fuoco automaticamente quando la scheda viene caricato. Questo lavoro non ha ancora, quando ho provato a mettere lo script nel documento esterno così ho pensato un callback sarebbe una buona idea.

setTimeout( function() { $("#title").focus(); }, 500 );

Ho avuto questa idea da qui . Il ritardo è dovuto al fatto che stavo vivendo problemi con il campo non messa a fuoco correttamente quando si fa clic attraverso ogni scheda. In un primo momento ho pensato che questo aveva risolto alcuni dei problemi, ma dopo il test ancora più Ho trovato che questo campo di messa a fuoco funziona solo nella scheda che è stato inizialmente caricato.

Ho deciso di cancellare la mia testa e attuare una href="http://www.pengoworks.com/workshop/jquery/autocomplete.htm" rel="nofollow noreferrer"> bel campo di testo jQuery completamento automatico

Questo script sembrava funzionare quando vengono caricati direttamente nel contenuto esterno, ma per il mio sgomento ulteriori test ha dimostrato che questo non è il caso. Il campo di completamento automatico funziona solo nella scheda che viene caricato quando la pagina viene caricata.

Questo è quando ho notato il modello che entrambi i miei script sono solo lavorando sulla scheda carica iniziale.

Ho provato con i selezionati, eventi di caricamento e di spettacolo, ma tutto non funzioni.

So che il callback funziona perché l'avviso viene visualizzato quando ogni scheda viene cliccato.

Ovviamente sto facendo qualcosa di molto sbagliato.

Si prega di prendere il mio codice a pezzi e mi dica quello che sto facendo male.

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
         load: function(event, ui) { setTimeout( function() { $("#title").focus(); }, 500 );
                $("#role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );

            alert('callback');
                }
            });

        });
    </script>

Answer 1

Credo che il problema è che non si dispone di ID univoci. Se il vostro HTML è simile a questo:

<div class="tabs">
 <ul>
  <li><a href="tab1.htm">Tab1</a></li>
  <li><a href="tab2.htm">Tab2</a></li>
 </ul>
</div>

Il plugin Tab caricherà entrambe le pagine (tab1.htm e tab2.htm) nella pagina corrente. E dal momento che la prima scheda ha sia #title e #role jQuery smette di cercare un duplicato (giustamente). Quindi, la soluzione più semplice sarebbe quella di fare loro classi, quindi avere la funzione di spettacolo indirizzare la scheda selezionata e lanciare il plugin messa a fuoco e completamento automatico.

$(function(){
 $(".tabs").tabs({
  show: function(e, ui) {
   $(ui.panel)  // target the current tab contents
    .find('.title').focus().end()
    .find('.role').autocomplete(
      "/profile/autocomplete",
      {
       delay:10,
       minChars:1,
       matchSubset:1,
       matchContains:1,
       cacheLength:10,
       onItemSelect:selectItem,
       onFindValue:findValue,
       formatItem:formatItem,
       autoFill:true
      }
     );
  }
 });
});

E per rispondere a una domanda che si aveva in un commento, un callback è fondamentalmente ciò che si desidera che accada dopo tutto quello che stavi facendo è completa. Ad esempio, la funzione di sotto nasconde l'elemento con la classe di hideme poi una volta che l'effetto fadeOut è completa, la funzione di callback rimuove l'elemento dalla pagina (e DOM)

$('.hideme').fadeOut('slow', function(){
 $(this).remove();
})

Inoltre, nel caso in cui non si ha familiarità con .end() ti permette di oggetti a catena. Più precisamente esso si ripristina il selettore nella oggetto più recente che in questo caso è ui.panel. Per saperne di più su di esso qui e anche essere sicuri di controllare .andSelf() qui .

Answer 2

Il problema non è del tutto chiaro dalla domanda. Direi che la parte .ready $ (document) non è assolutamente necessario, ma probabilmente non causerebbe alcun problema in quanto penso che verrà eseguito immediatamente.

Quello che non sono sicuro di è come si sta creando le schede e soprattutto cosa si intende per "solo il primo carico di scheda, il caricamento di un'altra scheda non mette a fuoco il campo." Che cosa esattamente cosa si intende per carico? Sono le linguette di essere caricati tramite una chiamata AJAX o avete semplicemente dire come pagina rende? Vuoi un elemento specifico da mettere a fuoco PER tag, o semplicemente ogni volta che un tag viene caricato? (Il codice dice un campo specifico, ma il testo non è chiaro).

Ok, in base alle precisazioni, mi rendo conto ora il problema è che si dispone di più istanze di 'titolo' e 'il ruolo', ma che si sta utilizzando gli ID per nome e loro riferimento. Nel codice HTML, avete qualcosa di simile

<div id="tabs">
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    ...
    etc
</div>

Il problema è, il campo 'id' deve essere univoco in tutti gli elementi, altrimenti è possibile fare riferimento solo a uno di loro (non solo univoco per ogni scheda). Quindi, quando si dice $ ( '# titolo'), si è solo in grado di fare riferimento al primo elemento con un ID di 'titolo'. Molte persone a risolvere questo problema con l'aggiunta di numeri e dando ids alle linguette di 'tab1', 'Tab2', ecc e la 'title1', 'title2', ecc Questo è in realtà una cattiva idea con jQuery. Si dovrebbe invece utilizzare le classi e il metodo molto utile jquery .find () in questo modo:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            load: function(event, ui) {
                var tab_content = $(ui.panel);
                setTimeout( function() { tab_content.find(".title").focus(); }, 500 );
                tab_content.find(".role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );
                alert('callback');
            }
        });
    });
</script>

Ancora non è sicuro se il timout sul fuoco è necessario. È necessario rimuovere che se fosse stato solo un tentativo di 'far funzionare qualcosa'.

Answer 3

sicuro al 100%, ma può essere causa di avvolgere il vostro codice di gestione in $(document).ready(function() { ... });.