nette.ajax.js disables additional submit handlers

Notice: This thread is very old.
paolo
Member | 15
+
0
-

I have a form at which I add some hidden inputs on submit with an event handler assigned to the form at document.ready. While it works as expected with normal submission, if I activate AJAX by adding the ‘ajax’ class to the submit button, the function which adds the hidden inputs is no more executed.
Why? How can I prevent this “side effect”?

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Hi, sorry for delayed response. I added new feature to master: support for data-ajax-pass attribute. Event won't be prevented, if you use this attribute (but in case of forms, it's up to you to prevent its default submitting in some of your other callbacks).

paolo
Member | 15
+
0
-

Thank you for your reply.
But, how should I set this “attribute”?
In the script documentation (readme.md), I can't find any mention of attributes…

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

I should update documentation, yeah. Well, you use it by adding this attribute to ajaxified element.

{form myForm data-ajax-pass => TRUE}
...
{/form}

Or in form's definition:

$form->getElementPrototype()->data['ajax-pass'] = TRUE;
paolo
Member | 15
+
0
-

It works, but, as I could have realized by thinking better about the problem, it does not solves it. The attribute, in fact, removes the preventDefault() call, which (and this is the real problem) removes not only the default action, but any other submit event handler too.
So my function needs to be executed by the nette.ajax engine, before submission. I need to add this event handler on initialization and specify the function parameters too.
What is the best way to accomplish that?

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

You can do this:

$('form').submit(function (e) {
	$(this).netteAjax({
		before: function () {
			... whatever ...
		}
	}, e);
});

before callback will be executed before start of Ajax request. Will it suffice you?

paolo
Member | 15
+
0
-

vojtech.dobes wrote:
$(‘form’).submit(function (e) {

It does not work. To set the submit handler is just what I can't do, because it will be removed by the preventDefault call. What I need is to set the before handler directly, after the nette.init call. Something like this:

$(function () {
    $.nette.init();
    somethingIDontKnow.before = function () {
        my code
    };
});

The best thing, in my opinion, would be to specify settings (including event handlers and possibly any other user-definable parameter) as an argument of the init function, something like:

$(function () {
    $.nette.init({
        before: function () {
           my code
        },
        otherSetting: xyz,
        ...
    });
});

If you think it is a reasonably simple modification to do, I hope you will do it (and write some essential documentation). I figure out that you are probably very busy and this script is not a priority, but it is a really important piece of code for who want to use ajax in Nette, and it would be very nice if it could be used more easily, and all its features were documented (because many jquery scripts, including this one, are not so easy to understand and modify, if you are not a real javascript/jquery expert).
For now, can you suggest me some solution similar to the first code example above?

Last edited by paolo (2012-11-16 11:18)

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Please, could you describe me specifically what you are trying to achieve? I believe nette.ajax.js has many extension points now and I don't see reason to change the API. The special undocumented (my bad) atribute should prevent the preventDefault() call, so your handle shouldn't be removed. If it is not, that would be bug.

Basically you can write extensions – those will be called for every AJAX request. They consist of set of callbacks for specific events, and they are documented in detail in readme. If there is attribute settings for some of the callbacks, then if settings.nette is available (your code must check), you should have settings.nette.el, settings.nette.e items available (they contain element and event causing the request – they are always available in Ajax requests caused by default ajaxification).

You can also make Ajax request manually:

$.nette.ajax();

This method works same way as $.ajax(), but it accepts some extra arguments. If you provide it DOMElement and event as second and third arguments, it will process it for url, possibly form values etc. If not, you have to specify url manually as in standard jQuery ajax() call. You can also use some extra fields like off, and callbacks before and start – they are equal to callbacks in extensions.

And finally there is shortcut $().netteAjax(opts, e), just wrapper for what I described above.

I apologize for lacking documentation – I realized that many features are missing in it, and I will try to fix that today afternoon.

paolo
Member | 15
+
0
-

What I'm trying to achieve is simply to use the ‘normal’ procedure of setting the ‘ajax’ class in the submit button or the form element (this is what I forgot to specify, sorry), and add some submit event handlers in addition of that added by nette.ajax. In the specific case, I want to add to the submission some extra values taken from elements outside the form, and validate them. If I use the data-ajax-pass attribute I don't solve the problem because, in order to avoid non-ajax submission, I should call preventDefault somewhere in my code anyway. Because this function removes all previouly added event handlers, I need also to be sure that this call is done in the submit event handler added by first. I find this solution awkward and error prone, so I think it's better to get the additional submit handler(s) called by the nette.ajax functions.
The direct call to netteAjax or $.nette.ajax is something else I would to avoid, because I'd prefer to use the ‘ajax’ class setting mechanism, and minimize the difference between the pages needing that extra submit values and the others.
I've considered the possibility to add an extension, following the documentation. But I need to provide parameters (unrelated with the submit event and the element firing it) to the function, and I don't know how to do it. The extension should be:

$.nette.ext('myExtension', {
    before: function (param1, param2) {
	... some code ...
    }
});

How to specify param1 and param2 at (or immediately after) nette.ajax initialization?

Last edited by paolo (2012-11-16 22:35)

Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Added some documentation: https://github.com/…er/readme.md#…