Menu
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?
927
The jQuery post() method sends asynchronous http POST request to the server to submit the data to the server and get the response. Syntax: $. post(url,[data],[callback],[type]);
post() makes Ajax requests using the HTTP POST method. The basic syntax of these methods can be given with: $. get(URL, data, success); —Or— $.
Sends an asynchronous http POST request to load data from the server. Its general form is: jQuery. post( url [, data ] [, success ] [, dataType ] ) url : is the only mandatory parameter.
You can put another post inside the success handler of the first post:
$("#click1").click(function(event) {
$.ajax({
url: 'test.php',
type: 'POST',
data: 'n: term',
success: function(msg) {
$( "#result" ).empty().append( msg );
$.ajax({/* params here */});
}
});
});
When $("#click2").click(..); runs, the #click2 element does not exist, so it doesn't work.
You can either move $("#click2").click(..); to inside the success handler for the first request, or you can use .live().
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
