Bug #34036
Multiple ajaxSubmit forms on same page cause problems
| Status: | Resolved | Start date: | 2012-02-17 | |
|---|---|---|---|---|
| Priority: | Should have | Due date: | ||
| Assignee: | Reinhard Führicht | % Done: | 0% |
|
| Category: | - | |||
| Target version: | v1.4 | |||
| Votes: | 0 |
Description
When inserting multiple forms which use ajaxSubmit the ajax submit url is always the same. This causes wrong answers when the result is delivered back.
Also i'm thinking that the submit js shouldn't be in the header but as inline script next to the submit. In my case where i have multiple forms on one page (one is also loaded via ajax into a lightbox), it's much better to have the submit js at the element.
I also suggest to switch the listener not to any ".Tx-Formhandler form" but to ".Tx-Formhandler #formID" to avoid conflicts with non-ajaxSubmit forms.
I wrote a patch which covers this and additionaly unbinds the ajaxValidation listeners before binding them because when you use jQuery.append() for example you get duplicate events for the validation. This does also happen with ajaxSubmit in the same case (jQuery.append()), so i rewrote this from using jQuery.live() to the suggested method for jQuery >1.4.3 jQuery.delegate() method and do an jQuery.undelegate() before.
Maybe basically it would be good to provide templates for the js code for both submit and validation to let the developer provide his/her own implemenatation.
Associated revisions
New setting "formSelector" for AjaxHandler_JQuery (fixes #34036)
New setting "formSelector" for AjaxHandler_JQuery (fixes #34036)
History
Updated by Kevin Ulrich Moschallski over 1 year ago
- File 34036.patch added
Updated by Kevin Ulrich Moschallski over 1 year ago
Sorry, forgot to mention that this would need additional markers in the master template:
<!-- ###master_ajax-submit### -->
<div class="type-button">
<input type="hidden" class="url_ajax-submit" value="###url_ajax-submit###" />
<input type="submit" ###submit_nextStep### class="button submit ###validation-status###" value="###LLL:submit###" />
<script type="text/javascript">###js_ajax-submit###</script>
<div class="clear"></div>
</div>
<!-- ###master_ajax-submit### -->
I know this would be a breaking change for ajaxSubmit, but i couldn't find a good implementation without getting a breaking change.
Updated by Martin Melcher about 1 year ago
I've temporarily fixed this problem the following way:
I replaced in Classes/AjaxHandler/Tx_Formhandler_AjaxHandler_JQuery.phpvar requestURL = "/index.php?id=' . $GLOBALS['TSFE']->id . '&eID=formhandler-ajaxsubmit&randomID=' . $this->globals->getRandomID() . '";
with the following code:var randomID = ' . $this->jQueryAlias . '("input[name*=\'randomID\']",form).val();
var requestURL = "/index.php?id=' . $GLOBALS['TSFE']->id . '&L=' . $GLOBALS['TSFE']->sys_language_uid . '&eID=formhandler-ajaxsubmit&randomID=";
requestURL += randomID;
The problem with the current implementation seems to be that the requestURL always contains the randomID of the last form inserted. The code above takes care, that each form is submitted with it's own randomID.
'&L=' . $GLOBALS['TSFE']->sys_language_uid
was added to the requestURL in order to get the ajax reply in the correct language. Otherwise always the default language is being used for ajax replys which is a problem in multi-language sites.
The line' . $this->jQueryAlias . '(".Tx-Formhandler INPUT[type=\'submit\']").attr("disabled", "disabled");
needs to be changed into' . $this->jQueryAlias . '(".Tx-Formhandler INPUT[type=\'submit\']",form).attr("disabled", "disabled");
and inserted after the form variable was declared. Otherwise the submit buttons of all other forms will be deactivated once one form was submitted.
Updated by Reinhard Führicht 11 months ago
- File 34036_v2.patch added
- Status changed from New to Needs Feedback
- Assignee set to Reinhard Führicht
- Target version set to v1.4
I did some debugging and tested with 2 identifcal forms on a single page.
I can understand the need for a different way of selecting the forms, but I can't reproduce the problems you describe with the "randomID".
Please find and test the attached patch which changes the way of selecting the forms with jQuery if a "formID" is set in Typoscript.
Additionally, I don't think it is necessary to privde templates for the JS code as it is quite simple to use your own components instead of the existing ones.
Updated by Reinhard Führicht 9 months ago
- Status changed from Needs Feedback to Resolved