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中的网址只有更改的“签入日期”，而不是结帐日期 - 它会从选择字段中获取初始值。

可能与文件加载而不是实际点击时生成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'
});

jquery fancybox iframe更改了href

2 个答案: