Joomla 2.5 Modular Popup Form

Question

I am trying to modify the Joomla component to achieve some ajax functionality to make things a little more streamlined for users of my site. I changed the information below to make the project a bit anonymous because I'm paranoid :-)

What I want to achieve is just in my head:

-> The user gets to the "order" page in the xyz component

-> If for this user there are no delivery addresses on the order page, specify the link to create

-> When the user clicks "Add Address", a modal window appears and executes an ajax request to the "addaddress" page, which has the form for adding an address

-> Modal does not display the full page; instead, it displays only the form and the required (required) form fields

-> User enters address information and click button to submit the form.

-> Fields are checked and then published

-> Modal closure

-> The field that has delivery addresses on the original page of the order is updated and now includes a new address. This should not refresh the entire page, as the user could put data in other form elements. It is important.

OK, so now that you know what I want to achieve, let me introduce you to what I have.

-> The user gets to the "order" page in the xyz component

-> If for this user there are no delivery addresses on the order page, specify the link to create

I wrote a simple php if statement that creates a binding with the text "Add Address" and the identifier "addNewAddress"

-> When the user clicks "Add Address", a modal window appears and executes an ajax request to the "addaddress" page, which has the form for adding an address

I am using a mootols plugin called SimpleModal from http://simplemodal.plasm.it

-> Modal does not display the full page; instead, it displays only the form and the required (required) form fields

I extended the modal functionality to allow me to insert some mootools filtering because I only want to display the form, nothing more. I added this as a new parameter called getSomething , which I can enter if I need.

 //SIMPLEMODAL $("addNewAddress").addEvent("click", function(){ var SM = new SimpleModal({"width":600}); SM.addButton("Action button", "btn primary", function(){ $('addressForm').submit(); this.hide(); }); SM.addButton("Cancel", "btn"); SM.show({ "model":"modal-ajax", "title":"New address", "param":{ "url":"index.php?option=com_address&modal=true", "getSomething":"#addressForm", "onRequestComplete": function(){} } }); }); 

And this is the function that it calls:

 else if (param.getSomething.match(elid)) { // Request HTML this.request = new Request.HTML({ evalScripts:false, url: param.url, method: 'get', onRequest: function(){}, onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){ var f = responseElements.filter(param.getSomething); $('simple-modal').removeClass("loading"); $('simple-modal').getElement(".contents").adopt(f); param.onRequestComplete(); // Execute script page loaded eval(responseJavaScript) // Resize this._display(); // Add Esc Behaviour this._addEscBehaviour(); }.bind(this), onFailure: function(){ $('simple-modal').removeClass("loading"); $('simple-modal').getElement(".contents").set("html", "loading failed") } }).send(); } 

* Now everything until this moment I managed to work, but I can not understand the next part. *

-> User enters address information and click button to submit the form.

At the end of the ajax request url, you can notice that I sent a modal = true request, so I can hide certain elements in the form that I don’t need to display in the modal window - the form of my own submit button is hidden when called from the modal.

-> Fields are checked and then published

If I call the "addaddress" page without a modal form, it has its own validation. However, using the modality, when I click the "Submit" button, verification does not occur, and the address is added without any verification. I need to do some field validation using an offline validation inside the module itself.

-> Modal closure

At the moment, when the form is posted, I am redirected to the " viewaddresses " page, but I'm sure I can fix it myself. Instead, I just want the modal function to close.

-> The field that has delivery addresses on the original page of the order is updated and now includes a new address. This should not refresh the entire page, as the user could put data in other form elements. It is important.

This is self-evident, but I'm not sure where to start.

I think I was as clear as I can, but if you need anything else, let me know.

I really appreciate any help you can provide.

Answer 1

You may be missing out on how to run the form.

• You can submit the form with: $('myForm').fireEvent('submit');

So, using your example, I changed the code of one of the modal buttons to:

 SM.addButton("Submit button", "btn primary", function () { $('addressForm').fireEvent('submit'); }); 

In Mootools Form.Validator, you can capture the formValidate event. Description:

formValidate - (function) callback to execute when form validation is completed; Three arguments are passed to this function: boolean (true if the form has passed validation); form element; and the onsubmit event object, if any (otherwise passed undefined).

I am not sure why the form is not submitted when submit is launched programmatically, but in any case you can add a new .submit() inside this function, which checks the logical result of the validator.

So you can do the following:

 new Form.Validator.Inline(myForm, { onFormValidate: function (bool, element) { if (bool) { element.submit(); } } 

Demo here