Imagine a website where the content is loaded via a menu with using jQuery .post() (or .get()).
Imagine that inside this dynamic loaded content should be another jQuery post to show some more things under the content
(all without navigating to a new file in the address bar)
Here is what i mean (but only the base frame…):
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<!-- the result of the search will be rendered inside this div -->
<br />
<div id="result" name="result"></div>
<script>
window.onload = (function(){
/* attach a submit handler to the button */
$("#click1").click(function(event) {
$.ajax({
url: 'test.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
}
});
});
});
</script>
</body>
</html>
So, stop laughing, I know that the page only loads itself in the div and this is not working because of the same IDs… it´s not Inception here 😉
But even if I link a completely new page to it with new IDs it is not working…
Is it possible to add a new jQuery AJAX inside an existing, already with jQuery AJAX loaded content?
I think yes, but I can´t find my mistake…
/EDIT
I think I need to give a bit more input:
test.php
<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<div id="result" name="result"></div>
<script>
window.onload = (function(){
$("#click1").click(function(event) {
$.ajax({
url: 'test2.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
}
});
});
$("#click2").click(function(event) {
$.ajax({
url: 'test3.php',
type: 'POST',
data: 'n2: term',
success: function(msg) {
$( "#result2" ).empty().append( msg );
}
});
});
});
</script>
test2.php
<input type="text" name="n2" id="n2" placeholder="Search..." />
<button id="click2">Go</button>
<div id="result2" name="result2"></div>
test3.php
<?php
echo 'It´s working!';
?>
My final question: Why is it not working? Why does it not output “It´s working!” at the end?
You can put another post inside the success handler of the first post: