Trying to getElementById from a div that loaded with ajax - php

Question

I'm trying to getElementById from a div that loaded with ajax, but I can't. Let's explain:
In 'example.php' I have this js code:
<script type= "text/javascript">
var page=document.getElementById("table_page").value;
$(document).ready(function() {
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
update();
});
</script>
But the input with id='table_page' loading with ajax file 'loaded.php'. The file 'loaded.php' contains this:
<?php echo " <input type='hidden' id='table_page' value='7' /> "; ?>
This printed somewhere in my 'example.php'. The problem is that I can't get the value from this div in my js code. Please help me.

Answer 1

Try this:
$(document).ready(function () {
var page = '';
$('#divLoadedID').load('loaded.php', function () {
page = $("#table_page").val();
update();
});
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q=" + page,
timeout: 1000,
success: function (data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
});

Answer 2

This is a simple fix. All you need to do is overwrite page in your success function as it will get the new value.
$(document).ready(function() {
var page=$("#table_page").val();
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
page=$("#table_page").val();
},
});
}
update();
});
The problem is page is getting set before the DOM changes, the success part of the ajax call happens after the DOM changes so it can account for new elements/data