Call Javascript function after AJAX load
Question
I know that these kind of questions pop up a lot on here. I usually am not the type to ask questions but this time I could not find a solution through searching.
I have boiled down my problem to a very small and simple environment:
I have 3 files:
Index.php:
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="javascript.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div>
<input type="button" value="Show" onclick="show('content','content.php');">
<script type="javascript/text">
show('content','content.php');
</script>
<br>
<div id="content"></div>
</div>
content.php
<div>CONTENT</div>
<input type="checkbox" id="checkbox" onclick="checkbox();">
<input type="text" id="textfield">
And javascript.js
function show(divcontainer,file){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divcontainer).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", file);
xmlhttp.send();
}
function checkbox(){
if(document.getElementById('checkbox').checked){
document.getElementById('textfield').value = "checked";
}
else{
document.getElementById('textfield').value = "unchecked";
}
}
When I press the button in index.php it loads the file content.php into the div container "content" via an ajax call. The file content.php has a checkbox and a textfield. When the checkbox is checked and unchecked it executes a javascript function that puts checked/unchecked in the textfield. Simple enough and everything works fine. Now what I want to do is to call the function checkbox() the moment that content.php is loaded. In this example it would mean that the textbox would already have the value "unchecked" and not only after the checkbox has been checked and unchecked again.
Putting the javascript code into the file content.php didn't do anything.
Somehow I feel that there must be a simple solution to this. I'm still pretty new to javascript though so I don't know the in and outs yet.
Any help would be greatly appreciated
Many thanks!
2 answers
solution1
2 ACCPTED 2013-10-31 08:41:35
Try this
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divcontainer).innerHTML=xmlhttp.responseText;
checkbox();
}
solution2
0 2013-10-31 08:45:25
if you´re new to JS you should definitely have a look at jQuery. Makes AJAX alot simpler.
$.ajax({
url: youURL,
success: function (){
//or whatever function you want to be called after success :)
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.