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

Automatyczne wyświetlanie postów Wordpress przy użyciu JS, AJAX
KI
  • Rejestracja:około 15 lat
  • Ostatnio:prawie 12 lat
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:

Kopiuj
 
<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:

Kopiuj
 
       <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


my-motivator.pl
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:4 dni
  • Lokalizacja:Rzeszów
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.


KI
  • Rejestracja:około 15 lat
  • Ostatnio:prawie 12 lat
0

Po tym jak wejdziesz na:http:// 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:)


my-motivator.pl
edytowany 2x, ostatnio: kris_IV
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:4 dni
  • Lokalizacja:Rzeszów
1

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

Kopiuj
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/

Kopiuj
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.


edytowany 1x, ostatnio: dzek69
KI
  • Rejestracja:około 15 lat
  • Ostatnio:prawie 12 lat
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)

Kopiuj
 <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>    
 

my-motivator.pl
edytowany 1x, ostatnio: kris_IV
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:4 dni
  • Lokalizacja:Rzeszów
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ć :)


Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)