Něco jako nette.js s jQuery

$("a.ajax").live("click", function (event) {
    event.preventDefault();
    $.get(this.href);
});

má to drobnou vadu nevím jak ji vyřešit. Na tomto chování se to pokusím znázornit.

• levé tlačítko – OK – ajaxový požadavek
• pravé tlačítko – Opera vyvolá contextmenu, Firefox vyvolá ajaxový požadavek
  • Opera může přes contextmenu otevřít odkaz do nového tabu/okna
• kolečko (které standardně otevírá do novýho tabu) vyvolá u obou jen ajaxový požadavek.

Tohle chování mi nepřijde uplně ideální… Rád bych aby to fungovalo tak jak má:

• levé – ajax
• pravé – menu
• prostřední – tab.

Jenže jak? :)

díky, navedl jsi mě na správné místo…

$("a.ajax").live("click", function (event) {
        if (event.which != 1) {
            return true;
        }
        event.preventDefault();
        $.get(this.href);
        return false;

});

Editoval enoice (24. 11. 2009 18:19)

uestla napsal(a):

Zdravím – chci se optat a možná i dát menší feature request…

Ve skriptu AJAX formulářů se kontroluje, jestli objekt, na kterém je metoda ajaxSubmit() volána, je odesílací tlačítko a nebo formulář samotný. Formulář jde ale odeslat ještě inputem typu image – s tím je ale zároveň spojeno i odeslání x-ové a y-ové souřadnice…

Nemá někdo spásný nápad, jak by se do skriptu dala zapracovat i možnost AJAXově odeslat formulář i pomocí obrázkového tlačítka?

Pouhé následující „vylepšení“ stávajícího skriptu je jenom poloviční záplata:

Ahoj, zrovna jsem narazil na ten samy problem…
Pokud nepotrebujete souradnice kliknuti (coz je jen ta polovicni zaplata), staci tenhle hotfix:

