How to modify the content of fb:request-form dynamically using Javascript?

Question

Hi,

I would like to customize my request-form content using javascript. Say i have this in my html...

<div id="invite">
<fb:serverfbml style="width: 600px; height: 650px;">
    <script type="text/fbml">
        <fb:request-form 
            action="index.php"
            method="POST"
            invite="true"
            type="MyApp"
            content="Please have a look at my new __DYNAMICNAME_HERE__. 
                <fb:req-choice url='http://apps.facebook.com/myapp/' label='View Now!' />" >

            <div class="clearfix" style="padding-bottom: 10px;">
                <fb:multi-friend-selector condensed="true" style="width: 600px;" />
            </div>
            <fb:request-form-submit /></fb:request-form>
    </script>
</fb:serverfbml></div>

I would like to dynamically change _DYNAMICNAME_HERE_ to something else via Javascript.

Here are the things that i've tried.

function technique1()
{
   var elem = document.getElementById("invite");
   elem.innerHtml = elem.innerHTML.replace("__DYNAMICNAME_HERE__", "MyName");
   // show div code...

   // result is, the current page get's re-rendered inside the div, instead of the FB controls.
}

function technique2()
{
   // Delete all code inside the div... then construct the content using javascript.

   var elem = document.getElementById("invite");
   elem.innerHtml = text;// text is the div innerHtml code constructed at runtime.

   // run show div code
   // result is nothing shows.
}

function technique3()
{
   // First, we remove all code from the div
   // put them into another php page called invite.php

   var elem = document.getElementById("invite");
   elem.innerHtml = "<iFrame src=\"www.myserver.com/invite.php?name=myname\"></iFrame>";

   // run show div code
   // It works but requires 1 more request to the server.
}

Does anyone know a technique that does not involve an extra request to the server (invite.php)? Possibly involving FB.XFBML.Host.addElement, refresh etc...

Btw, i'm using Google's Closure the handle popping up the div.

Thanks.

Answer 1

it's actually engineered to now allow that kind of manipulation. one thing you can do though is render more than one fb:request-form, most of them in < div >s with style="display: none", then change which one is displayed with javascript.

that's a limited solution as it gives you limited choices that must be determined at render time, but AFAIK you just can't get at the html attributes once it's rendered.

Answer 2

I also came across the same problem and solved it the way that teepark suggested. I could not change the HTML of facebook's tags because they render in an iframe. MY page is in www.__.com and the iframe is in www.facebook.com. I can't change the contents in that iframe because of cross domain policies.