Question

我正在尝试修改Joomla组件以实现一些ajax功能，以使我的网站用户更加简化。我已经改变了下面的信息以保持项目有点匿名，因为我是偏执狂： - ）

我想要实现的目标很简单：

- ＆GT;用户登陆xyz组件的“订单”页面

- ＆GT;如果订单页面上没有此用户的送达地址，请提供一个链接以创建一个

- ＆GT;当用户点击“添加地址”时，会出现一个模态窗口，并向“addaddress”页面发出ajax请求，该页面具有添加地址的表单

- ＆GT; Modal不显示整页，而只显示表单和必要（必填）表单字段

- ＆GT;用户输入地址信息并单击按钮以提交表单。



- ＆GT;这些字段经过验证然后发布

- ＆GT;模态关闭

- ＆GT;在原始“订单”页面上具有交货地址的字段将被刷新，现在包括新地址。这不应该刷新整个页面，因为用户可能已将数据放入其他表单元素中。这很重要。

好的，所以现在你知道我想要实现的目标，让我向你介绍我现在拥有的东西。

- ＆GT;用户登陆xyz组件的“订单”页面

- ＆GT;如果订单页面上没有此用户的送达地址，请提供一个链接以创建一个

我编写了一个简单的php if语句，用于创建一个带有“添加地址”和id“addNewAddress”文本的锚链接

- ＆GT;当用户点击“添加地址”时，会出现一个模态窗口，并向“addaddress”页面发出ajax请求，该页面具有添加地址的表单

我正在使用来自http://simplemodal.plasm.it

的名为SimpleModal的mootols插件

- ＆GT; Modal不显示整页，而只显示表单和必要（必填）表单字段

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

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

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

- ＆GT;用户输入地址信息并单击按钮以提交表单。

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

- ＆GT;这些字段经过验证然后发布

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

- ＆GT;模态关闭

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

- ＆GT;在原始“订单”页面上具有交货地址的字段将被刷新，现在包括新地址。这不应该刷新整个页面，因为用户可能已将数据放入其他表单元素中。这很重要。

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

我想我一直都很清楚，但是如果你还需要什么，请告诉我。

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

Answer 1

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

您可以提交表格：$('myForm').fireEvent('submit');

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

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

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

formValidate - （函数）回调，在表单验证完成时执行;这个函数传递三个参数：一个布尔值（如果表单通过验证，则为true）;形式元素;和onsubmit事件对象（如果有）（否则，传递未定义）。

我不确定为什么在以编程方式触发提交时未提交表单，但无论如何，您可以在此函数中添加一个新的.submit()来检查验证程序的布尔结果。

所以你可以这样做：

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

Joomla 2.5模态弹出组件形式

1 个答案:

演示here