AJAX v quickstartu – funguje jen každý druhý klik

svezij

Ahojte, zvláštní věc… prošel jsem vytvoření ukázkové aplikace Nette – quickstart. Sem tam je tam nějaká chybka, ale ty nebylo těžké opravit. Dokončil jsem aplikaci a z Nette jsem zatím nadšený, tak uvidíme, až budu dělat něco těžšího (velmi brzy :-) ). Každopádně se mi objevila „chybka“ v poslední části quickstartu – AJAX funguje jen na každý druhý odkaz. Je to strašně divný, ale je to tak :-D.

Mám několik úkolů a postupně je chci odfajfkovat – označit za hotové. A děje se následující: kliknu na první, jde to přes AJAX, kliknu na druhý, stránka se reloaduje, na třetí – AJAX, na čtvrtý, reload… nechápu proč… nějaký nápad?

Díky :-).

vitkutny

tak mě napadá že při překreslování nenačítáš znova ten skript, příjdeš na stránku, nabinduje se click funkce na tlačítka, odklikneš, a pak se ti to celé překreslí a je třeba to znova nabindovat… využij jQuery funkci „live“ nebo „on“ (podle verze jQuery) a pomocí nich nabinduj click, vydrží to i po překreslení

svezij

Děkuji za odpověď, zkontroloval jsem a používám on :-(

/**
 * Všechny odkazy a formuláře s třídou AJAX bude odeslán AJAXem
 */
jQuery.ajaxSetup({
  cache: false,
  dataType: 'json',
  success: function(playload) {
    if (playload.snippets) {
      for (var i in playload.snippets) {
        $('#' + i).html(playload.snippets[i]);
      }
    }
  }
});

$(document).ready(function() {
  // odkazy
  $('a.ajax').on('click', function(event) {
    event.preventDefault();
    $.get(this.href);
  });

  // formuláře
  $('form.ajax').on('submit', function(event) {
    event.preventDefault();
    $.post(this.action, $(this).serialize());
  });
});

vitkutny

$(document).on('click','a.ajax',function(event){
	event.preventDefault();
	$.get(this.href);
});
$(document).on('submit','form.ajax',function(event){
	event.preventDefault();
	$.post(this.action, $(this).serialize());
});

zkus tohle

Vojtěch Dobeš

Doporučuju bez okolků nasadit nette.ajax.js. Stačí ho inicializovat. Automaticky zajaxuje elementy s CSS třídou ajax, prakticky tedy bude fungovat stejně jako tento kód. Ale celkově je lepší :).

$(function () {
	$.nette.init();
});

svezij

to vitkutny:
Super, funguje, já myslel, že ty dva kódy dělají totéž, mohl by ses, prosím, pokusit vysvětlit mi v čem je to jinak? Proč je „tvá“ varianta funkční?

to vojtech.dobes:
Děkuji, to rozhodně udělám, teď mi šlo jen o to, abych odladil ten příklad. Každopádně děkuji, hned tahám, zkouším a ukládám do budoucna :-)

vitkutny

$(document).on('submit','form.ajax',function(event){

jako první se uvede nějaký parent který se nepřekresluje ajaxem, nemusí být document ale nesmí se překreslovat.

$('header').on('submit','form.ajax',function(event){

aplikuje se na všechny form.ajax v elementu header

Edit: http://stackoverflow.com/…ut-live-does

Editoval vitkutny (21. 6. 2013 13:42)

svezij

Super, ještě jednou děkuji, dokumentace jQuery to vysvětluje ještě lépe. Každopádně jste mi pomohli a jsem moc rád. Jestli se to nějak dělá, můžete vlákno uzavřít a považovat za vyřešené (nevím, jestli to nějak můžu udělat já, nebo jestli se to vůbec dělá ;-) ). Pěkný víkend přeji :-)