Automatyczne wyświetlanie postów Wordpress przy użyciu JS, AJAX

0

Witam,
Mam następujący problem. Strona www.my-motivator.pl działa bez zarzutów bez JS. To znaczy po kliknięciu w "Czytaj więcej" przechodzi na następną stronę, tj. stronę 2, 3 itd. Natomiast przy zastosowaniu JS przechodzi tylko na stronę 2. Później odnośnik przycisku jest ok (strona 3) ale nie działa już kliknięcie w niego.

Macie jakiś pomysł jak rozwiązać ten problem? Skrypt JS:

 
<script type="text/javascript">
// Ajax-fetching "Load more posts"
$('.home_post_load_more a').live('click', function(e) {
	e.preventDefault();
	//$(this).addClass('loading').text('Loading...');
        //$('.load_more_text a').html('Loading...');
	$.ajax({
		type: "GET",
		url: $(this).attr('href') + '#main_container',
		dataType: "html",
		success: function(out) {
			result = $(out).find('#home_post_box_cont .home_post_box');
			nextlink = $(out).find('.home_post_load_more a').attr('href');
                        //alert(nextlink);
			//$('#boxes').append(result).masonry('appended', result);
                    $('#home_post_box_cont').append(result);
			//$('.fetch a').removeClass('loading').text('Load more posts');
                        //$('.load_more_text a').html('Load More');
                        
                        
			if (nextlink != undefined) {
				$('.home_post_load_more a').attr('href', nextlink);
			} else {
				$('.home_post_load_more').remove();
                                $('#home_post_box_cont').append('<div class="clear"></div>');
                              //  $('.load_more_cont').css('visibilty','hidden');
			}

                    if (nextlink != undefined) {
                        $.get(nextlink, function(data) {
                          //alert(nextlink);
                          if($(data + ":contains('home_post_box')") != '') {
                            //alert('not found');
                              //                      $('.load_more_cont').remove();
                                                    $('#home_post_box_cont').append('<div class="clear"></div>');        
                          }
                        });                        
                    }
                        
		}
	});
});
</script>     

I fragment kodu PHP który bez JS działa ok więc chyba jest dobry:

 
       <div id="home_post_box_cont">
        
            <?php
            $category_ID = get_category_id('blog');
            $args = array(
                         'post_type' => 'post',
                         'posts_per_page' => 3,
                         'post__not_in' => $slider_arr,
                         'cat' => '-' . $category_ID,                         
                         'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1)
                         );
            
            query_posts($args);
            $x = 0;
            if (have_posts() ) : while (have_posts()) : the_post(); ?>        
    
                <div class="home_post_box">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('home-post'); ?></a>
                    
					
                    <div class="home_post_cont">
                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <div class="home_post_meta"><!--<//?php the_author(); ?> ?php the_time('m-d-Y') --><?php the_time('m-d-Y') ?>  /  <?php comments_popup_link('Skomentuj »', 'Komentarzy : 1 »', 'Komentarzy : % »'); ?></div>   
						
						
                        <p><?php $temp_arr_content = explode(" ",substr(strip_tags(get_the_content()),0,225)); $temp_arr_content[count($temp_arr_content)-1] = ""; $display_arr_content = implode(" ",$temp_arr_content); echo $display_arr_content . '...'; ?></p>
                        
							<div class="postentry">
								<p class="home_post_more"> <a href="<?php the_permalink(); ?>" class="rmore">  Czytaj więcej... </a></p>
							</div>
                    </div><!--//home_post_cont-->
							
                    <div class="clear"></div>
                </div><!--//home_post_box-->
                
            <?php endwhile; else: ?>
			
            <?php wp_reset_query(); ?>                    
            <?php endif; ?>
         
        </div><!--//home_post_box_cont-->
        
       <div class="home_post_load_more"><?php next_posts_link('<img src="' . get_bloginfo('stylesheet_directory') . '/images/load-more-posts.png" />') ?></div>    

Z góry dziękuję za pomoc

0

Nie rozumiem który dokładnie link nie działa, wyjaśnij.

W tym momencie co bym nie kliknął to ładuje się bez ajaxa.

0

Po tym jak wejdziesz na// www.my-motivator.pl ładują się 3 wpisy (ostatni ten o endomondo). Klikasz w przycisk "Czytaj więcej" (czyli de facto w link do: http://my-motivator.pl/page/2/) i przy użyciu AJAX wyświetlają się kolejne 3 wpisy (od Jobsa do YouTuba). W tym momencie pod YouTubem pojawia się kolejny raz przycisk "Czytaj więcej" (link pod tym przyciskiem to: http://my-motivator.pl/page/3/) ale kliknąć już w ten przycisk nie mogę (nic się nie dzieje). Mam nadzieję, że teraz wyjaśniłem jaśniej:)

