views:

31

answers:

1

I am trying to load some content into a page using Ajax. The html that is loaded contains some javascript code. Even though the code is wrapped within $(document).ready, it gets executed before the content is inserted into the document, because the parent document's Dom is ready by the time the content is loaded.

How can I defer the execution of the code, until the content has been inserted into the document. Here is the html that I am trying to load (this is the code for openid-selector)

<script type="text/javascript" src="/js/openid-jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    alert('ajax-html');
    openid.init('openid_identifier');
});
</script>
<!-- Simple OpenID Selector -->
<form action="try_auth.php" method="get" id="openid_form">
    <input type="hidden" name="action" value="verify" />

    <fieldset>
            <legend>Sign-in or Create New Account</legend>

            <div id="openid_choice">
                <p>Please click your account provider:</p>
                <div id="openid_btns"></div>
            </div>

            <div id="openid_input_area">
                <input id="openid_identifier" name="openid_identifier" type="text" value="http://www.joycebabu.com" />
                <input id="openid_submit" type="submit" value="Sign-In"/>
            </div>
    </fieldset>
</form>

Update : Removed the noscript tag

+1  A: 

It seems that the problem is that openid.init() is loading its own data and you want to manipulate that data after it has been loaded synchronously. There are a couple solutions:

Associate a callback function that executes when the asynchronous load is complete. Does the openid lib not offer you this functionality?

If you know the valid selectors of the data elements you want to manipulate before they've been added to the DOM, you can use .live().

I notice you are using the noscript tag. I advise against this strongly. Do all of your DOM manipulation through JS.

tandu
`<noscript>` has its uses, but probably not on a document fragment that's inserted using Ajax ;)
Stan Rogers
openid.init refers to elements like `#openid_choice` and `#openid_input_area` which are part of the loaded content. I can only modify the loaded content, not the script that loads the content. Is it possible to set the callback from the loaded content? (The noscript tag was part of the openid-selector plugin, i will be removing it)
Joyce Babu
noscript had its uses but it might as well be considered deprecated at this point and everything should be handled by JS on its own. noscript has its share of problems: only detects browser JS disabling, not firewall disabling or any other measure, noscript is a block level element, and noscript is adding essentially behavioral power to html which is evil!
tandu
@Joyce, in that case live should do what you need. You can have $("#openid_choice").live('click', function () {}); and so on. This assumes that you do know the names of the elements beforehand. The callback would need to be a part of the script.
tandu
I know the names of the elements beforehand. Anyway I'll wait to see if someone has any other solution before I mark this as answered. Thanks.
Joyce Babu
so does openid.init() load data and append it to the DOM afterwards? If it does not have its own callback built into the library then that might be a bit surprising. There may be a way to tell if there are any requests in progress, but I don't know. Sounds useful, maybe we should ask stackoverflow :)
tandu
I went with your first suggestion and modified the modal window plugin and added a callback after adding the content to DOM. Now the init method is called from the callback function instead of document ready. Thanks.
Joyce Babu