Search jQuery

jQuery Forum

Getting started with AJAX

in Getting Started • 8 years ago

Hi there,

I'm just getting started with AJAX requests using jQuery. I started working from an example in the jQuery documentation.

I'm using this, as my html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="../jquery.js"></script>
</head>
<body>
<div class="adminwrapper">
<form action="" id="addrecept">
Naam: <input type="text" name="naam" /><br />
Bereidingstijd: <input type="text" name="tijd" /><br />
Beschrijving: <textarea name="beschrijving"></textarea><br />
<input type="hidden" name="action" value="addrecept"/>
<input type="submit" value="Voeg toe!" />
</form>
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$('#addrecept').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
var posting = $.post( "../ajaxhandler.php?action=addrecept", $('#addrecept').serialize() );
/* Put the results in a div */
posting.done(function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>

I use this to handle the request (ajaxhandler.php):

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/maaltijd/includes/config.inc.php');
#### actions :
####
## addrecept = recept toevoegen.
if (isset($_GET['action'])){
if ($_GET['action'] == 'addrecept' && $_SERVER['REQUEST_METHOD'] == 'POST'){
if (1 == 1){ //I won't bother you with all the php stuff I do.
echo '<div id="content">'.$_POST['naam'].' test</div>';
}
}
}
?>

But I just don't get a result loaded into <div id="result"></div>

What am I doing wrong? Any tips on where to find the right documentation?

Kind regards

Replies(9)

jakecigar

Re: Getting started with AJAX

8 years ago

You need to debug using a good debugger. I suggest Chrome or Safari's built in web inspector. There you can see the EXACT results of the $.post call.

It is possible the PHP is not returning what you expect or there is a small syntax error in your jQuery code or jQuery is not on your server where you think it is.

JΛ̊KE

Niellles

Re: Getting started with AJAX

8 years ago

Thank you for your reaction, the response is:

<html>

<body>

<span id='content'>test</span>

</body>

</html>

So somehow it won't load into the div in the main document... I don't see why. I'm loading the content of the element with id='content' into my div with id="result"... well I'm not, that's what I'm trying to do, but is doesn't load...

Niellles

jakecigar

Re: Getting started with AJAX

8 years ago

Your code…

var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );

Should do the job.

Can you share a link to the page that does not work?

JΛ̊KE

Niellles

Re: Getting started with AJAX

8 years ago

I was running at my localhost, I uploaded the documents that I think are essential to simpelemaaltijd.nl/test/.

I thought my code should do the job... apparently not.

jakecigar

Re: [WatchList] Getting started with AJAX

8 years ago - via EMail-to-forum

var content = $( data ).find( '#content' );
is the problem. Use
var content = $( "<div>" + data + "</div>" ).find( '#content' );

$( someHTMLString) give an array of elements where content is one of them. Find searches decedents , not those elements. So, I wrap it in a <div> to make sure the content is a child node.

Niellles

Re: Getting started with AJAX

8 years ago

That works great. But what I loved of getting the content by id was that I could get multiple parts of my response (all in their own div) and load them into different divs in my main document...

That won't work with your solution, right?

jakecigar

Re: Getting started with AJAX

8 years ago

var $ajaxResponse = $( "<div>" + data + "</div>" )
var content = $ajaxResponse.find( '#content' );
var pancakeRecipes = $ajaxResponse.find('.pancakeRecipes'); // find all the pancake recipes (by class name)

JΛ̊KE

Niellles

Re: Getting started with AJAX

8 years ago

Wow! That works just as I hoped.

My index.php:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="../jquery.js"></script>
</head>
<body>
<div class="adminwrapper">
<form action="" id="addrecept">
Naam: <input type="text" name="naam" /><br />
Bereidingstijd: <input type="text" name="tijd" /><br />
Beschrijving: <textarea name="beschrijving"></textarea><br />
<input type="hidden" name="action" value="addrecept"/>
<input type="submit" value="Voeg toe!" />
</form>
Naam: <span id="naam"></span><br />
Tijd: <span id="tijd"></span>
<script>
/* attach a submit handler to the form */
$('#addrecept').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
var posting = $.post( "../ajaxhandler.php?action=addrecept", $('#addrecept').serialize() );
/* Put the results in a div */
posting.done(function( data ) {
var content = $( "<div>" + data + "</div>" ).find( '#naam' );
$( "#naam" ).empty().append( content );
var content = $( "<div>" + data + "</div>" ).find( '#tijd' );
$( "#tijd" ).empty().append( content );
});
});
</script>
</body>
</html>

My handler:

<html>
<body>
<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/maaltijd/includes/config.inc.php');
/**
* @author Niels
*/
#### actions :
####
## addrecept = recept toevoegen.
echo '<span id=\'naam\'>'.$_POST['naam'].'</span>';
echo '<span id=\'tijd\'>'.$_POST['tijd'].'</span>';
?>
</body>
</html>

Of course this is just my test...

This is working as I want it to work, but I don't really understand how yet... Especially this part:

"<div>" + data + "</div>"

Why the <div> and </div> I am not using any <div> tags in my response? I didn't really get your explanation. Could you try to explain again?

jakecigar

Re: Getting started with AJAX

8 years ago

The div trick is used to get a different result.

$("<html><body><span id='content'>test</span></body></html>") has 1 element, the span.

It all relates to the normal use case. Normally you want to strip off the <html> and <body>. But when you add a div around it,

$("<div><html><body><span id='content'>test</span></body></html></div>") has 1 element, the fake <div>. And from that fake div, you can find the span.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Getting started with AJAX

Replies(9)

Re: Getting started with AJAX

Re: Getting started with AJAX

Re: Getting started with AJAX

Re: Getting started with AJAX

Re: [WatchList] Getting started with AJAX

Re: Getting started with AJAX

Re: Getting started with AJAX

Re: Getting started with AJAX

Re: Getting started with AJAX

Statistics

Tags

Actions

Related Posts