php - Joomla 2.5模态弹出组件表单

Question

我正在尝试修改 Joomla 组件以实现一些 ajax 功能，从而为我的网站用户简化一些操作。我更改了以下信息以使该项目保持匿名，因为我很偏执:-)

我想实现的目标很简单:

-> 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.

好的，现在你知道我想要实现什么，让我向你介绍一下我目前拥有的东西。

-> 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

我写了一个简单的 php if 语句，它创建了一个带有文本“Add an address”和 ID“addNewAddress”的 anchor 链接

-> 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

我正在使用来自 http://simplemodal.plasm.it 的名为 SimpleModal 的 mootols 插件

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

我已经扩展了模态的功能以允许我注入(inject)一些 mootools 过滤，因为我只想显示表单，没有别的。我已将其添加为名为 getSomething 的新参数，如果需要，我可以将其注入(inject)。

//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(){}
        }
      });
});

这是它调用的函数:

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();
        }

*现在，到目前为止，我已经设法开始工作，但我无法弄清楚下一部分。 *

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

在 ajax 请求 url 的末尾，您可能会注意到我发送了 modal=true 请求，这样我就可以隐藏不需要在模态窗口中显示的表单上的某些元素 -当从模式调用时，表单自己的提交按钮被隐藏。

-> The fields are validated then posted

如果我在没有模式的情况下调用“addaddress”页面，则表单有自己的验证。但是，使用模态，当我单击提交时，不会进行任何验证，并且会在没有任何验证的情况下添加地址。我需要使用模态本身内的独立验证对字段实现一些验证。

-> The modal closes

目前，当表单发布时，我被重定向到“viewaddresses”页面，但我相信我可以自己解决这个问题。相反，我只想关闭模式。

-> 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.

这是不言自明的，但我不确定从哪里开始。

我想我已经尽可能清楚了，但如果您需要任何其他信息，请告诉我。

非常感谢您提供的任何帮助。

Answer 1

您可能缺少的是如何触发表单提交。

• 您可以通过以下方式提交表单:$('myForm').fireEvent('submit');

因此，使用您的示例，我将其中一个模态按钮的代码更改为:

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

在 Mootools Form.Validator 中，您可以捕获 formValidate事件。说明:

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).

我不确定为什么当以编程方式触发提交时表单没有提交，但无论如何你可以在这个函数中添加一个新的 .submit() 来检查验证器 bool 结果。

所以你可以这样做:

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

演示 here