Joomla 2.5 modal popup component form

Question

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

What I want to achieve is simple in my head:

-> User lands on 'order' page in xyz component

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

-> When user clicks 'Add an address' a modal window appears and does an ajax request to the 'addaddress' page which has the form to add an address

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

-> User inputs address information and clicks button to submit the form.

-> The fields are validated then posted

-> The modal closes

-> The field which has the delivery addresses on the originating 'order' page is refreshed and now includes the new address. This should not refresh the entire page as the user might have put data into the other form elements. This is important.

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

-> User lands on 'order' page in xyz component

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

I have written a simple php if statement that creates an anchor link with the text 'Add an address' and id 'addNewAddress'

-> When user clicks 'Add an address' a modal window appears and does an ajax request to the 'addaddress' page which has the form to add an address

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

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

I have extended the functionality of the modal to allow me to inject some mootools filtering because I only want to display the form, nothing else. I have added this as a new parameter called getSomething that I can inject if I need to.

//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 up to this point I have managed to get working but I can't figure out the next part. *

-> User inputs address information and clicks button to submit the form.

At the end of the ajax request url, you might notice that I sent the modal=true request, this is so that I can hide certain elements on the form that I don't need to be displayed in the modal window - the form's own submit button is hidden when called from the modal.

-> The fields are validated then posted

If I call the 'addaddress' page without the modal, the form has it's own validation. Using the modal however, when I click submit, no validation happens and the address is added without any validation. I need to implement some validation to the fields using a standalone validation from within the modal itself.

-> The modal closes

At the moment, when the form is posted I get redirected to the 'viewaddresses' page but I'm confident I can fix this on my own. Instead I just want the modal to close.

-> The field which has the delivery addresses on the originating 'order' page is refreshed and now includes the new address. This should not refresh the entire page as the user might have put data into the other form elements. This is important.

This is self explanatory but I'm not sure where to even begin.

I think I've been as clear as I can be, but if you need anything else, please let me know.

I really appreciate any help you can provide.

a link or a fiddle would be easier to understand your page/behavior. Btw what form validation are you using? mootools formcheck? — Sergio
maybe it's not correct for your use case, but can't you just assign the fields of the main form from the modal form and let the main form handle validation? — Riccardo Zorn
Riccardo, I'm not sure how that would be implemented. Its very important to make this as simple for the users so I don't mind doing some dirty work in the background. Just out of interest, does anyone know how I could validate forms in SimpleModal using mootools.floor.ch/en/demos/formcheck — Rich
@Sergio the component is using mootools validation but I don't have to stick with it. I'm currently looking at formcheck but I don't know how to use it to validate forms inside the modal window. Thanks for your input, Rich — Rich
@Rich, a bit unclear for me what you need can you say what is missing in this example: jsfiddle.net/L9pEk — Sergio

Sergio Sergio · Accepted Answer · 2013-09-03T17:41:15

What you are maybe missing is how to trigger a form submit.

You can submit a 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 the Mootools Form.Validator you can capture the formValidate event. Description:

formValidate - (function) callback to execute when the form validation completes; this function is passed three arguments: a boolean (true if the form passed validation); the form element; and the onsubmit event object if there was one (otherwise, passed undefined).

I'm not sure why the form is not submited when the submit is fired programatically, but anyway you can add a new .submit() inside this function that checks the validator boolean result.

So you can do like this:

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

Joomla 2.5 modal popup component form

1 Answers

Demo here