webentwicklung-frage-antwort-db.com.de

jQuery - Tabs, verwenden Sie URL, um Ajax-Inhalte zu laden

So sieht mein Skript so aus

function() {
    $( "#tabs" ).tabs();
});

function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
   $.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
   type: "post",
     success: function(data) {
       $('#'+div_id).fadeOut("medium", function(){
       $(this).append(data);
      $('#'+div_id).fadeIn("medium");
     });
  }
 });
}
<div id="tabs">
    <ul>
        <li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
        <li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
        <li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
    </ul>

    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

Und es funktioniert problemlos, ABER ich möchte auch eine URL-Adresse zum Laden von div-Inhalten Verwenden. http://myurl.com/page.php#id2 sollte die Seite mit ausgewählten Registerkarten mit id2 laden - es funktioniert, aber div ist wegen onClick-Attribut leer. Wie man es repariert?

Ich entschuldige mich für mein Englisch

10
breq

Sie müssen keine eigene Funktion verwenden, um AJAX in Registerkarten zu laden. JQuery kann dies für Sie tun. Setzen Sie einfach die Variable href auf die URL und fügen Sie keine <div>s hinzu.

<div id="tabs">
    <ul>
        <li><a href="trouble2.php">My id 1</a></li>
        <li><a href="trouble2.php?action=lista">My id 2</a></li>
        <li><a href="trouble2.php?action=old">My id3</a></li>
    </ul>
</div>

jQuery erstellt die Registerkarten, und automatisch lädt die Seite über AJAX. Die Dokumente finden Sie hier: http://jqueryui.com/tabs/#ajax

Es wird auch den <div> für Sie machen. Im Beispiel heißen sie ui-tabs-X, wobei X der Index der Registerkarte ist. http://myurl.com/page.php#ui-tabs-2 sollte also die Seite mit geöffnetem 2. Tab laden.

Schauen Sie sich die Demo von jQuery hier an: http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

EDIT: Wenn Sie vor oder nach dem Laden der Remote-Registerkarten eine Funktion ausführen möchten, stellt die jQuery-Benutzeroberfläche die Ereignisse tabsbeforeload und tabsload bereit.

Sie können beim Erstellen der Registerkarten gebunden werden:

$('#tabs').tabs({
    beforeLoad: function(event, ui){
        alert('loading');
    },
    load: function(event, ui){
        alert('loaded');
    }
});

Oder sie können später gebunden werden:

$('#tabs').on('tabsbeforeload', function(event, ui){
    alert('loading');
});

$('#tabs').on('tabsload', function(event, ui){
    alert('loaded');
});
20
Rocket Hazmat

Setzen Sie die Href-URL zurück, bevor Sie den Tab ajax-Inhalt in Jquery laden:

$( "#pending_recs" ).tabs({
    beforeLoad: function( event, ui ) {
        var filter_url = get_url();
        var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";

        $("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);

        ui.panel.html('<div class="loading">Loading...</div>');

        ui.jqXHR.error(function() {
            ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
        });
    }
    ,load:function( event, ui ) { /* After page load*/  }
});
1
ShivarajRH

Wenn Sie einfach das href-Attribut jedes Tab-Links auf die ajax-URL setzen, die Sie laden sollten, sollte es funktionieren.

Wenn Sie das nicht möchten, entfernen Sie die onClick-Attribute. Das Problem ist, dass beim Laden der Seite der Auslöser zum Auswählen einer bestimmten Registerkarte wie #id2 vor dem Binden der Klickelemente verwendet wird. Sie müssen die Click-Handler davor binden und den entsprechenden aufrufen, wenn die betreffende Registerkarte vom Fragment ausgewählt wird.

0
Explosion Pills