ugrás a tartalomhoz

jQuery Tab

Theo76 · 2018. Júl. 1. (V), 16.21
Sziasztok!

Ezt a kis szkriptet írtam, ami tab kezelést valósít meg az oldalon. A probléma az, hogy tab váltás esetén, a betöltött tartalomba már nem működik a jQuery, mintha a fő tartalomtól teljesen külön állna...

function tabLink( tabId, tabMaxNumb, content, link, anim ){
    var anim = ( typeof anim === 'undefined' ) ? false : true;
    var $error = true;

    for ( i = 1; i < tabMaxNumb; i++ ) {
        if ( $( '#tab-' + i ).attr( 'class').search( ' tableTabDis' ) != -1 ) {
            if ( ( '#tab-' + i ) != tabId ) {
                $( '#tab-' + i ).removeClass( 'tableTabDis' );
                $error = false;
            }
        }
    }

    if ( !$error ) {
        $( tabId ).addClass( 'tableTabDis' );

        content = '#' + content;
        $.ajax({
            type: 'GET',
            url: link,
            beforeSend: function(){
                $( content ).slideUp( 'fast', function() {
                    $( content ).html( '' );
                });
            },
            success: function( data ){
                $( content ).css( 'display','block' );
                $( content ).slideDown( 'fast', function() {
                    $( content ).html( data );
                });
            }
        });
    }
}
‹ localeCompare CKFinder integrálása CKEditorba ›
 ■
1

Micsoda nem működik?

T.G · 2018. Júl. 1. (V), 21.24
Szerintem ebből a kódból pont a lényeg hiányzik. Micsoda nem működik?
Eseménykezelés? Amit az újonnan betöltött tartalomnál nem jön létre?
2

a jQuery kód ennyi. :) Nem

Theo76 · 2018. Júl. 3. (K), 06.04
a jQuery kód ennyi. :) Nem tudom milyen lényegre gondolsz...

Ez a html kód:

<table id="tableTabBody">
    <tr>
        <td></td>
        <td id="tab-1" class="tableTab tableTabDis" onClick="tabLink('#tab-1',5,'tableBodyContent','action.php','1');">Típus</td>
        <td id="tab-2" class="tableTab" onClick="tabLink('#tab-2',5,'tableBodyContent','action.php','1');">Anyagminőség</td>
        <td id="tab-3" class="tableTab" onClick="tabLink('#tab-3',5,'tableBodyContent','action.php','1');">Keménység</td>
        <td id="tab-4" class="tableTab" onClick="tabLink('#tab-4',5,'tableBodyContent','action.php','1');">Élszalag</td>
        <td></td>
    </tr>
</table>
<table>
    <tbody id="tableBodyContent">
        <tr>
            <td>
                <form id='ajaxSubmit' action='action.php' method='post'>
                    <table>
                        <tbody>
                            <tr>
                                <td>Fajtája:</td>
                                <td><input type='text' name='KesFajta' value='' /></td>
                                <td><input type='submit' value='Rögzítés' /></td>
                            </tr>
                        </tbody>
                    </table> 
                </form>
            </td>
        </tr>
        <tr>
            <td id="dataBody">
            </td>
        </tr>
    </tbody>
</table>
a fülhöz kapcsolódó tartalmat ez a kódrészlet tölti be

success: function( data ){
                $( content ).css( 'display','block' );
                $( content ).slideDown( 'fast', function() {
                    $( content ).html( data );
                });
            }
Az űrlapot ez a kód kezeli:

$( document ).ready( function(){
    $( '#ajaxSubmit' ).submit( function() {
        var $dest = ( typeof $( this ).attr( 'data-dest' ) === 'undefined' ) ? 'working' : $( this ).attr( 'data-dest' );

        $.ajax({
            url:    $( this ).attr( 'action' ),
            type:   $( this ).attr( 'method' ),
            data:   $( this ).serialize(),
            mimeType:"multipart/form-data", 

            success: function( response ) {
                alert(response);
                $( '#' + $dest ).html( response );
            },
        });

        return false;
    });
});
Az oldal betöltése után az alapértelmezett fülön még működik a form, és szépen kezeli a jQuery, de viszont ha bármelyik fülre rákattintok, ez a kód nem fut le. Mintha be se lenne töltődve... Ugyanakkor a fülek között szépen tudok váltani.
3

Mégsem ennyi...

T.G · 2018. Júl. 3. (K), 21.55
Konkrétan az első kódban még utalás sem volt arra, hogy melyik rész a problémás így csak arra lehet tippelni, hogy valószínűleg az egyik típushiba lehet itt is. És igen.

Mert tényleg a második kommentben van a lényeg. A harmadik forráskódban lévő kód, az az oldal betöltésekor lefut, ekkor a $( '#ajaxSubmit' ) nulla elemű, így minden, ami benne van az sosem hajtódik végre. Merthogy a html-ben csak a tab váltás után jön létre ez a bizonyos form. Viszont az esemény hozzáadása akkor már nem fut le.

Tehát az új HTML betöltődése után add hozzá a submit eseményt a formhoz.
6

köszönöm! :) Viszont ilyet

Theo76 · 2018. Júl. 10. (K), 23.25
köszönöm! :) Viszont ilyet még nem csináltam, és annyira nem vagyok otthon a jqueryben... ezt hogy lehet kivitelezni ebben az esetben?
7

Sorrend

T.G · 2018. Júl. 10. (K), 23.53
Szia, semmi ördöngösség nincs benne, egyszerűen akkor kell az eseményt az elemhez hozzáadni, amikor az létezik. :)
Például, az esemény hozzáadását alakítsd át függvényé, úgy hogy a form legyen a paraméter. Majd utána a HTML felépítése után a kapott HTML-ből vedd elő a formot és azzal hívd meg az előbbi függvényt.
4

html

Pepita · 2018. Júl. 4. (Sze), 08.36
Szia,
a problémádra a jó választ már megkaptad, annyit jeleznék számodra, hogy a táblázatban-táblázat, de úgy általában mag a táblázat nem design-ra való.
Ha egyforma struktúrájú adatokból (egy entitás = több alapadat) egyszerre több rekordot (sort) akarunk megjeleníteni, akkor van létjogosultsága.
Ha megnézed, minden táblázatodban 1-1 sor van. Erre egyrészt felesleges táblázatot használni, másrészt sokkal kevesebb erőforrást igényel, ha megfelelő block / inline-block / inline elemekből rakod össze, kis css-el.
5

Köszi :)

Theo76 · 2018. Júl. 10. (K), 23.22
Köszi :)