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...
  1. function tabLink( tabId, tabMaxNumb, content, link, anim ){  
  2.     var anim = ( typeof anim === 'undefined' ) ? false : true;  
  3.     var $error = true;  
  4.   
  5.     for ( i = 1; i < tabMaxNumb; i++ ) {  
  6.         if ( $( '#tab-' + i ).attr( 'class').search( ' tableTabDis' ) != -1 ) {  
  7.             if ( ( '#tab-' + i ) != tabId ) {  
  8.                 $( '#tab-' + i ).removeClass( 'tableTabDis' );  
  9.                 $error = false;  
  10.             }  
  11.         }  
  12.     }  
  13.   
  14.     if ( !$error ) {  
  15.         $( tabId ).addClass( 'tableTabDis' );  
  16.   
  17.         content = '#' + content;  
  18.         $.ajax({  
  19.             type: 'GET',  
  20.             url: link,  
  21.             beforeSend: function(){  
  22.                 $( content ).slideUp( 'fast', function() {  
  23.                     $( content ).html( '' );  
  24.                 });  
  25.             },  
  26.             success: function( data ){  
  27.                 $( content ).css( 'display','block' );  
  28.                 $( content ).slideDown( 'fast', function() {  
  29.                     $( content ).html( data );  
  30.                 });  
  31.             }  
  32.         });  
  33.     }  
  34. }  
‹ 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:
  1. <table id="tableTabBody">  
  2.     <tr>  
  3.         <td></td>  
  4.         <td id="tab-1" class="tableTab tableTabDis" onClick="tabLink('#tab-1',5,'tableBodyContent','action.php','1');">Típus</td>  
  5.         <td id="tab-2" class="tableTab" onClick="tabLink('#tab-2',5,'tableBodyContent','action.php','1');">Anyagminőség</td>  
  6.         <td id="tab-3" class="tableTab" onClick="tabLink('#tab-3',5,'tableBodyContent','action.php','1');">Keménység</td>  
  7.         <td id="tab-4" class="tableTab" onClick="tabLink('#tab-4',5,'tableBodyContent','action.php','1');">Élszalag</td>  
  8.         <td></td>  
  9.     </tr>  
  10. </table>  
  11. <table>  
  12.     <tbody id="tableBodyContent">  
  13.         <tr>  
  14.             <td>  
  15.                 <form id='ajaxSubmit' action='action.php' method='post'>  
  16.                     <table>  
  17.                         <tbody>  
  18.                             <tr>  
  19.                                 <td>Fajtája:</td>  
  20.                                 <td><input type='text' name='KesFajta' value='' /></td>  
  21.                                 <td><input type='submit' value='Rögzítés' /></td>  
  22.                             </tr>  
  23.                         </tbody>  
  24.                     </table>   
  25.                 </form>  
  26.             </td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td id="dataBody">  
  30.             </td>  
  31.         </tr>  
  32.     </tbody>  
  33. </table>  
a fülhöz kapcsolódó tartalmat ez a kódrészlet tölti be
  1. success: function( data ){  
  2.                 $( content ).css( 'display','block' );  
  3.                 $( content ).slideDown( 'fast', function() {  
  4.                     $( content ).html( data );  
  5.                 });  
  6.             }  
Az űrlapot ez a kód kezeli:
  1. $( document ).ready( function(){  
  2.     $( '#ajaxSubmit' ).submit( function() {  
  3.         var $dest = ( typeof $( this ).attr( 'data-dest' ) === 'undefined' ) ? 'working' : $( this ).attr( 'data-dest' );  
  4.   
  5.         $.ajax({  
  6.             url:    $( this ).attr( 'action' ),  
  7.             type:   $( this ).attr( 'method' ),  
  8.             data:   $( this ).serialize(),  
  9.             mimeType:"multipart/form-data",   
  10.   
  11.             success: function( response ) {  
  12.                 alert(response);  
  13.                 $( '#' + $dest ).html( response );  
  14.             },  
  15.         });  
  16.   
  17.         return false;  
  18.     });  
  19. });  
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 :)