webrebel html css javascript laravel oop php mysql wordpress kurz

jQuery: 3 mini triky

napísal , 16 Dec 2010 [ jQuery ]

1) zradné jQuery.submit()

.submit() je metóda, ktorá sa zavolá pri pokuse o odoslanie formuláru.

$('form').submit(function() 
{ 
	var data = $(this).serialize();
});

V data teraz máme uložený obsah formuláru, ktorý by sme mohli poslať AJAXom ďalej na spracovanie. Pretty sweet. Zrada je v tom, že submit nefunguje, ak máte vo forme element s id="submit" alebo name="submit". Takže pozor na to.

2) vytvorenie nového elementu

Chcem pridať nový div na koniec stránky. $('<div>bla</div>').appendTo('body'); je jedna možnosť. V jQuery na vytvorenie prázdneho elementu však stačí $('<div/>'). Ako druhý parameter môžem poslať object s atribútmi pre tento div. Like this:

$('<div/>', { 
	text: 'bla',
	css: {
		color: 'red'
	},
	click: function() {
		alert('gule');
	}
}).appendTo('body');

Oh btw, toto funguje od verzie 1.4. V starších sa na to ide takto: $('<div/>').text('bla').css(...)... Ale ak fungujete na staršom jQuery, tak prestaňte ;)

3) linky v novom okne pre validných

Môj pohľad na html validáciu už poznáte. Každopádne, ak chcete otvárať linky v novom okne bez toho, aby validátor protestoval, máte problém. V závislosti od doctype.

Za predpokladu, že všetkým linkom pridáte class="ext", pomôže nasledovné:

$('a.ext').attr('target', '_blank'); 

Samozrejme toto nie je jQuery špecifická finta. Point is: vyber elementy na základe class a pridaj im target="_blank".


Ďalšie jQuery tipy a (video)tutoriály nájdete v sekcii.. well.. jQuery.

napísal , 16 Dec 2010

6 komentárov

komentuj
  1. serus [ Streda 16.2.2011, 01:47 ]

    vdaka tutom a novemu videotut. na zajtra som sa pustil do jquery, aj ked neviem este javascript, a dosiel som na problem, povedzme ze na cms systeme chcem ponuknut uzivatelovi ponuknut tvorit formulare, ale problem je pri select a radio, takze nasledujuce:
    <a href="#" id="addgroup"

    var $i = 1;
    $('#addgroup').click(function(){ $('container').append('add item'); $i++ });

    $('#addItem').click(function(){ $('group'??x??'').append('<input type="radio" name="group??x??"' value="??value??") });

    -takze prva vec ze neviem zadefinovat to ??x?? co je meno tej grupy, a dalsia podstatnejsia ze to nefunguje ani ked to tam napisem natvrdo, proste ak vytvorim odkaz pomocou append nefunguje mi jeho udalost click(), proste akoby nevedel spustit javascript, ale ked mu tam natvrdo vypisem do append parameter onclick="alert(\'warning bla bla\'" funguje ale inak nerobi nic, no a to ??value?? v skutocnosti generujem input type=text do ktoreho sa vlozi popis radia a posle sa php a ten to uz spracuje, ide oto vlozit do spravnej podskupiny novy item, pripadne by bodlo ho vediet aj zmazat, nasiel som kopu tutov a rieseni, ziadny ale nefunguje ak to prerobim aby sa vygeneroval prvok ktory bude generovat svoje vlastne "pod" prvky, dufam ze som to vysvetlil pochopitelne :) nemyslim ze je to zlozite, dufam ze sa nemylim, vdaka za odpoved

  2. yablko [ Streda 16.2.2011, 15:58 ]

    čauko:)
    ok.. uhm.. nie som si celkom istý, že presne rozumiem.. každopádne začnime od začiatku

    máš skúsenosti s phpčkom? premenná "$i" tomu nasvedčuje :) v javascripte nemusia premenné začínať dolárom, takže stačí "i"
    dokonca keď tvoja premenná začína $, predpokladá sa, že ide o jQuery objekt.. ale to je len taká konvencia..

    click na dynamicky pridané elementy nefunguje
    pretože po načítaní stránky jquery pridá tzv. listener na všetky existujúce elementy, ktoré si cez jquery vybral a tento listener potom "počúva", či si na daný element neklikol

    a kedže tie elementy, ktoré vytváraš, neboli na stránke keď sa tieto listenery prideľovali, nebude to fungovať
    najjednoduchší systém ako to "opraviť", je zmeniť

    $('.add').click(function()
    {

    });

    na:

    $('.add').live('click', function()
    {

    });

    a teraz sa funkcia zavolá aj pri dynamicky pridaných elementoch

    toto je zaujímavá vec a v jQuery sérii na zajtra.sk sa tomuto určite v budúcnosti budem venovať bližšie, takže stay tuned :)

    ---

    ďalej, v tom $('container') ti zrejme chýba # alebo .

    tuto $('group'??x??'') chceš nejak použiť to $i? alebo... ?
    tom prípade by to bolo napr

    $('#group' + $i), plus je na spájanie stringov..

    a.. mno.. snáď ti toto trochu pomohlo :) vyskúšaj, prípadne napíš znova, trocha som sa v tvojej otázka stratil, takže fakt neviem, či som na ňu dostatočne odpovedal:)

  3. serus [ Streda 16.2.2011, 17:25 ]

    jo no chyby tam su, skor to php :D, no ale presne to som chcel, pomohlo diki moc

  4. yablko [ Streda 16.2.2011, 17:53 ]

    whee:)

  5. serus [ Sobota 19.2.2011, 17:07 ]

    http://serus.radio9.sk/form
    no tu je vysledok :P este by to chcelo prerobit na univerzalnejsie, nejaka validacia ci bolo setko vyplnene ad, mozno este pridam select, a inak na zajtra ten tut s form_helper-om je akurat to co potrebujem :D vdaka, ja som dost dlho rozmyslal ako nato ale asi by som na to live tak skoro nedosiel, vystup je zatial len pole, no este to treba zoradit a ulozit do db, a potom v CI generovat

  6. yablko [ Sobota 19.2.2011, 19:25 ]

    nice! :)

    tá animácia postupného zobrazenia by mohla byť rýchlejšia (hlavne pri odstraňovaní fieldu)
    toto pekne vyzerá, ale po čase to môže pôsobiť jaksi spomalene a ľudia majú radi svižné veci :)

    a tie text inputy majú, aspoň u mňa v opere, name="x" kde x je číslo, nemalo by tam radšej text4, podobne ako máš napr. textarea4?

    ale dobré to je, chválim:)
    pekné vedieť, že tutoriály pomáhajú:)