0

i certainly missed something basic here, but i just want to see who can help me out here. on this website: www.hedenstugan.se i have a little booking form. when you change the dates in the upper select field, an ajax script is called and returns an updated lower date select field.

so far so good.

When however clicking on the orange submit button, i sort of expect the URL to the iframe to be changed too but it still keeps the first initial value.

My fancybox initiator looks like this:

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

I also tried this solution Passing a dynamic href into Fancybox Iframe but without success.

It looks like it all works fine, but the URL in the iframe only has a changed "checkin date" and not a checkout date - it picks up the initial value from the select field.

might have to do with the fact that the ulr is generated on document load and not on the actual click.

i also tried to set the HREF option with a function call, but that doesn't seem to be possible. like:

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

and then calling fancybox like:

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

But as i said - didn't work

What am i missing here? stared blind i guess.

Community
  • 1
  • 1
half-a-nerd
  • 313
  • 6
  • 21

2 Answers2

0

Wow! i found it myself. The answer is changing it inside the beforeLoad callback.

$("#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'
});

works like a charm.

JFK
  • 40,963
  • 31
  • 133
  • 306
half-a-nerd
  • 313
  • 6
  • 21
0

Surely you would be better simplifying this with:

$("#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'
});
RWAP
  • 37
  • 3