Forums

fjorko

As the tile suggests ( if it makes sense )...

I am processing some PHP content and this is returned to Jquery's AJAX POST callback function. The returned values are two simple ECHO statements which have some variables concatenated to them:


echo "Item". $item1;
echo "Item". $item2;

How do I go about in extracting/filtering each echo in the returned AJAX data so that I can insert each of them into their own DIV respectively using Jquery

I googled it, and saw some people using the following :

var specificitem = $(data).find("xyz");

What is "xyz" referring to in the returned PHP data to be searched.... a string ? an id ? Does this mean I need to wrap my PHP echo's with tags containing id's ?

Bit confusing . . .

Any code snippet of a simple example would be much appreciated !

Thanks so much !

BoringCode

If I'm understanding right you want something like this:


//php
<?php
echo '<div id="1thing">';
echo data;
echo '</div>';

echo '<div id="2thing">';
echo data2;
echo '</div>';
?>

//jquery
$('#result').load('data_page.php #1thing');

$('#result2').load('data_page.php #2thing');

Yeah, I know not perfect. For one thing it isn't truly dynamic and it requires slightly redundant code, but hopefully this will point you in the right direction.

Oh and as to the ".find()" snippet, I've never been able to get that to work. So no help there :(

fjorko

Yep - Sort of what I'm after.....

What I cannot get to grips with is the fact that on a Jquery POST ( $.post) callback function you specify the Data parameter that is passed back ( function(data) ) from PHP, so how do you spilt this data "array" up if what is returned from PHP needs to be inserted in different locations on your original page (and not in the same DIV for example)...

Your idea is what I'm after, but like you say - is that the best way to code it, seeing that it would require quite a bit of coding.

Maybe someone else knows of a more efficient way ?

Thanks for the effort anyway !

jamy_za

Could you give an example of the external php and what you would like the html outcome to be after it has been pulled in via ajax?

fjorko

Hi Jamie

If you look at the site I'm busy with, you will see that I'm trying to make a login form which:

1. Is submitted, then intercepted by some jquery code which in turn does a POST to a php file called "login.php".

2. Login.php does not do much at the moment except echo back the filled out fields on the form on members.php - these echo's however is sent back to the callback function of the jquery POST, and then using Jquery - I am trying to split them into two separate variables so as to insert them into two separate DIV's ( #login_msg_response and #membercontact) and style them accordingly.

It sort of works, because the echo's are inserted into their own div's, but are still wrapped inside the wrapping DIV of #membercontact, I need to get them OUT of that wrapping div and make them independent..

I'm probably not doing it right, but this is my way of experimenting and learning and trying different things. If I am completely off the rails - then by all means please help me get back onto it.

Please check it with Firebug - that is probably the best way to see it in-situ, as I may paste incomplete code here and confuse you even more.

Note: The code is probably messy, so excuse any mistakes please... :-) and be nice !

Thanks

fjorko

LOL - just saw now that I have completely messed it up now . . . . will post here when you can try again

fjorko

OK - you can check it now..

jamy_za

I need to get them OUT of that wrapping div and make them independent..

Why do you need to do that? Aren't they independent unordered lists while being inside #membercontact?

fjorko

Hi Jamie

I'm struggling to explain what I need to do exactly - I'm sure it's just me not understanding the process properly....

You know when you do a Jquery POST right......

$post(somephp.php,{name1:value1,name:value2}, function(data){

//callback stuff here

)};

1. Now the callback function returns the data as JSON after receiving the output from php ( in my case a simple echo statement which echo's the user that just logged in + some html data consisting of two member's details ( ul's as you rightly said ).

2. I want to reference the two returned echo's from php which is contained in the JSON object with Jquery so that I can insert these variables in a div on the calling page of my choosing....

3. Because the $(data) is a single "object" that gets returned by Jquery's POST callback, I find it hard to separate the stuff inside it

I had someone tell me today to reference the returned $(data) by using $(data.variable) in order to target the individual variables in PHP that gets returned to Jquery.

I'm sorry if all this does not make sense at all, I just find it hard to explain what I mean !

Thanks so much for all the help !

I'll continue to tinker in the mean time.... :-)

jamy_za

Hmmm, I understand you want to edit them before they are displayed but would it be possible to do it afterwards?

<div>
	 <h1>Heading</h1>
	 <p>Some text</p>
</div>
<div>
	 <h1>Heading</h1>
	 <p>Some text</p>
</div>

If you only wanted the headings you could do something like

$('h1').siblings().remove().unwrap();

stefanbar

login.php

<?php
	 echo "{ 'value1': 'hello1', 'value2': 'hello2' }";
?>

scripts.js

$.post(url, function(data) {
	 $('#wrap1').append('data.value1');
	 $('#wrap2').append('data.value2');
});

header('Content-type: application/json');
$arr = array ('value1'=>'hello1','value2'=>'hello2');
echo json_encode($arr);

fjorko

Hi Stefanbar

Thanks for that - mind to explain your logic there for me ?. Please bear in mind I'm fairly new to this stuff....

Thanks

stefanbar

Sorry about that, was a bit in a rush this morning. If I understood your question correctly, you wanted to manipulate variables back from a PHP file in your JavaScript. Creating an array with all your variables and then parsing them into JSON object before returning them to your script would enable you to use dot notation to access the variables within the object.

<?php
$settings = array(‘username’ => ‘admin’, ‘password’ => ‘pass123’);
header(‘Content-type: application/json’);
echo json_encode($settings);
?>

$.post(‘login.php’, function(data) {
	$(‘.username’).html(data.username);
	$(‘.password’).html(data.password);
});

Hope that makes a bit more sense.

fjorko

That makes perfect sense - thanks !

One last question - if the original form that is submitted is wrapped in a wapper div - will the returned data ( even if you stick it into two separate classes/id's ) also be wrapped inside the same DIV seeing as you use the html() method.

stefanbar

No, you'll need to specify where you would like the returned data to be placed. Not sure how familiar you are with jQuery. If you could tell me where and in what div you would like the returned data to be displayed in, i could give you the code for that.

E.g.

// inserts at the beginning of the 'YourFormID' div (inside)
$('#YourFormID').prepend(data.username);

// inserts at the end of the 'YourFormID' div (inside)
$('#YourFormID').append(data.username);

fjorko

Ah gotcha ! I understand 100%

Thanks very much kind sir !

fjorko

I did something completely different now to separate the content returned by the Jquery POST callback...

In the callback, I receive just ONE echo and that is a confirmation that the user is logged on ( after running some backend PHP validation ). On this conformation I have a link that ( when clicked ) only refreshes the page, upon refreshing, the PHP Session will pick up that the user is logged on and display the content the user is allowed to see, by embedding the PHP tags and only echo'ing content based on the condition that the user's Session exist.

Not sure if it is the most elegant way to do this, but it works for me.

Thanks for everyone's input. Much appreciated.

lindsmcw

Entry a bit old now, but thanks for your code stefanbar, I needed the same thing for my code. I don't really understand the use of this line: header(‘Content-type: application/json’); but it was necessary.

upgradedtutorials

here's a good tutorial that also uses the combination of PHP and AJAX, you can seach and the results are quick it also have limiters. http://www.upgradedtutorials.info/tutorials/fast-search-and-sorting-data-in-mysql-using-php-and-ajax/

treehouse : what would you like to learn today?

Forums

How to separate PHP content returned in an AJAX Jquery POST function