Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times

    Easiest/best way to pull-show some content with Ajax?

    Hi,

    I just completed my Ajax training over at codeacademy.com a couple of weeks ago (it's a hidden one, but you can Google it). I still have a hard time understanding the whole concept and the possibilities, but I know the general idea and I would like to do a little exercise.

    I'm making a landing page and I have a section where people can click on these little tabs and a div will slide out with content pertaining to that tab. Of course, I could do this by just using HTML and ids to correlate the tabs and the content, but I want to give myself a lil' Ajax exercise.

    So, what would be the best way to use Ajax like this? Maybe create a PHP array in a .php file and have the ajax callback return data? Or should I use XML (which I have no idea about)? I would prefer to not use a database to keep things simple.

    Thanks.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    The best is to call php to echo (return ) content. Then you can update the tab content with the response.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Ya, in this case, just returning a string from the PHP is best. That way, you can return actual HTML that you don't have to bother with parsing.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Hey guys,

    Thanks for the tips. I was messing around and I decided to do things via JSON instead (I did it with JSON b/c I wanted to do this w/o a server... but then I realized that ajax needs a server to run, derp).

    My goal was to have clickable items generate based on json data (1st key in set). Then when they click the item, it will pop up data correlating with that set in the data (2nd key in set).

    For anyone curious, here's what I did. It probably isn't the most efficient cause it's what I came up with through my own brainstorming.

    1. I create a .json file and put in my data in an array. Each set/iteration has 2 keys (i.e. json[0].reason, json[0].detail). Note: Json is ugly to read, but for a small exercise like this and when manually made, it's not bad.

    Code:
    
    [
    
    
    { "reason": "mobile-optimized", "detail": "dis num 1" },
    { "reason": "experienced designer", "detail": "dis da second" },
    ...
    ]
    2. I then did an ajax call with $.getJSON. Inside, I used a for loop to list all the values of key 1.

    Code:
    for ( i = 0; i < json.length; i++) {
            $("#s3").append("<span class='reason' data-id='" + i + "'> + json[i].reason + "</span>");
        }
    That data-id is something I learned and it's a javascript attribute there to track which item will be clicked.

    3. Further inside the ajax call, I had a click function that would return data (key2 of the same set) by using the data-id attribute as an explicit array identifier (not sure if that's the right term).

    Code:
    //get id attribute... also iteration # in loop
    ​$(".reason").click(function() {
      var stuff = $(this).data('id');
      $("#coco").html(json[stuff].detail)
    
    }
    4. Voila! See pictures. Items are dynamically generated by loading what's in my json data.

    Now that it's created, I just have to do step 2: styling it. I also want a more beautiful AJAX experience, so that means creating a loading spinner and hiding it by using the .done function. Sounds like a lot of work for 1 section of a page, I know...

    cats1.jpg


    cats2.jpg
    Last edited by RDesignista; Oct 08th, 2014 at 06:50 PM.

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Cool :-)
    It looks like a jQuery ui tabs example, and it's not really dynamic. However, its a good programming exercise.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com