phpajaxjquery-ui-button

jquery ui button screwed up when AJAX loads it


I have a problem with the jquery ui button (I think).
I try to load an inbox via AJAX, I got all the data and css but somehow the script with the jquery button does not work.
I got my page structured as followed:

ob_start();
session_start();
if(isset($_SESSION['rol']))
{
    if(isset($_POST['getnewmail']))
    {
        //Do some query stuff here
        //Print the output through a foreach...
        echo '<div class="jbutton">';
        foreach($result as $key => $value)
        {
            foreach($value as $y => $mailid)
            {
                //echo the stuff
            }
        }
        echo '</div>';
    }
}

As you can guess I call the the jquery code upon the div before the foreach. The code for that is:

$(function() {
    $("button, a", ".jbutton").button();
});

My AJAX code sets the $_POST['getnewmail'].

function loadinbox(serverpage, contentid)
{
    var xmlhttp = ajaxFunction();
    if (xmlhttp)
    {
        var params = "getnewmail=settrue";
        var url = "/location/php/" + serverpage;
        xmlhttp.open("POST", url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.setRequestHeader("Content-length", params.length);
        xmlhttp.setRequestHeader("Connection", "close");
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
               if(xmlhttp.responseText != "")
               {
                    document.getElementById(contentid).innerHTML=xmlhttp.responseText;
                    return;
               }
            }
        }
        xmlhttp.send(params);
    }
}

The problem is when I try to load the mails into the inbox without AJAX I get what I want.
But when I move the code into an if statement and call it with AJAX it all fails.

Can somebody explain me what I am doing wrong? Why does jquery ui button not work when loaded into a div with AJAX? While it does work when loaded trough normal php and without AJAX.

UPDATE:
http://img35.imageshack.us/i/30fkdl30.png/

Here is an image to clarify what the problem is.


Solution

  • From what I can tell, the javascript code is called before the div content is received from the server. You should call the .button() after you set the innerHtml propery of the div.