ProcessWire - Ajax - Versionsgeschichte

37.49.72.8: /* JSON u.ä. nachladen */

2019-09-06T15:18:41Z

JSON u.ä. nachladen

37.49.72.8: /* JSON u.ä. nachladen */

2019-09-06T13:18:34Z

JSON u.ä. nachladen

37.49.72.8 am 6. September 2019 um 13:16 Uhr

2019-09-06T13:16:01Z

37.49.72.8 am 6. September 2019 um 13:14 Uhr

2019-09-06T13:14:17Z

37.49.72.8 am 6. September 2019 um 13:05 Uhr

2019-09-06T13:05:49Z

93.208.103.149 am 11. Februar 2019 um 10:16 Uhr

2019-02-11T10:16:49Z

93.208.103.149: Die Seite wurde neu angelegt: „Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem K…“

2019-02-11T10:10:41Z

Die Seite wurde neu angelegt: „Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem K…“

Neue Seite

Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem Klick neu zu laden. So entsteht sehr schnell ein "App-Feeling". ProcessWire unterstützt einen dabei.

Links:
https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579 (Kurzanleitung)
https://github.com/tutsplus/how-to-create-an-ajax-driven-theme-for-processwire (ProcessWire Profile mit AJAX)

Allgemeines Vorgehen

* Links mit der Klasse ajax-link werden über JavaScript (meist jQuery) abgefangen und über AJAX an den Server geschickt.
* ProcessWire erkennt anhand der internen System-Variable $ajax dass ein AJAX Request vorliegt
* Mit einfachen Ifs kann man ProcessWire dazu bringen nur den gewünschten Content zu generieren
* Den zurückgegebenen HTML Inhalt mit jQuery austauschen.

Natürlich sind auch JSON Antworten denkbar. Das kann man dann alles über JavaScript verarbeiten

Vereinfachtes Beispiel

Komplexeres Beispiel mit Einbeziehen der Browser History, verhindern von doppeltem Laden bereits vorhandener Inhalte...

<syntaxhighlight lang="javascript">
$(function() {

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

// flexslider
$('.flexslider').flexslider({
pauseOnHover: true,
controlNav: false,
prevText: "",
nextText: "",
});

/*
* HTML5 pushstate and ajax content
*/

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

// check to see it contents already accessed
if($(this).hasClass('current')){

console.log('current page');

// prevent click through
e.preventDefault();
// exist click function (dont load new content)
return true;
}

$('.current').removeClass('current'); // remove .current from active link
$('.parent').removeClass('parent'); // remove .current from active link
$(this).addClass('current'); // add .current

var parent = $(this).attr('parent');
if(parent){ // if link page has parent nav
$('nav a[name="'+parent+'"]').addClass('parent'); // add .current
}

// add progress spinner on cursor
$('body').css('cursor','progress');

// remove cusor spinner
var pointerTimeout = setTimeout(function () {
$('body').css('cursor','auto'); // progress spinner on cursor
}, 1000);

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// add new url to html5 history
history.pushState('', +href, href); // push url to history

// change title to new page
$('title').html(title);

// send GA pageview
ga('send', 'pageview', href);

// prevent click and reload
e.preventDefault();
});

// for back / forwards browser navigation
var toggleHistoryVisitNum = 0;
function toggleHistory(){
window.onpopstate = function(event) {
if(window.location.hash == ""){
loadContent(location.pathname);
}
};
}

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// animate the requested content
$('.content.current-content').animate({
// animate out old content
opacity: 0
}, 400, function(){

$('.content.current-content').slideUp(400);

// content animation finished
$('.content.ajax').animate({
// animate in new content
opacity: 1
}, 400, function(){

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

/*
* run js functions for new content
*/

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

});
});

// toggle use of back and forward buttons on browser
if(!toggleHistoryVisitNum){
toggleHistory();
}

// keep track of number of Ajax requests
toggleHistoryVisitNum++;

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

@@ Zeile 12: / Zeile 12: @@
 == Snippets ==
-=== JSON u.ä. nachladen ===
+=== Inhalte über JSON nachladen ===
 Lets say that you want pages in your site to return a JSON string with the page's id, title, and number of children when it is requested from ajax. When not requested from ajax, they will return their content as normal.

@@ Zeile 34: / Zeile 34: @@
 <ul id='info'></ul>
 <script type='text/javascript'>
-     var url = '/'; // this is homepage, so replace '/' with page URL you want to load JSON from
+     var url = '/'; // this is homepage, so replace '/' with page URL you want to load JSON from or use window.location.href for actual page
      $(document).ready(function() {
          $.getJSON(url, function(data) {
@@ Zeile 51: / Zeile 51: @@
 • numChildren: 5
 </pre>
 === Inhalt einer Seite laden (vereinfacht) ===
 Beachte, man sollte noch einiges mehr beachten (Browser History...)

@@ Zeile 1: / Zeile 1: @@
 Man kann mit PW relativ einfach dynamische Webseiten erzeugen. Dabei werden nur die benötigten Teile der Webseite ausgetauscht, anstatt die Seite nach jedem Klick neu zu laden. So entsteht sehr schnell ein "App-Feeling". ProcessWire unterstützt einen dabei.
   https://processwire.com/talk/topic/225-how-to-work-with-ajax-driven-content-in-processwire/
 == Snippets ==

@@ Zeile 4: / Zeile 4: @@
 == Snippets ==
 === JSON u.ä. nachladen ===
 === Inhalt einer Seite laden (vereinfacht) ===
 Beachte, man sollte noch einiges mehr beachten (Browser History...)
 Es gibt ein ausführliches Tutorial dazu.
 <syntaxhighlight lang="php">
 <?php

@@ Zeile 14: / Zeile 14: @@
 Natürlich sind auch JSON Antworten denkbar. Das kann man dann alles über JavaScript verarbeiten
-Vereinfachtes Beispiel
+Vereinfachtes Beispiel (bessere Struktur wäre wohl die Teile der Seiten in Variablen zu laden und dann die if Statements kompakt zu halten.
 Komplexeres Beispiel mit Einbeziehen der Browser History, verhindern von doppeltem Laden bereits vorhandener Inhalte...
 <syntaxhighlight lang="javascript">
 $(function() {