» »

jQuery load

jQuery load

gufy123 ::

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
  • spremenil: gufy123 ()

hidetr ::

če se ne motim ima .load callback, torej prvo loadaš potem, ko je loadano, toogle, zdajle sem na šihtu in nisem siguren če sploh radi:

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

več:
http://api.jquery.com/load/

FrEaKmAn ::

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...

Zgodovina sprememb…

  • spremenil: FrEaKmAn ()

gufy123 ::

Hvala obema, bom poskusil popoldne.

FrEaKmAn, ta funckija ni čisto ok (brez onclick). problem je v tem, da imam uporabnikov n (cca 100). Kako bi podal še nek parameter, da bo funkcija vedela v kateri div naložit katere podatke. V tem primeru gre za uporabnika z ID=5, kaj pa ostali?

Bom poskusil narediti še to logiko, da ne nalaga še enkrat.

FrEaKmAn ::

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...

gufy123 ::

Zelo zanimivo

Hvala še enkrat!

MrBrdo ::

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".
MrBrdo

Zgodovina sprememb…

  • spremenilo: MrBrdo ()


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Slo-Tech userscripts

Oddelek: Izdelava spletišč
174937 (2389) jype
»

[jQuery] Zamenjava sličic pri različnih stanjih miške

Oddelek: Programiranje
111344 (991) kornilov
»

[jQuery] Sprememba teksta pri kliku-toggle

Oddelek: Programiranje
9885 (742) kornilov
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč
8710405 (9143) lisjak
»

getElementsByTagName ne dela v Chromu

Oddelek: Programiranje
141578 (1316) win64

Več podobnih tem