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.
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
.
Thanks, that worked for me too. Here what I got at the end:
First, we send AJAX response, and second, we re-initialize all buttons.
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("users-contain").innerHTML=xmlhttp.responseText;
//recall JQeuryUI buttons initialization.
$("input:submit", ".demo" ).button();
}
}
精彩评论