jQuery load

Pozdravljeni

Imam seznam uporabnikov. Vsak uporabnik je predstavljen s svojo vrstico - div-om. K vsakemu div-u spada še en div (pod njem), v katerega se na zahtevo (klik) naložijo še dodatni podatki z jquery. nekako takole:

<div  class="user">
   text text text bla bla 
   <input id="user_button" type="button" onclick="prikazi_detajle('detajli.php?id=5','#info_clan5')"> 
</div >

<div class="user2">
   <div id="info_clan5" style="display:none;"></div>
</div>

Tole je pa koda, s katero naložim podatke v spodnji div.

function prikazi_detajle(a,b)
{
  $(b).load(a);
  $(b).toggle();
}

Problem je sledeč: želim narediti toggle('slow'). Ampak se ob prvem kliku ne zgodi nič lepega, ker mora še s serverja naložit podatke v div in ga zato na hitro prikaže, ob nadaljnjih klikih za toggle pa lepo počasi odpira in zapira.

Se da rešiti problem, da bi tudi ob prvem kliku počasi odprlo div, v katerega se morajo še zloadati podatki s serverja? Možnost, da že ob nalaganju strani naložim vse podatke v vse div-e ni sprejemljiva.

lp

nekaj takega bi moralo delati. priporočam pa jQuery pristop in nobenih onclick...

<div  class="user">
   text text text bla bla 
   <input id="user_button" type="button"> 
</div >
 
<div class="user2">
   <div id="info_clan5" style="display:none;"></div>
</div>

$('#user_button').click(function()
{
    $('#info_clan5').load('detajli.php?id=5', function()
    {
        $(this).toggle();
    });
});

še nekaj, mogoče bi tukaj moral narediti logiko da gledaš če si že naložil in ne nalagaš še enkrat ali pa cachiraš rezultate...

opcij je več

1. dodaš nek parameter k #user_button, npr class = "{id uporabnika}". Potem pa rečeš

<div  class="user">
   text text text bla bla 
   <input id="user_button" type="button" class="5"> 
</div >
  
<div class="user2">
   <div id="info_clan5" style="display:none;"></div>
</div>

$('#user_button').click(function()
{
    var id = $(this).attr('class');
    $('#info_clan' + id).load('detajli.php?id=' + id, function()
    {
        $(this).toggle();
    });
});

osebno mi ni lepa rešitev, ker se delajo čuden html potem + afaik ni sloh veljavno, ker classi se ne smejo začeti s številko

2. Uporabiš HTML5 data attribut.

<div  class="user">
   text text text bla bla 
   <input id="user_button" type="button" data-user="5"> 
</div >
  
<div class="user2">
   <div id="info_clan5" style="display:none;"></div>
</div>

$('#user_button').click(function()
{
    var id = $(this).data('user');
    $('#info_clan' + id).load('detajli.php?id=' + id, function()
    {
        $(this).toggle();
    });
});

mnogo lepša rešitev, samo glej da boš omogočil HTML5...

Za HTML5 atribute ni potrebno uporabljat HTML5. V HTML4 se sicer stvar ne bo validirala kot popolnoma valid HTML dokument (ce spustis npr cez W3C validator), ampak vsi brskalniki razumejo zadevo in gre skozi.
Pa mimogrede če imaš tak atribut, ki pa je skupen za celo stran, npr. da imaš več gumbov in gre vedno za isti user ID, namesto da vsakemu gumbu daš atribut, lahko zadevo daš v meta tag v headu. npr. meta name="nekaj" content="lala".