SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help adding jQuery AJAX functionality to PHP result

    Hi all

    I'm currently working with some php code which shows a list of venues base on the category_id.
    What I'd like to do is change the result depending on what link I click using AJAX.

    Just trying to get a understanding of how things work and how I'd fit everything together using the jQuery Ajax method, or just AJAX not sure if one is better than the other.

    Query DB (minimised for viewing)

    Code PHP:
    function getVenueInfo($category_id) {
        static $array;
        if (!$array) {
            $array = array();
     
            $sql = 'SELECT venue_id,
                           title,
                           category_id,
                           address,
                           FROM tbl_venues';
     
                    $result = mysql_query($sql);
                    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                    $array[$row['category_id']][] = $row;
                }
            }
        return $array[$category_id];
    }

    I'd like these links to change the result below:

    Code HTML4Strict:
    <p class="ajax-links">
                <a href="#" onClick="" > House</a>
                <a href="#" onClick="" > Dance</a>
                <a href="#" onClick="" > Rock</a>
    </p>
    getVenueInfo is the hook here which will change the result based on category_id selected, could we add this to the links above some how?

    Code PHP:
    <dl class="venues">    
                <?php foreach (getVenueInfo('dance') as $info) { ?>
                        <dt>
                            <?= $info['title'] ?>
                        </dt>
     
                        <dd>
                            <i><?= $info['address'] ?></i>
                        </dd>
                <?php } ?>
    </dl>

    Any guidance, examples would be great thanks.

    cb
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,447
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Hi,

    Probably the simplest way to do this is to have a PHP script that takes the music genre as a POST param and returns the HTML of the dl, which you can then insert into the page via JS.

    As an example, the code might look something like this:

    PHP Code:
    // Your script includes / setup here

    $genre $_POST['genre'];

    $output '';
    foreach (
    getVenueInfo($genre) as $info)
    {
        
    $output .= "<dt>{$info['title']}</dt><dd><i>{$info['address']}</i></dd>";
    }

    echo 
    $output
    HTML Code:
    <p class="genre-links">
        <a href="#">House</a>
        <a href="#">Dance</a>
        <a href="#">Rock</a>
    </p>
    
    <dl class="venues"></dl>
    
    <script>
        $(".genre-links").click(function(event){
            event.preventDefault();
            $( ".venues" ).load( "venue_lists.php", { genre: this.innerHTML } );
        });
    </script>
    Note that I've assumed the use of jQuery, and that the JS script block is placed just before the closing </body> tag of the page.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot fretburner
    Appreciate your response, this is exactly what I need

    My old approach was using just PHP to display each genre result within a separate tab.

    Code PHP:
    <div class="tab">
    <dl class="venues">    
               <?php foreach (getVenueInfo('dance') as $info) { ?>
    ...
    <div class="tab">
    <dl class="venues">    
                <?php foreach (getVenueInfo('rock') as $info) { ?>
    ...
    and so on...

    I'd now like to show all the venues as one big list, then as discussed, give the user the option to narrow this down to the genre they like with AJAX. So, if for some reason or other javascript is not available, they'll still see the full list of venues.

    Currently working locally with your code/advice trying to get things setup, post back shortly.

    Thanks, cb
    The more you learn.... the more you learn there is more to learn.

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,447
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by computerbarry View Post
    I'd now like to show all the venues as one big list, then as discussed, give the user the option to narrow this down to the genre they like with AJAX. So, if for some reason or other javascript is not available, they'll still see the full list of venues.
    If you're already going to be rendering the page server-side with all venues, wouldn't it make sense just to hide the venues for all genres but the first, and then show them according to which link is clicked? That'll be much quicker than an ajax request back to the server. Maybe something along the lines of an accordion effect?

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fretburner

    I do see your point, though this is what I already have working, but with tabs as I mentioned above.

    Take for example a standard e commerce store showing a big list of t-shirts, with links on the side to narrow it down to t-shirts in a color of blue, color of green etc. This is exactly the same approach I'd like but with genre.

    I think the easiest approach would be if we can change the genre value
    Code PHP:
    (getVenueInfo('dance') as $info)
    which would then update the list, everything is already in place, regarding PHP anyway.

    Could we do it this way?

    Again, just trying to get a understanding here fretburner.
    The way things are going I'll eventually need to redesign my DB as some venues will be in two genres.

    Thanks, cb
    The more you learn.... the more you learn there is more to learn.

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,447
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    What about if the page returns the full list of venues by default, but you can pass a genre in the query string to filter the list, eg. venues.php?genre=rock

    Your genre links would then be something like this:

    HTML Code:
    <p class="genre-links">
        <a href="venues.php?genre=house">House</a>
        <a href="venues.php?genre=dance">Dance</a>
        <a href="venues.php?genre=rock">Rock</a>
    </p>
    and your JS:
    Code JavaScript:
    $(".genre-links a").click(function(event){
        event.preventDefault();
        $( ".venues" ).load( this.href );
    });

    This way, the page functions pretty similar for both JS and non-JS users - the JS users will just have the advantage of avoiding a full page reload each time they filter the list.

    Your PHP would need to do something like this:
    PHP Code:
    if ( isset($_POST['genre']) {

        
    // Grab venues for chosen genre

        
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
        {
            
    $output '';
            foreach (
    getVenueInfo($genre) as $info)
            {
                
    $output .= "<dt>{$info['title']}</dt><dd><i>{$info['address']}</i></dd>";
            }
            
            echo 
    $output;
        }
        
    } else {

        
    // Get all venues
        // Render and return full html page


    ( AJAX request detection from this blog post)

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about if the page returns the full list of venues by default
    Exactly fretburner, this is how I want things to start, then use the links to update without page refresh or url change.

    The method you mention is a great approach, though I want the page to have a consistent URL so everything is indexed as one full page (seo my main concern), and as you say, the guys with JS will get the benefit. I worked with something similar in the past and after much testing, reviewing analytics data, adding the extra query string was not the way to go. I want things to work as a type of application, well, the feel anyway.

    I'm also slightly confused with your code, you keep using isset($_POST['genre'], do you mean category_id? This is column name that acts as the genre name in my DB.

    And thanks for the link.

    Cheers, cb
    The more you learn.... the more you learn there is more to learn.

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,447
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Hi cb,

    Quote Originally Posted by computerbarry View Post
    The method you mention is a great approach, though I want the page to have a consistent URL so everything is indexed as one full page (seo my main concern), and as you say, the guys with JS will get the benefit. I worked with something similar in the past and after much testing, reviewing analytics data, adding the extra query string was not the way to go. I want things to work as a type of application, well, the feel anyway.
    If you really want to avoid using a query string, you could use POST, but you'd need to use some sort of form (perhaps with a dropdown, like you mentioned before) so that it would still work for your non-JS users:

    HTML Code:
    <form id="genre-select" method="post">
        <select name="genre">
            <option value="dance">Dance</option>
            <option value="house">House</option>
            <option value="rock">Rock</option>
        </select>
        <input type="submit" value="Update">
    </form>
    
    <script>
        $("form#genre-select input").hide();
        $("form#genre-select select").on('change', function(){
            $( ".venues" ).load( 'venues.php', { genre: this.value } );
        });
    </script>
    Quote Originally Posted by computerbarry View Post
    I'm also slightly confused with your code, you keep using isset($_POST['genre'], do you mean category_id? This is column name that acts as the genre name in my DB.
    In my last example it should actually have been $_GET['genre'] - naming it genre was to make it more user-friendly as it was to be visible in the URL. Whatever you name the request param, it wouldn't cause any problem with your PHP script as once it's passed into the getVenueInfo function the argument becomes available as $category_id.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •