[jQuery UI] Tabs i dynamiczna zawartość

[Makary155]

Mam sobie zawartość na zakładkach z jquery UI która ładuje się Ajaxem z bazy. W środku każdej zakładki mam tabelę z dwoma komórkami, w jednej wyświetla się lista ikon, po drugiej stronie opis który ma się pojawić po kliknięciu na ikonę. Opis jest brany z ukrytego diva z komórki z ikonami. Problem w tym, że ikony reagują na klikanie tylko i wyłącznie w pierwszej zakładce.

 

 

kod zakładek:

$("#equiptabs").tabs({
  load: function(event, ui) {
  
    $("#eq_content").live('click', function() {
      
    });
  },
  select: function(event, ui) {
    $("#eq_content").die('click');
    $("#eq_content").live('click', function() {
      
    });
  }
});

 

kod z ajaxa. Wiem że bajzel bez zabezpieczeń i w oczy kole ale chcę aby to działało a dopiero zajmę się estetyką - to tylko test.

$type=$_GET['type'];
$owner=$_GET['owner'];
$test=mysql_query("Select level from players where id=".$owner);
$test2=mysql_fetch_array($test);
$level=$test2['level'];

if ($type == "W" or $type == "B" or $type == "A" or $type == "L" or $type == "H" or $type == "S")
{
    if (isset($_GET['sort']))
    {
        $result=mysql_query("Select * from equipment where owner=".$owner." and type='".$type."' and status='U' order by ".$_GET['sort']." DESC");
    }
    else
    {
        $result=mysql_query("Select * from equipment where owner=".$owner." and type='".$type."' and status='U'");
    }
    $display="<table style=\"width:100%;\">";
    $display .="<tr>";
    $display .="<th>Sortuj:</th>";
    $display .="<th><a href='#' onclick=\"reloadTab('".$type."','amount'); return false; \">Ilość</a></th>";
    $display .="<th><a href='#' onclick=\"reloadTab('".$type."','name'); return false; \">Nazwa</a></th>";
    $display .="<th><a href='#' onclick=\"reloadTab('".$type."','power'); return false; \">Siła</a></th>";
    $display .="<th><a href='#' onclick=\"reloadTab('".$type."','zr'); return false; \">Premia zręczności</a></th>";
    $display .="<th><a href='#' onclick=\"reloadTab('".$type."','maxwt'); return false; \">Stan</a></th>";
    $display .="</tr>";
    $display .="</table>";
    $display .="<table id='eq_content' style='width:100%'>";
    $display .="<tr>";
    $display .="<td style='width:50%' id='desc'></td><td style='width:50%'><table><tr>";
    $i=1;
    while($weap=mysql_fetch_array($result))
    {    
        
        if ($level<$weap['minlev'])
        {
        $display .="<td style='background: red'>";
        }
        elseif(strstr($weap['name'],'Zatrut'))
        {
            $display .="<td style='border: 1px solid green'>";
        }
        else
        {
        $display .="<td>";
        }
        $display .="<div style='text-align: right; width:60px; height:60px; background: url(\"".$weap['lang']."\");' onclick=\"select('".$i."')\"><span style='color: lime; position: relative; right:5px; top:42px; '>+".$weap['power']."</span></div>";
        $display .="<span style='font-size:10px; text-align: center;'>Ilość:".$weap['amount']."<br>".$weap['wt']."/".$weap['maxwt']."</span>";
        $display .="<br><div style='display: none' id='eq".$i."'>";
        $display .="<h6>".$weap['name']."</h6>";
        $display .="<ul>";
        $display .="<li>Poziom:".$weap['minlev']."</li>";
        
        
        
        $display .="</ul>";
        $display .="</div>";
        $display .="</td>";
        if ($i % 3 == 0)
        {
            $display .="</tr><tr>";
        }
    
    $i++;
    }
    $display .="</table>";
    $display .="</td></tr></table>";
    $display .="<br><a href=\"equip.php?sprzedaj=".$type."\" onclick=\"return confirm('Na pewno chcesz sprzedać wszystko?');\">Sprzedaj wszystko</a>";
    print($display);
}

Funkcja ReloadTab powoduje przeładowanie zakładki z dodaniem sortowania wyników. Co dziwne jak dam w onclick alert to on działa, natomiast wszystkie inne polecenia manipulujące treścią już nie, nawet mimo użycia 'live'. Efekt dalej taki sam, działa tylko w pierwszej zakładce. Co jest nie tak?

[gnysek]

Daj kod tej funckji reloadTab();

 

Sprawa druga - czy ikony w pozostałych zakładkach nie reagują na klikanie, czy może podmieniany jest DIV zakładki pierwszej, a nie aktywnej?

[Makary155]

reloadTab:

function reloadTab(param, param2) {
    
var player = $('#playerid').html();
var $tabs = $('#equiptabs').tabs();
var selected = $tabs.tabs('option', 'selected');
var newurl = "equip_query.php?owner="+player+"&type="+param+"&sort="+param2;
$tabs.tabs( 'url' , selected , newurl );
$tabs.tabs( 'load' , selected);    

}

Funkcja odpalana jest po naciśnięciu na linki u góry zawartości zakładki ("ilość" "moc" itd.)

Jeszcze dla pewności funkcja select() która powinna zadziałać po kliknięciu na ikonę.

function select(param) {
    $('#desc').html('<img src="images/icons/blank.png" />');
    $('#desc').html($('#eq'+param).html());
}

Z tego co zauważyłem to tabs działa tak że ładuje wszystko do oddzielnych divów i je ukrywa, wyświetlając tylko to co jest zaznaczone. Czy powodem może być kilka divów o takim samym id ?

 

EDIT: Problem rozwiązany. Rzeczywiście zwiazane było z takimi samymi id bloków. Mimo iz były ukryte to wciąż tam były co powodowało konflikt. Dopisałem do pliku wyswietlającego tabelę instrukcję aby dodawało do nazwy id komórki liczbę odpowiadającej numerowi zakładki:

$arr_type=array('W','B','R','H','A','S','I','T','C','M');

$id=array_search($type, $arr_type);

$display .="<td style='width:50%' id='desc".$id."'></td><td style='width:50%'><table><tr>";

A do funkcji select:

function select(param) {

var $tabs = $('#equiptabs').tabs();

var selected = $tabs.tabs('option', 'selected');

 

$('#desc'+selected).html('<img src="images/icons/blank.png" />');

$('#desc'+selected).html($('#eq'+param).html());

}

Aby poprawnie pokazywało przekształciłem divy 'eq' aby dostawały numer odpowiadający ich id w bazie danych zamiast numerowi zwróconego rekordu. Zastanawiam się tylko czy nie lepiej użyć tutaj po prostu .load()

[gnysek]

No, to, że div jest ukryty nie znaczy, że nie nie ma go w kodzie - w drzewie DOM istnieje on nadal, ma tylko atrybut "niewidzialności". Jedno ID można w dokumencie HTML użyć jeden raz (wliczając też elementy tworzone dynamicznie). To znaczy, że jak kopiujesz DIV, który ma w środku element z jakimś ID i wyświetlasz go w innym miejscu, to też będzie duplikat. Ale od tego właśnie w jQuery masz takie rzeczy jak np. $('#tab1 .costam .costam');, czy metody parent(), prev(), next() itp.

[Makary155]

Dzięki, to wiele wyjaśnia. Do zamknięcia.