Talk:Fb:dialog
From Facebook Developer Wiki
[edit] Multiple open dialogs
At the moment open dialogs stack up on the page and have to be closed individually. Is there a way to invoke the close_dialog method from the clicktoshowdialog button of another dialog?
Edit: The workaround is to use just one dialog box that contains all your content, then use clicktoshowdialog AND clicktoshow + clicktohide to reveal/hide the right content.
There has to be another way to do this. Anyone?
Drew 11/6/09 Haven't found another way yet. I noticed that if you use the above workaround and are using the fb:dialog cancel_button it doesn't hide the shadow if you've opened multiple instances of the dialog. Same behavior if I create a new button and use close_dialog='true'
I've tried toying around with creating a new button that uses onclick='document.getElementById("<the id of your dialog>").getParentNode().getParentNode().getParentNode().getParentNode().setStyle({display: "none"});'
that does work. once. after that, my close button doesn't work at all in IE8, seems to work fine in FF3.5
[edit] Please allow us to control the size of a dialog box
As it is, the dialog box is always an inconvenient fixed width and height.
I second this. Jason
"I third this" - Tony
"I fourth this" - Gavin
I fifth this. - Ben
Yes, me too - Alexey
Yep I agree, at LEAST give it a maximum size of 604px so we can have your src_big images in there... :) - Max
Any idea when we can see this fix? - Gary
+1 Would really like to see this - Matt 03:52, 16 March 2009 (PDT)
Yes yes yes, agreed.
Yes please :D, Jorge 20/04/2009
- Thanks for all the interest, everyone. I filed this as a feature request recently, so it should get done soon. I can't give you an ETA tho. -- Pete (563683308 10:52, 20 April 2009 (PDT))
Any news about this update? - Nico 14/06/2009
19/06/2009 - I was able to fixed this problem by adding a css table.pop_dialog_table {width:auto;}. Because of that i can set the width of the content of the dialog and the dialog will adjust to the width of the content. If this a hack please don't remove it :). - boykulot
20/06/2009 - boykulot's suggestion did not work for me. According to firebug, the width of the dialog remains at 345px. Don't know why.
25/06/2009 - Try this great example code I found. It has a working example that worked for me. http://fbcookbook.ofhas.in/2009/02/06/how-to-resize-facebook-popup-dialog-box/ -RN
The cookbook example does work if you're using the Dialog() function, but does not work for <fb:dialog>. - michael heinz
11/9/2009 - I've tried customizing the dialog through css, but it didn't work, so please add width and height parameters ASAP.
[edit] ?
The dialog JavaScript has a call to console.log (the Firebug console). This means the dialog is completely unusable for all users because they get a JavaScript error ('console' not defined) before the dialog is rendered. Any chance this could be fixed so we can use this in our apps?
- This is fixed as of 8/22
Is there any way to have it refresh the page after the dialog is hidden? I am using the dialog to delete items and it would be nice if the page could refresh like after deleting wall posts.
- You could make the form in the dialog submit instead of using mock ajax
I'm wondering about the same thing. So I want to refresh the page after the dialog result comes back. Any way to do this?
I'm trying to get the dialog to open and then load its contents. I'm trying to use clickrewriteid and clicktoshowdialog so that when the user clicks a link it opens the dialog and has it load its data. I'm using that setup because I need to popup up to 62 different dialog boxes per page, so it saves a ton of bandwidth on the initial loading of the page. I've noticed that the showDialog function rewrites the dialog div with an 'invoked' div and puts the dialog div itself way at the bottom of the body. I'm not sure why it's not rewriting the div.
[edit] Please allow <style> blocks within dialogs
Currently they're stripped. Also does not work with a table tag.
[edit] show dialog from dashboard create button
anyway to do this? i've tried putting an <a> link inside the <fb:create_button>, but that doesn't work.
Yes, it would be incredibly useful to be able to do this. Being able to popup your create action in a dialog on the same page would greatly smooth out app interaction.
Thought I'd bring in this post here: http://ucsd.facebook.com/topic.php?uid=2205007948&topic=12649 I have issues with fb:dialog and safari not submitting the form once the user hits the submit button. Cancel works fine, and all of it functions perfectly in IE and Firefox. Any feedback would be helpful =)
[edit] Can you auto-close a dialog once the form returns?
I'm using the dialog to delete a wall-type message on the profile. No need to reload the whole profile - I set the clickrewriteid to the profile div id, and this works. However, the dialog stays on the screen even when the mock ajax call has completed. I tried adding close_dialog="1" to the submit button, to no avail.
Any chance this could be fixed/updated so that close_dialog works on mock ajax links?
Not automatic, but a related issue:
Closes: <fb:dialog-button type="button" value="Yes" close_dialog="1" />
Doesn't close: <fb:dialog-button type="button" value="Yes" close_dialog="1" clickrewriteid="status" clickrewriteform="formname" clickrewriteurl="url" />
Related Issue:
I want to update the contents of the page after the user clicks on the dialog button and I don't want a page refresh. If I set the clickrewriteid to the div id on the page, the dialog box doesn't close. It seems like the clickrewriteid is really supposed to be only set to the id of the dialog box itself and not any other div on the page. Is there any way to do what I want? Of course, a page refresh will solve the issue, but thats not the ideal user experience.
>>>>>> I second this -- I'm having the exact same problem. Has anyone come up with any solutions? >>>>>> Another vote for the related issue. I'd like to display a piece of text and give people the option to change it with the dialog. 855740295 15:02, 11 June 2008 (PDT)
I've come up with a hackish, but fully functional, solution -- instead of close_dialog="1", use the following:
onclick='document.getElementById("<the id of your dialog>").getParentNode().getParentNode().getParentNode().setStyle({display: "none"});'
It uses JavaScript to hide the dialog when you click the button. Note that the three getParentNode() calls are required to remove the gray border around the dialog -- that's the hackish part. If Facebook ever changes it's visual style, that part may have to be altered.
>>>>>> Thanks for the hackish. I was having trouble closing the gray border. :-)
11/6/09 >>>>>>>>>>>> looks like they changed, you now need 4 getParentNode() calls
Simple code example of this issue:
Two files, helloworld.php, and helloanswer.php.
helloworld
div id="div_yourname" Hello. /div
<a href="#" clicktoshowdialog="hw_dialog">What's your name?</a>
<fb:dialog id="hw_dialog" cancel_button="1">
<fb:dialog-title>What's your name?</fb:dialog-title>
<fb:dialog-content>
<form id="hw_form"> <input name="yourname" /> </form>
</fb:dialog-content>
<fb:dialog-button type="submit" value="Yes" close_dialog="1" clickrewriteurl="helloanswer.php" clickrewriteid="div_yourname" clickrewriteform="hw_form" />
</fb:dialog>
helloanswer.php
<?php print $_POST["yourname"]; ?>
The behavior I see is that pressing the Yes button in the dialog causes the text in the div to change, but the dialog remains visible on the screen. The desired behavior is that pressing the Yes button should cause the text in the div to change but the dialog box to close. This seems like a normal use case.
[edit] Pass parameters to dialog?
User 1 :
I have a dialog whose contents differ depending on which link on the page is clicked. Much of the content in the dialog is the same, but several pieces of the dialog need to be dynamic. Is there a way to pass parameters to the dialog or make a MockAJAX request on loading the dialog in order to display the contents properly?
The only alternative I've come up with thus far is to create a separate fb:dialog for every link on the page, which results in some cumbersome FBML and increased load times.
User 2 : I tried with MockAJAX but with out success. Has somebody tried to change the 'content' argument with FBJS ?
User 3: I am also facing the same problem. I have to duplicate "<fb:dialog>" many times in my html. Load times are way too high. Please allow us to invoke one dialog with different parameters.
User 4: I want to set the Title and content based on what the user clicks on. So, I'd like to send parameters (title, parts of content) to the dialog without duplicating the dialog many times.
Jaguar:
Here's my code:
<script>
function setdelname(name){
document.getElementById( 'delCounterName' ).setTextValue(name);
}
</script>
<a href="#" clicktoshowdialog="DeleteConfirm" onclick="setdelname('$k')"><img src="$imgbase/x.png" style="vertical-align: middle; " /></a>
<fb:dialog id="DeleteConfirm">
<fb:dialog-title>Confirm Deletion</fb:dialog-title>
<fb:dialog-content>Are you sure you wnat to delete the counter <div style="display: inline; " id="delCounterName"> </div>?</fb:dialog-content>
<fb:dialog-button type="button" value="Yes" close_dialog="true" />
<fb:dialog-button type="button" value="No" close_dialog="true" />
</fb:dialog>
At the moment it doesn't do anything useful, but the modification of the dialog box in code is the main point here
1473489603 20:04, 10 February 2009 (PST)
[edit] Dialog down on profile page?
I just noticed today that the link i had set to a dialog box (i was using to offer a 'delete gift' option) is no longer there. Was working fine until now. Has there been a change??
[edit] Possible bug? fb:dialog and fb:request-form
So I can put an fb:request-form in a fb:js-string, and pop the js-string in a dialog using onclick="new Dialog()..." However, I want to suppress the button at the bottom of the dialog.
I tried to use an fb:dialog (instead of fb:js-string) and call the dialog/popup via clicktoshowdialog=[myfb:dialogid]... but the fb:request-form js does not hook up:
I get an error that the request form obj is not defined?
So, I'd either like a way to suppress the default button using onclick="new Dialog()..." OR I'd like a way to hook up the fb:request-form in the clicktoshowdialog way.
OR, am I nuts and this user error?
==
[2nd this] -Brody
- If you guys think you found a bug, could you please file it in Bugzilla so we can investigate? Include as much information as possible so we can repro, including your app IDs. Thanks! Pete (563683308 22:53, 25 August 2009 (PDT))
[edit] Dialog not playing nicely with Quicktime
I've noticed that if I have a quicktime video playing, and the fb:dialog displays, the video cuts into the popup and makes it unreadable. Is there a way to set the z-index about Quicktime? (Either that, or give me control over popup positioning) Platform: Mac using Safari browser.
[edit] Invoke Programmatically?
Is it possible to invoke the dialog programmatically through JS?
Yeah that would be a nice feature!
Second this. It'd be nice to have a way to invoke it besides a user click. Evan R. A. Reeves - 2009-10-29
[edit] fb:editor button-set can invoke a dialog
[edit] FBML Formating Inside Fb:dialog-content
I was able to get fb:multi-friend-input to work in regular html page, but I wasn't able to get fb:multi-friend-input to work inside fb:dialog-content. The needed script is not loaded accordingly. Is there a way to do that?
If so, what type of fbml tags are usable inside fb:dialog?
This is working fine :
<fb:dialog id='my_dialog' cancel_button=1> <fb:dialog-title>Review request</fb:dialog-title> <fb:dialog-content> <fb:request-form action="#" method="POST" invite="false" type="review " content="You have been invited to <a href='http://apps.facebook.com/xxxxxx'>review xxxxxx</a>" label="Review this" > <fb:multi-friend-input width="350px" /> <fb:request-form-submit " /> </fb:request-form> </fb:dialog-content> </fb:dialog>
[edit] fb:dialog form submit
Where do I specify a form action for a fb:dialog?
Following the examples in the page, I tried (sorry if there is any typo, this is copied from a PHP function):
<fb:dialog id='diagName'> <fb:dialog-title>Diag Title</fb:dialog-title> <fb:dialog-content> <form method='post' id='diagNameFormId'> <input type='text' name='theText' size='60'></form> </fb:dialog-content> <fb:dialog-button type='submit' value='SendIT' href='someURL' form_id='diagNameFormId' /> </fb:dialog>
And it didn't work. In fact, $_POST['theText'] is not even set. It worked fine for me if the action is defined in the form:
<fb:dialog id='diagName'> <fb:dialog-title>Diag Title</fb:dialog-title> <fb:dialog-content> <form method='post' action='someURL' id='diagNameFormId'> <input type='text' name='theText' size='60'></form> </fb:dialog-content> <fb:dialog-button type='submit' value='SendIT' form_id='diagNameFormId' /> <fb:dialog-button type='button' value='Go back' close_dialog='true' /> </fb:dialog>
-- I tried same thing, it works inside <fb:dialog>, but inside <fb:dialogresponse> nothing inside <fb:dialog-content>is shown! fb:dialogresponse suppose to have the same rule as fb:dialog??? --Jack
-- I tried to use the href option on fb:dialog-button and it redirects fine, but none of the variables inside the form are posted even with form_id and href supplied. Definitely a nasty bug. 11313545 08:15, 13 August 2009 (PDT)
[edit] clicktohide not playing nice with close_dialog
After I return a dialogue response, I would like the close button to hide an element on my page, however the if you use a clicktohide attribute in your dialogue button, you close no longer closes the dialogue.
[edit] Allow Fb:dialog with fb:tab-item
Please allow Fb:dialog with fb:tab-item ...
yes yes please do! ,Leon.
Yeah, that would be very nice. -ASP
Waiting for that too. Fred
I'll fourth that. Robin
[edit] Clicktoshowdialog on fb:create-button
please allow clicktoshowdialog attribute on create-button
[edit] dialog should integrate with fb:editor
The dialog should be integrated with the fb:editor. The editor has a different way for doing cancel buttons, and there doesn't seem to be a way to add a form_id to an fb:editor
[edit] Border left on closure
I have a form button which shows a dialog through: clicktoshowdialog="draw_dialog"; If I click this button twice (or more), when I click the cancel button, a small border remains in the middle of the page. It's like if the contents were gone and it shrank in height but not width. What's up with this? Seems like a bug to me.
[edit] Internet Explorer Crashing
I've been testing my application with firefox and everything seems to work fine.
When I go to Internet Explorer my application starts to run slow and sometimes it crashes.
I have 5-7 dialogs in one page. Any ideas?
[edit] fb:iframe breaks fb:dialog
after further experimentation i believe this was problem was due to unsupported attributes in my iframe, but i'm not exactly sure. i am sure that it's not a fundamental bug with the fb:dialog. however, i would like to see an option to control the size of the dialog as even when i did get it to work with the embedded flash media i was trying to display the flash object extends well beyond the side of the dialog making this an unworkable solution in my case.
also, as was mentioned before, the fb:multi-friend-input works only intermittently in fb:dialogs, or at least it does for me when there is one than more fb:dialog on a page that are only displayed on a click to show action by the user.
---
This is also an issue if you use swfobject.js in an iframe, and the user wants to change the privacy settings. The privacy settings for the application appear under the swfobject.js (aka under the flash object), so they cannot be changed. I have not tried it without swfobject.js but I would expect the same result.
[edit] Please disable form submit button once a user clicks it
I would really appreciate it if when i user clicks the dialog button that submits a form if the button automatically got disabled to prevent the user from clicking it again.
I have a script that runs but takes about 2 or 3 seconds to load, impatient users click the button again causing my script to be run twice.
I cant seem to use the clicktodisable form buttons FMBL on dialogs
Also i feel the ajax example of loading content to the dialog needs to have a loading sign just like it does when you poke someone. I feel this is a must as a user will just not know what's going on as it takes a few seconds even to load a very simple response.
[edit] dialogs and users who don't add the app
fb:dialog seems to automatically prompt the user to add/authorise the application when the submit button is pressed... Is there some way to stop that?
[edit] CALLING JAVASCRIPT FUNCTION USING DIALOG BOX
PLEASE LET ME KNOW IS THERE ANY WAY TO CALL JAVASCRIPT FUNCTION USING fb.dialog.and the from i am calling dialog box is under an iframe.i have problem with calling javascript function .
[edit] Dialog heading has a white background instead of the standard blue
The style of the fb:dialog box has recently changed so that the heading is now black on white. All other dialogs, including the one invoked using JS, are white on blue.
Is this a deliberate change? I would prefer it to look like other dialogs with a white on blue heading. It looks strange as it is. I might change mine to use the JS dialog.
(vote for bug #3491!)
[edit] Problem in IE and Safari: fb:request-form inside a fb:dialog
I put an fb:request-form inside a fb:dialog. The contents of the fb:request-form contain a fb:name and two fb:req-choice tags. It works perfectly in Firefox and Opera. In IE and Safari I can see only the Ignore button. If I remove the fb:name tag I can see only the first fb:req-choice tag. This fb:request-form works ok outside the fb:dialog.
Any solutions?
[edit] Position Dialog Box?
Hi I'm having trouble setting the position of the dialog box. I used a div and still could not set the location. Am I missing something simple?
- The dialog by default appears in the center of the browser window. If you want to adjust its position use FBJS -- look for the offsetHeight and offsetWidth settings and the Manipulating Styles section. Hope this helps. -- Pete (563683308 19:58, 20 March 2009 (PDT))
I am unable to adjust the positioning of the dialog with something like:
videoDialog.setStyle('top', '1000px');
How can it be adjusted?
--Ryan (569255561 18:53, 29 March 2009 (PDT))
this is not working for me either...this is more or less a MUST.. --ian 05/15/09
[UPDATE] k... I got this one licked...here's the code I used.. I gave my fb-dialog an id of 'pub-hand'
@@@
function adjustDialog() {
varel = document.getElementById('pub-hand')
varel.getParentNode().getParentNode().getParentNode().getParentNode().getParentNode().setStyle('position', 'absolute').setStyle('top', '500px');
}
@@@
[edit] conflict with Fb:multi-friend-selector (condensed)
Core functionality of the element Fb:multi-friend-selector (condensed) works, it can send user ids, but search bar and displaying of the selected users is corrupted and doesn't work. If you type in search box, results are not filtering and you can not see what you're typing. If you select users, they are not appearing below the slection.
Example:
<fb:dialog id="invite"> <fb:dialog-title>Invite smbd</f b:dialog-title> <fb:dialog-content> <fb:request-form method="post" action="index.php" content="..." type="foo" invite="false" max="20"> <fb:multi-friend-selector condensed="true" style="width: 300px;" /> <fb:request-form-submit /> <fb:dialog-button type="button" value="Cancel" close_dialog="1" /> </fb:request-form> </fb:dialog-content> </fb:dialog>
- Please file a bug. Thanks, Pete (563683308 11:17, 7 August 2009 (PDT))
[edit] conflict with Fb:multi-friend-selector (ordinary)
It works but when I click "intive" it shows a dialog that nothing is selected. In AJAX request to the server there are no "ids".
Example:
<fb:dialog id="my_dialog">
<fb:dialog-title>Invite friends</fb:dialog-title>
<fb:dialog-content>
<fb:request-form action="invited" method="POST" invite="true" type="Curse Counter" content="<%=h "I found a great app to use - <a href=\"http://apps.facebook.com/cursecounter_dev/\">Curse Counter</a>. <fb:req-choice url=\"http://apps.facebook.com/cursecounter_dev/\" label=\"Authorize My Application\"" %>" >
<fb:multi-friend-selector cols='2' rows='2' showborder="false" actiontext="Invite your friends to use Curse Counter app." bypass="cancel" />
</fb:request-form>
</fb:dialog-content>
</fb:dialog>
<a href="#" clicktoshowdialog="my_dialog">Share with friends</a>
[edit] Link does not work as expected after adding clicktoshowdialog
I added the attribute clicktoshowdialog to a link. Let's say the link is on page A and links to page B. The dialog is shown after clicking the link. When I simply close the dialog now for example by clicking the cancel-button, I would expect to be directed to page B. But instead I am still on the original page A.
Am I missing something? How can I add a dialog to a link, without breaking it?