- 16:		if (this.is(":submit")) {
+ 16:		if (this.is(":submit, :image")) {

-19:
+19: 	        if (this.is(":image")) {
+20:                sendValues[this.attr("name")+".x"] = "0";
+21:                sendValues[this.attr("name")+".y"] = "0";
+22:            }

• je jeste treba dodat do kodu, ktery zajaxovani formularu provadi, aby bral i input:image.

Po dlouhem patrani jsem ale nalezl i vice „systemove“ reseni (to ovsem samozrejme vyzaduje trochu vetsi zasah).
(zmeny jsou na radcich s * na zacaatku)

 jQuery.fn.extend({
*	ajaxSubmit: function (callback, data) {
		var form;
		var sendValues = {};

		// submit button
*		if (this.is(":submit") || this.is(":image")) {
			form = this.parents("form");
                        sendValues[this.attr("name")] = this.val() || "";
*                       if (this.is(":image")) {
*                           if (data && data['submittedBy'] &&
*                                   data['submittedBy'] == 'mouse') {
*                               sendValues[this.attr("name")+".x"] = data['x'];
*                               sendValues[this.attr("name")+".y"] = data['y'];
*                           } else {
*                               sendValues[this.attr("name")+".x"] = "0";
*                               sendValues[this.attr("name")+".y"] = "0";
*                           }
*                       }

		    // form
    		    } else if (this.is("form")) {
                        form = this;

		    // invalid element, do nothing
		    } else {
			return null;
		    }

To by byla prvni cast zmen, ted jeste jak detekovat souradnice kliknuti. Na stranky, kde chci zajaxovat formulare, vkladam bezne tenhle kod:

$(function () {
        //send on forms
        $("form").livequery("submit", function () {
                $(this).ajaxSubmit(function (payload) {
                 jQuery.nette.success(payload);
                });
                return false;
        });
        //send by button
        $("form :submit").livequery("click", function () {
                $(this).ajaxSubmit(function (payload) {
                 jQuery.nette.success(payload);
                });
                return false;
        });
});

Tenhle kod je treba upravit na nasledujici:

$(function () {
*       var submittedBy = {};
        //send on forms
        $("form").livequery("submit", function () {
                $(this).ajaxSubmit(function (payload) {
                 jQuery.nette.success(payload);
                });
                return false;
        });
        //send by button
        $("form :submit").livequery("click", function () {
                $(this).ajaxSubmit(function (payload) {
                 jQuery.nette.success(payload);
                });
                return false;
        });
*       $("input:image").livequery("click", function (e) {
*               data = {'submittedBy':submittedBy[$(this).attr('name')]};
*               if (data['submittedBy'] == 'mouse') {
*                   data['x'] = Math.floor(e.pageX - $(e.target).offset().left);
*                   data['y'] = Math.floor(e.pageY - $(e.target).offset().top);
*               }
*
*               $(this).ajaxSubmit(function (payload) {
*                jQuery.nette.success(payload);
*               }, data);
*               return false;
*       });
*
*       $("input:image").livequery("mousedown", function (e) {
*           submittedBy[$(this).attr('name')] = "mouse";
*       });
*
*       $("input:image").livequery("keypress", function (e) {
*           submittedBy[$(this).attr('name')] = "key";
*       });
});

Mozna by se (alespon prvni cast) tenhle fix dal zaradit do verze v extras.

Ahoj Honzo.. paradni pocin.

Hele chci se zeptat, jak by se dalo udelat, aby se mi ajax spinner zobrazil i pri odesilani formulare? U ajaxovych odkazu ho uz mam, ale nevim jak s formulari.

No a idelane aby se to chovalo takto: U odkazu aby se zobrazil spinner tam, kde jsem na odkaz kliknul (to uz mam viz) a u formularu, aby se zobrazil uprostred daneho formulare (nebo prekreslovane oblasti), formulari se nastavil nejaky efekt – treba fadeTo(0.5) a aby se do nej nedalo behem odesilani pozadavku klikat (neni ale nutne).

Pouzivam Nette 0.9.6 (php5.2) a skripty Ajax s jQuery (jquery.nette.js), Ajaxové formuláře (jquery.ajaxform.js) a jquery-1.4.3.min.js

Dekuju moc !

Zkousel jsi nejaky hash?

Kvůli DependedSelectBoxu jsem musel použít tento skript. Ale nastal mi problém. Ve svém projektu využívám jQuery-ui a konkrétně, když používám tahání obsahu přes ajax v tabech, tak mi to přestalo po nalinkování toho souboru fungovat. Jak ho oddělám tak to zase funguje. Takže mi buď funguje jedna věc a nebo druhá ale nikdy ne obě :( Víceméně ten obsah se natáhne přes ajax, ale nevypíše se. Když si přes Firebug konzolu nechám vypsat co se děje, tak data dostane, ale tab pořád píšeš error. Už jsem zkoušel i různý pořadí souborů, ale pořád nic. Nevíte někdo co s tím?

Ahoj,

pokusil jsem se upravit script pro použití v unobtrusive javascriptu pro jquery 1.9 (kde stará verze nefunguje kvůli odstranění metody .live)

$(document).on("click", function (event) {
	if ($(event.target).is('a.ajax')) {
		event.preventDefault();
		$.get(event.target.href);
	}
});

prosím o kontrolu a případné mergnutí do stránky addonu

Mám takový malý problém s tím, že chci filtrovat data, která se budou posílat. Potřebuji odfiltrovat všechny formulářové prvky jejichž rodič <tr> má classu 'nopost'.

<form id="myForm" ... >
    <table>
        <tr class="nopost">
            <td><input /></td>
        </tr>
        <tr>
            <td><input /></td>
        </tr>
        ...
    </table>
</form>

Zkusil sem tedy menší zásah do addonu:

// get values
//var values = form.serializeArray();

var values = $('*', '#'+this.attr('id')).filter(function() {
    return !$(this).closest('.nopost').length;
}).serializeArray();

// tohle  funguje
// var values = $('*', '#'+this.attr('id')).serializeArray();

Post se odesílá správně (se správně vyfiltrovanými daty), ale na straně presenteru se už nic nestane. Po odkomentování 2. řádku (původního) nebo posledního a zakomentování 4–6 vše funguje v pohodě. Netušíte někdo, kde by mohl být zakopaný pes? Vadí nějak nette, že v postu nejsou všechny formulářové prvky?

EDIT: orig. soubor pro srovnání: https://files.nette.org/….ajaxform.js

EDIT 2:
Zkoušel sem sledovat co odchází v POSTu a co přichází jako response a zajímavé je, že při odeslání nevyfiltrovaných dat mi příjde jako odpověď:

{
  "name": "Content-Type",
  "value": "application/json"
},

v contentu jsou potom jen dané snippety.

Ale pokud data profiltruju, tak dostávám zpět:

{
  "name": "Content-Type",
  "value": "text/html; charset=utf-8"
},

no a v contentu je potom celá stránka (beze změn od odeslané). Nevím proč je to takhle, ale příjde mi, jako by se obslužná metoda

public function launchFormSubmitted($form)

vůbec nezavolala při vyfiltrovaném POSTu.

Tady jsou k nahlédnutí request a response:

• Nefiltruji (funguje) http://50.57.148.184/…nofilter.txt
• Filtruji (nefunguje) http://50.57.148.184/…s/filter.txt

Editoval Nich (24. 4. 2013 0:42)