Grow your CSS skills. Land your dream job.

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

  • # March 28, 2011 at 4:56 am

    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 !

    # March 28, 2011 at 5:19 pm

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


    //php
    < ?php
    echo '
    ';
    echo data;
    echo '
    ';

    echo '
    ';
    echo data2;
    echo '
    ';
    ?>

    //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 :(

    # March 29, 2011 at 1:24 am

    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 !

    # March 30, 2011 at 3:14 am

    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?

    # March 30, 2011 at 4:54 am

    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

    # March 30, 2011 at 4:56 am

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

    # March 30, 2011 at 5:32 am

    OK – you can check it now..

    # March 30, 2011 at 10:41 am

    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?

    # March 30, 2011 at 4:24 pm

    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…. :-)

    # April 1, 2011 at 12:49 am

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


    Heading


    Some text




    Heading


    Some text


    If you only wanted the headings you could do something like

    $('h1').siblings().remove().unwrap();
    # April 1, 2011 at 1:59 am

    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);
    # April 1, 2011 at 5:49 am

    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

    # April 1, 2011 at 9:34 am

    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.

    # April 1, 2011 at 9:53 am

    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.

    # April 1, 2011 at 12:35 pm

    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);
Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".