jQuery .ajax success function not rendering html with jQuery UI elements.

Question

How do I have the html loaded into my div from the .ajax render with jquery? the success function loads the HTML, but those elements do not show up as jQuery UI elements, just the static HTML types. Any pointers?

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html); 
        }
    });
});

});

Answer 1

MIME type on the server probably wasn't set to text/html. jQuery checks mime type to process data from the server. I've seen you set dataType manually.

Analyse response

Check whether your response isn't HTML encoded so <> become < and gt; respectively. If it is it's normal so see HTML as string and not as actual HTML elements.

Answer 2

Hi :

This is just my guess cause I didn't see your complete code :)

What if you add another line in your code, like this :

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html); 
        }
    return false;     //here is the line
    });
});

This extra line is to prevent html default action (when you click on a input, sort of like that). Might be helpful cause I've been to similar situations that the callback function would not work...

Answer 3

The jQuery UI elements are only applied to the original DOM document. You need to apply those UI transformations to any elements added to the DOM even after the document has been loaded. Let's say I'm using the jQuery selectable UI component.

$(function(){
    // Initialize the selectable plugin on all elements with the selectable class
    $('.selectable').selectable();
    // Whenever this button is clicked, it adds a new div to the body
    // with the selectable class
    $('input[type=button]').click(function(){
        $('body')
            .append("<div class='selectable'>New Div</div>") // Add the new div to the DOM
            .children('.selectable:last') // Traverse the body's children and grab the last child (the one we just added to the DOM) 
            .selectable(); // Initialize the plugin on the newly added div
    });
});

You're going to want something similar to the code inside the click handler for your success callback.

Answer 4

What I needed to do was first bring in the data (html) into the specified div, then initialize the plugin for each of the elements inside the html. Like So:

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html);
                             // Initialize UI Items
            $("input:submit", ".callsubmit").button();
            $("#hotorcold").buttonset();
            $("#calldatep").datepicker();
            $("#callbackdatep").datepicker();   
        }

    });

});

});