nette.ajax.js disables additional submit handlers
- paolo
- Member | 15
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
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).
- Vojtěch Dobeš
- Gold Partner | 1316
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
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
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
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
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
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)