I have a problem, where I am using jQuery/Ajax to run a form, send the data to an external file, and then update a part of my page. But I ran into a problem:
The external site works. It prints out this div with the id="content" when I run the site manually.
But when im trying to receive this data from another document through jQuery, it will not return this field.
It runs all the other code on the external file just fine, as it executes the database calls in the external file just fine. But there is no data returned, as when the code is executed, the text of the "testlog" div (text here) just disappears, but isn't replaced.
So can you help me with why I can't retrieve the data from the external file?
First, here is the relevant part of the file I want to import into:
<script>
$(document).ready(function() {
$( "#moveN" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
var $form = $( this );
term = $form.find( "input[name='direction']" ).val();
var posting = $.post( "/modules/world/movement/move.php", { direction: term } );
posting.done(function( data ) {
var content = $("#content", data).html();
$( "#testlog" ).html( content );
});
});
});
</script>
<div id="testlog">Text here<div>
And here the relevant part of the external file:
<div id="content">
Part i want imported. This should be filled in with data from this external file, but now we are just trying to get the retrieved by the other file.
</div>
I hope some of you can help a novice out :)
you could use jQuery.get() to get the html from the html form page
$.get( "ajax/form-page.html", function( data ) {
//here you have acess to the html form the form page
$( ".result" ).html( data );
alert( "Load was performed." );
});
jQuery.get() is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Another option is use jquery´s load function
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div2").load("form.html");
});
});
</script>
</head>
<body>
<div id="div1"><h2>jQuery AJAX Load</h2></div>
<div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
If content is the root, you will not be able to find the element, you will need to filter it.
Change
var content = $("#content", data).html();
to
var content = $(data).filter("#content").html();
Try sending the success function as a parameter to jQuery.post:
<script>
$(document).ready(function() {
$( "#moveN" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
var $form = $( this );
term = $form.find( "input[name='direction']" ).val();
var posting = $.post( "/modules/world/movement/move.php", { direction: term },
function( data ) {
var content = $("#content", data).html();
$( "#testlog" ).html( content );
});
});
});
</script>
<div id="testlog">Text here<div>
See the reference doc: https://api.jquery.com/jQuery.post/ Also see in the reference that the done function doesn't receive any data, only the success function passed as parameter.