• Floatbox Forum » Support & General Discussion » javascript fb.start to iframe executes opened file twice

javascript fb.start to iframe executes opened file twice

Page: 1

Author Post
malibu
#1 Thu Feb 14, 2013 3:24 pm
Member
Registered: Feb 2013
Posts: 30
Dear Admin,

i'm having following problem:

following code simplified inside a html page:

  
<form name="signup" method="post" action="javascript&#058;fb.start(&#039;signup_validate.html&#039;, &#039;caption:validate&#039;)">
<button type="submit" onclick="return ajaxUpdate()">submit</button>


The ajaxUpdate on the button is for doing some magic on the other form vars previous to sending the form.
The signup_validate.html gets opened fine as an iframe, but flickers once (a site with 5k of terms & policy and a lot of php & javascripting) right after loading.
When debugging, it's scripts inside got called twice, even when the above reference to it is the only one.

If neccesary, i can make you the development sites accessable - pls. send me a PM if you need get access.

Thanks and best regards,
Wolfgang
admin
#2 Thu Feb 14, 2013 4:52 pm
Administrator
Registered: Aug 2008
Posts: 3382
There were a couple of historical bugs with iframe and ajax content that would get loaded twice under certain circumstances, but these were fixed in release 4.25 and 5.4.1. I wonder if you're using an older version of Floatbox? Our first step is to get the latest-greatest from the download page and see if the problem persists in this version.
malibu
#3 Thu Feb 14, 2013 5:22 pm
Member
Registered: Feb 2013
Posts: 30
thanks for your quick reply.
i've been developing under

/*
* Floatbox 5.7.1
* January 27, 2013
*
which shouldn't be affected by this issue if i understood the changelog right.
admin
#4 Thu Feb 14, 2013 5:27 pm
Administrator
Registered: Aug 2008
Posts: 3382
I'll need to see the page online and in action then. Can you please send me access details and steps to reproduce either through a PM on this forum or the contact form on this site.

Thanks...
admin
#5 Fri Feb 15, 2013 4:06 am
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for getting me into the page.

I'm having a hard time figuring out the data-flow when that form is submitted. There appears to be two fetches occurring on submit: one called from the assigned onclick action and one from a "javascript:" URL assigned to the action attribute. I suspect the multiple fetches are occurring due to these multiple activities.

Might I suggest a much cleaner and simpler way to load the results of a form submission into a floatbox. Please see this forum thread for details.

The example in that thread serializes the form and uses a GET request. If you must have a POST request, that's also easily accomplished with a call to fb.ajax() and invoking fb.start from the 'success' callback. It would look something like:
onsubmit="handleForm( this ); return false;"
<script>
function handleForm ( theForm ) {
    fb.ajax( {
        source: &#039;signup_validate.html&#039;,
        postData: theForm,
        success: function ( xhr ) {
            fb.start( xhr.responseText, &#039;caption:register&#039; );
        }
    } );
}
</script>
The 'responseText' returned by the source page should just be the snippet of HTML to be shown in the floatbox and should not be a full document with <html>, <head> or <body> elements. See the API reference for usage details.

Whatever approach is taken, I suggest attaching the script bits to the form's 'onsubmit' event (not the button's 'onclick' event) and ensuring that the onsubmit handler returns false so the form's action does not happen.
« Last edit by admin on Fri Feb 15, 2013 4:19 am. »
malibu
#6 Fri Feb 15, 2013 6:26 am
Member
Registered: Feb 2013
Posts: 30
Dear Admin,
thanks, i made a redesign on the call handling based on your input and now i don't have this issue anymore.
Best regards,
Wolfgang

Page: 1

• Floatbox Forum » Support & General Discussion » javascript fb.start to iframe executes opened file twice