www.webdeveloper.com
Results 1 to 2 of 2

Thread: AJAX, javascript, php, wordpress, passing variables and no page refresh...

  1. #1
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101

    AJAX, javascript, php, wordpress, passing variables and no page refresh...

    Hi!
    I'm trying to do something and I don't even know if it's possible (if not, I need to change direction ASAP).
    My point is to do a wordpress blog, with horizontal scrolling, and scrolling achieved with a slide effect (mootool).
    Basically, I'll one huge page, 5000px wide or something, and the whole design is based on the slide effects. So I can't refresh the page.
    My idea is to have wordpress index.php page modified so that it would list the categories (this is easy), but it would also have loops to show subcategories, and then another loop to show a post.
    Navigation would be so :
    Visitor selects a category -> page moves to the right with a slide effect and shows the list of subcategories, as well as a list of posts. (here, the user can choose the subcategory and it would refresh the post list accordingly, but if the page is reloaded, it will be back for a second or so to point 0, which would be the page displaying the categories). When the list of posts is displayed, the visitor can click on a post title and the page slides to the right one more time and displays the post with the possibility to comment and such.

    My idea : when the user clicks on the category he wants, it should send a variable containing the category ID to a wordpress php loop, who would then create a list of subcategories (I don't want to write 30 conditionals... passing a variable would be a good solution). But my problem is to have this loop started without refreshing the page, so the loop can be restarted, but with javascript, and should include the variable. (I guess if the first loop refresh while passing the variable from javascript to php is possible, the others should be about the same)
    I don't know if I'm really being clear with that... I saw that passing a javascript variable to php without refreshing the page is doable with AJAX, however I'm not sure I understood it correctly.
    I looked at countless forum posts and tutorials, but it's mainly used to update a total on a cart or to change a display mode, my thing here is way more complicated since it involves refreshing a php loop while passing a variable to it.

    Thanks a lot for any suggestion or pointer !

  2. #2
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    I found somebody explaining something that could help me, but I can't get it to work... Could you tell me if the code if flawed in a way?
    Remember it's wordpress...
    PHP Code:
    <div id="primary">
                <div id="content" role="main">
                
    <script>
    function cat_ajax_get(catID) {
        jQuery("a.ajax").removeClass("current");
        jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
        jQuery("#loading-animation-2").show();
        var ajaxurl = 'http://www.espacescomprises.com/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                jQuery("#category-post-content").html(response);
                jQuery("#loading-animation").hide();
                return false;
            }
        });
    }
    </script>
    <?php

    $categories 
    get_categories(); ?>

    <ul id="category-menu">
        <?php foreach ( $categories as $cat ) { ?>
        <li id="cat-<?php echo $cat->term_id?>"><a class="<?php echo $cat->slug?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id?>');" href="#"><?php echo $cat->name?></a></li>

        <?php ?>
    </ul>



    <?
    add_action
    'wp_ajax_nopriv_load-filter''prefix_load_cat_posts' );
    add_action'wp_ajax_load-filter''prefix_load_cat_posts' );
    function 
    prefix_load_cat_posts () {
            
    $cat_id $_POST'cat' ];
                 
    $args = array (
                
    'cat' => $cat_id,
                
    'posts_per_page' => 10,
                
    'order' => 'DESC')

                ;

            
    $posts get_posts$args );

            
    ob_start ();
            foreach ( 
    $posts as $post ) {
            
    setup_post_data$post ); ?>

            <div id="post-<?php echo $post->ID?> <?php post_class(); ?>>
                <hi class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></hi>

                <div id="post-content">
                
                <?php the_excerpt(); ?>


    <div id="loading-animation" style="display: none;"><img src="<?php echo admin_url 'images/loading-publish.gif' ); ?>"/></div>
    <div id="category-post-content"></div>






                </div>
           </div>

           <?php wp_reset_postdata();

           
    $response ob_get_contents();
           
    ob_end_clean();

           echo 
    $response;
           die(
    1);

           } 
    ?>

                </div><!-- #content -->
            </div><!-- #primary -->
    My ajax function is clearly not working, I don't see the class "current" when I click on a category (I'm watching the generated source code using webdeveloper toolbar). So this part is failing. Could anybody tell me why?
    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles