• Floatbox Forum » Support & General Discussion » Opening an ajax responseText in a FB?

Opening an ajax responseText in a FB?

Page: 1

Author Post
Juel
#1 Wed Jan 29, 2014 2:25 pm
Member
Registered: Jan 2014
Posts: 8
Hi :)
I have read the manual, but i cant seem to figure this out.

I have a button that activates a AJAX java script, normally I return the answer from the php page like this to a div:

function handleHttpResponse2(){
if(http.readyState == 4){
document.getElementById('content').innerHTML = http.responseText;

}
}

How do I make a FB popup instead?

function handleHttpResponse5(){
if(http.readyState == 4){
fb.ajax(http.responseText);
}
}

OR fb.activate(http.responseText);

Dont Work :/
I dont understand your documentation..

Can You help me?
admin
#2 Wed Jan 29, 2014 2:52 pm
Administrator
Registered: Aug 2008
Posts: 3382
Of course I can help you. :)

There are two ways to start a floatbox: by clicking on a link that has the "floatbox" class assigned, and by calling the fb.start() API function.

Set the "type:ajax" option to tell Floatbox to use AJAX when fetching the content from the href URL.

A link might look like this:
<a href="mySource.php" class="floatbox" data-fb-options="type:ajax">do it</a>

Doing the same thing from a button using fb.start():
<button type="button" onclick="fb.start( &#039;mySource.php&#039;, &#039;type:ajax&#039; );">do it again</button>
Juel
#3 Thu Jan 30, 2014 7:39 am
Member
Registered: Jan 2014
Posts: 8
That was what i hoped ;)

Ok, but i dont get the fb.start(): function..
How can I assign a AJAX script to that function? As it is now, when I call a AJAX script, it fetches document.getElementById('Formfield').value; from the php page and passes is as a POST to a new php page.

If I do this:
<button type="button" onclick="fb.start( 'mySource.php', 'type:ajax' );">do it again</button>

How can it pass on the form values?

can I do a :

<button type="button" onclick="fb.start( myscript();, 'type:ajax' );">do it again</button> ?

Im a Little confused :D
admin
#4 Thu Jan 30, 2014 8:05 am
Administrator
Registered: Aug 2008
Posts: 3382
To do a form POST, you could use the fb.ajax() function and show the response to that POST using fb.start from a completion callback. Like this:
fb.ajax({
    source: &#039;myFormReceiver.php&#039;,
    postData: &#039;myFormId&#039;,
    success: function ( xhr ) {
        fb.start( xhr.responseText );
    }
});

If you change your backend to handle a GET request using querystring parameters, you could use the fb.start() function directly as follows:
fb.start( &#039;myFormReceiver.php?&#039; + fb.serialize( &#039;myFormId&#039; ), &#039;type:ajax&#039; )

Be sure to have a gander at the API reference to understand the available functions, their parameters, and what they do.
Juel
#5 Thu Jan 30, 2014 11:45 am
Member
Registered: Jan 2014
Posts: 8
 
fb.ajax({
    source: &#039;myFormReceiver.php&#039;,
    postData: &#039;myFormId&#039;,
    success: function ( xhr ) {
        fb.start( xhr.responseText );
    }
});


Works allmost :) When I say allmost, its becurse I have a div that is Ajax updated with hidden fields, and the fb.ajax dont collect them, but ordenary Ajax with document.getElementById('Hiddenfield').value; does, and I need the fields. :/

Then I thought "ohh well ill just use the Success part to collect them." But how does that part Work?

If i type:
fb.ajax({
    source: &#039;myFormReceiver.php&#039;,
    postData: &#039;myFormId&#039;,
    success: CollectInfo ( xhr ) {
        fb.start( xhr.responseText );
    }
});


Where "CollectInfo" is my function it gives me a:
SyntaxError: missing } after property list
success: CollectInfo(xhr) {

Error in FireBug..

and 
fb.ajax({
    source: &#039;myFormReceiver.php&#039;,
    postData: &#039;myFormId&#039;,
    success: Function ( Collectinfo) {
        fb.start( Collectinfo.responseText );
    }
});


Dont trigger anything..

CollectInfo is a Javascript function I have made.
« Last edit by Juel on Thu Jan 30, 2014 11:52 am. »
Juel
#6 Thu Jan 30, 2014 1:52 pm
Member
Registered: Jan 2014
Posts: 8
 
<!DOCTYPE html>
<head>
<script type="text/javascript">

function AreYouSure(){
	var tester=0;
}
	</script>
	
<link rel="stylesheet" href="../test2/floatbox/floatbox.css"/>
<script src="../test2/floatbox/floatbox.js"></script>
</head>
<html>
 <form id="input" name="input" method="POST">
	<input type="hidden" id="DoesThisWork" name="DoesThisWork" value="Yes!!">	
 </form> 
 <input type="button" value="Bestilx" class="Button" onClick="fb.ajax({source: &#039;testpopup.php&#039;, postData: &#039;input&#039;, finish: AreYouSure});">

</html>


Now the click dont open a floatbox, but only runs the script.. :/ Im really confused now :D
admin
#7 Thu Jan 30, 2014 2:56 pm
Administrator
Registered: Aug 2008
Posts: 3382
Sorry, we're moving too far away from Floatbox support and too deeply into assisting with coding your page logic. I'm not going to follow you there.

Use whatever AJAX library functions you like. If the Floatbox fb.ajax() function is of use to you, great. If you're used to using something else, great. The key thing is that if you want to show the response in a Floatbox, just pass the response html as the first parameter to the fb.start() function. All AJAX library functions have a callback that can be used to process or act upon the response.
Juel
#8 Fri Jan 31, 2014 8:58 am
Member
Registered: Jan 2014
Posts: 8
Hmm Ok.. But your manual says:

Light up the floatbox anchors in that dynamic content by adding the following line after that insertion: 

if (xhReq.readyState == 4) {
   document.getElementById(&#039;myXhrDiv&#039;).innerHTML = xhReq.responseText;
   fb.activate();
 }


So in my script that is:
function handleHttpResponse5(){
  if(http.readyState == 4){
    document.getElementById(&#039;float&#039;).innerHTML = http.responseText;
    fb.activate();
  }
}


But that dont open a floatbox, on my page I have made a div to recieve the Ajax info like this:

 <div id="float" class="floatbox" ></div>


Isent that the way? Nothing opens :/ The info is just beeing pushed into the div, but it dosn't open as a floatbox :/
admin
#9 Fri Jan 31, 2014 9:22 am
Administrator
Registered: Aug 2008
Posts: 3382
Sorry, I really can't teach you javascript, form handling or AJAX here, nor author your page's code for you.

The API Reference tells you how to use the Floatbox API functions and what they do, including fb.start(), fb.ajax() and fb.activate().

fb.activate() does not start a floatbox. It adds floatbox behaviour to links that have the "floatbox" class on them and that have been added dynamically to the page. The snippet of the instructions you quoted is from the section that discusses adding floatbox content dynamically to a page.

There's no such thing as starting a floatbox from a <div> with the floatbox class assigned to it. As mentioned in my first response in this thread, a floatbox can start from a link (<a> element) with the "floatbox" class assigned, or by calling the fb.start() function.

Page: 1

• Floatbox Forum » Support & General Discussion » Opening an ajax responseText in a FB?