1

http://my-motivator.pl/page/2/

HTTP/1.1 200 OK => 
Server => 
Date => Thu, 06 Jun 2013 11:58:00 GMT
Content-Type => text/html; charset=UTF-8
Connection => close
Vary => Accept-Encoding
X-Powered-By => PHP/5.4.14
X-Pingback => http://my-motivator.pl/xmlrpc.php

http://my-motivator.pl/page/3/

HTTP/1.1 404 Not Found => 
Server => 
Date => Thu, 06 Jun 2013 11:58:25 GMT
Content-Type => text/html; charset=UTF-8
Connection => close
Vary => Accept-Encoding
X-Powered-By => PHP/5.4.14
X-Pingback => http://my-motivator.pl/xmlrpc.php
Expires => Wed, 11 Jan 1984 05:00:00 GMT
Cache-Control => no-cache, must-revalidate, max-age=0
Pragma => no-cache

Edit: Nic się nie dzieje, bo w $.ajax obsługujesz tylko success - są jeszcze callbacki do błędów.
Poza tym narzędzia webdeveloperskie do przeglądarki pozwalają Ci śledzić wysłane żądania i odpowiedzi. Ja np. zauważyłem, że po kliknięciu tego przycisku ładuje się strona 2 i od razu wysyłane jest zapytanie do strony 3 - zorientuj się dlaczego.

0

Zacznę od tego, że jestem amatorem. Wszystko co udało mi się zrobić na tym blogu (co nie działało a teraz działa) robiłem metodą prób i błędów podpierając się godzinami spędzonymi w google ;-) Zawsze coś sam zauważyłem i udało mi się pójść o krok dalej (dzięki temu myślę, że się sporo nauczyłem). Natomiast trafiłem teraz na ścianę. Serio nie wiedziałem co jest nie tak i nie mam w ogóle pomysłu jak to zmienić. Błąd o którym piszesz - teraz dopiero zauważyłem.
Na ten moment wyłączyłem całkowicie ten skrypt AJAX i gdy przechodzę do starszych stron można w nagłówku zaobserwować sytuację o której piszesz. Na stronie 2 nagłówek jest OK. Przy stronie /page/3/ ładuje prawidłową treść, ale w nagłówku pojawia się informacja "Nothing found for page 3" i pewnie to jest problemem - AJAX otrzymuje informację że nic nie zostało znalezione więc nie pozwala na kliknięcie w button. Muszę wrócić więc do pętli i tam znaleźć rozwiązanie tej zagadki.
Wielkie dzięki za udzieloną pomoc - sam bym tego nie zauważył.

---- EDIT ---- Po poprawieniu pętli wszystko działa ok. Poniżej podaje rozwiązanie (może się komuś początkującemu przyda)

 <div id="home_post_box_cont">
        <?php query_posts($query_string . '&cat=-11'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
				<div class="home_post_box">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('home-post'); ?></a>
                    
						<div class="home_post_cont">
							<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
								<div class="home_post_meta"><!--<//?php the_author(); ?> ?php the_time('m-d-Y') --><?php the_time('m-d-Y') ?>  /  <?php comments_popup_link('Skomentuj &#187;', 'Komentarzy : 1 &#187;', 'Komentarzy : % &#187;'); ?></div>   
						
								<p><?php $temp_arr_content = explode(" ",substr(strip_tags(get_the_content()),0,225)); $temp_arr_content[count($temp_arr_content)-1] = ""; $display_arr_content = implode(" ",$temp_arr_content); echo $display_arr_content . '...'; ?></p>
                        
						<div class="postentry">
							<p class="home_post_more"> <a href="<?php the_permalink(); ?>" class="rmore">  Czytaj więcej... </a></p>
						</div>
                    </div><!--//home_post_cont-->
							
                    <div class="clear"></div>
                </div><!--//home_post_box-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

        </div><!--//home_post_box_cont-->
        
       <div class="home_post_load_more"><?php next_posts_link('<img src="' . get_bloginfo('stylesheet_directory') . '/images/load-more-posts.png" />') ?></div>    
 
0

Miałem Ci jeszcze odpisać, i trochę nakierować na korzystanie z narzędzi webdev (stąd komentarz testowy), ale net mi padł właśnie wtedy :/
W każdym razie gorąco polecam Firebug dla FF albo wbudowane narzędzia w każdą inną przeglądarkę (nawet IE) - przydaje się nie raz, wszystko jak na dłoni widać :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1