Insert HTML into a page with AJAX

Question

I am currently developing a website and i need that the pages loads dynamically based on what actions the user does.

Example: If the user clicks on the button 'Settings' an ajax function will load from an external page the code and will put into the div with tag 'settings'.

This is the code i use to make the Ajax request:

    function get_page_content(page, target_id)
    {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById(target_id).innerHTML = xmlhttp.responseText;
                // After getting the response we have to re-apply ui effects or they
                // won't be available on new elements coming from request.
                $('button').sb_animateButton();
                $('input').sb_animateInput();
            }
        }
        xmlhttp.open('GET', 'engine/ajax/get_page_content.php?page=' + page, true);
        xmlhttp.send();
    }

And this is where the ajax results will be put by first snippet:

<div id="settings_appearance">                
</div>

The code is called from a function here:

<div class="left_menu_item" id="left_menu_settings_appearance" onclick="show_settings_appearance()">
    Appearance
</div>

And this is the html that the ajax function will put into the settings_appearance div:

    <script type="text/javascript">
        $(function()
        {
            $('#upload_hidden_frame').hide();
            show_mybrain();

            document.getElementById('avatar_upload_form').onsubmit = function()
            {
                document.getElementById('avatar_upload_form').target = 'upload_hidden_frame';
                upload_avatar();
            }
        });
    </script>
    <div class="title">Appearance</div>
    <iframe id="upload_hidden_frame" name="upload_hidden_frame" src="" class="error_message"></iframe>
    <table class="sub_container" id="avatar_upload_form" method="post" enctype="multipart/form-data" action="engine/ajax/upload_avatar.php">
        <tr>
            <td><label for="file">Avatar</label></td>
            <td><input type="file" name="file" id="file" class="file_upload" /></td>
            <td><button type="submit" name="button_upload">Upload</button></td>
        </tr>
        <tr>
            <td><div class="hint">The image must be in PNG, JPEG or GIF format.</div></td>
        </tr>
    </table>

I would like to know if there's a way to execute also the javascript code that's returned by the ajax function (upload button in the returncode doesn't work because of this) and if it's possible to apply some customized ui effects i build that are loaded with the main page.

Thanks for helping.

P.S. This is the script that applies the UI effects:

<script type="text/javascript">
// UI effects
$(document).ready(function()
{
  $('button').sb_animateButton();
  $('input').sb_animateInput();
  $('.top_menu_item').sb_animateMenuItem();
  $('.top_menu_item_right').sb_animateMenuItem();
  $('.left_menu_item').sb_animateMenuItem();
});
</script>

P.P.S. ui effects are not applied to html elements (such as input and buttons) returned by the Ajax function. I used a little workaround by applying again ui-effects after ajax function returns the response. Probably there's another way of doing it... the same that will help me solve this problem.

Answer 1

If you use the jQuery ajax function (or the simplified jQuery get function), and set the datatype to html, then jQuery will evaluate the contents of any script tags included in the results.

Your $.get call would look something like:

$.get('engine/ajax/get_page_content.php?page=' + page,null,function(result) {
    $("#"+target_id).html(result); // Or whatever you need to insert the result
},'html');