jquery fancybox iframe 更改href

Question

我当然错过了一些基本的东西，但我只是想看看谁能帮助我。 在这个网站上：www.hedenstugan.se 我有一个小小的预订表格。 当您更改上部选择字段中的日期时，将调用一个 ajax 脚本并返回更新的下部日期选择字段。

到目前为止一切顺利。

然而，当点击橙色提交按钮时，我有点希望 iframe 的 URL 也会被更改，但它仍然保留第一个初始值。

我的 fancybox 启动器如下所示：

$("#b_availSubmitButton_foo").fancybox({
        'overlayColor'      : '#000',
        'width'             : '90%',
        'height'            : '90%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe',
        'href'              : $("#b_availFrm").prop("action")
                                +'?aid='+$("input[name=aid]").val()
                                +'&hotel_id='+$("input[name=hotel_id]").val()
                                +'&lang='+$("input[name=lang]").val()
                                +'&pb='+$("input[name=pb]").val()
                                +'&stage='+$("input[name=stage]").val()
                                +'&hostname='+$("input[name=hostname]").val()
                                +'&checkin_monthday='+$("select[name=checkin_monthday]").val()
                                +'&checkin_year_month='+$("select[name=checkin_year_month]").val()
                                +'&checkout_monthday='+$("select[name=checkout_monthday]").val()
                                +'&checkout_year_month='+$("select[name=checkout_year_month]").val()
});

我也试过这个解决方案Passing a dynamic href into Fancybox Iframe，但没有成功。

看起来一切正常，但 iframe 中的 URL 仅具有更改的“签入日期”而不是签出日期 - 它从选择字段中获取初始值。

可能与 ulr 是在文档加载时生成而不是在实际点击时生成的事实有关。

我还尝试通过函数调用设置 HREF 选项，但这似乎是不可能的。喜欢：

function buildHref(){
    return $("#b_availFrm").prop("action")
    +'?aid='+$("input[name=aid]").val()
    +'&hotel_id='+$("input[name=hotel_id]").val()
    +'&lang='+$("input[name=lang]").val()
    +'&pb='+$("input[name=pb]").val()
    +'&stage='+$("input[name=stage]").val()
    +'&hostname='+$("input[name=hostname]").val()
    +'&checkin_monthday='+$("select[name=checkin_monthday]").val()
    +'&checkin_year_month='+$("select[name=checkin_year_month]").val()
    +'&checkout_monthday='+$("select[name=checkout_monthday]").val()
    +'&checkout_year_month='+$("select[name=checkout_year_month]").val()
    ;
});

然后像这样调用fancybox：

        $.fancybox.open({
        href: buildHref,
        type: 'iframe'
    });

但正如我所说 - 没用

我在这里缺少什么？我猜是瞎了眼。

Answer 1

哇！我自己找到了。答案是在 beforeLoad 回调中更改它。

$("#b_availSubmitButton").fancybox({
        beforeLoad : function() {
            this.href = $("#b_availFrm").prop("action")
            +'?aid='+$("input[name=aid]").val()
            +'&hotel_id='+$("input[name=hotel_id]").val()
            +'&lang='+$("input[name=lang]").val()
            +'&pb='+$("input[name=pb]").val()
            +'&stage='+$("input[name=stage]").val()
            +'&hostname='+$("input[name=hostname]").val()
            +'&checkin_monthday='+$("select[name=checkin_monthday]").val()
            +'&checkin_year_month='+$("select[name=checkin_year_month]").val()
            +'&checkout_monthday='+$("select[name=checkout_monthday]").val()
            +'&checkout_year_month='+$("select[name=checkout_year_month]").val()
            ;
        },
        'overlayColor'      : '#000',
        'width'             : '90%',
        'height'            : '90%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'
});

像魅力一样工作。

Answer 2

当然，你最好简化一下：

$("#b_availSubmitButton").fancybox({
    beforeLoad : function() {
        this.href = $("#b_availFrm").prop("action")
        +'?' + $("#b_availFrm").serialize()
    },
    'overlayColor'      : '#000',
    'width'             : '90%',
    'height'            : '90%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});