Animovaná Ajax Loading ikona čistě v CSS

Nedávno jsem si v rámci nasazování animované ikony v SVG pro Ajaxové nahrávání poznamenal i odkaz na Best CSS-SVG Loaders and Spinners na Code Geekz. Kdyby jsem si na to vzpomněl včas, nemusel jsem znovu prohledávat internety při zdobení jednoho projektu zase animovanou ikonou pro Ajax (tedy loader či spinner), tentokrát ale čistě v CSS. Několik vybraných odkazů...

• How To Make a Loader na W3Schools.com - pěkné, jednoduché a s vysvětlením
• SpinKit | Simple CSS Spinners - řada prostých jednobarevných motátek, skládátek a jiných animovátek
• Single Element CSS Spinners - několik motátek s online možností obarvení, všechny si vystačí s jediným "divem"!
• CSS Load.net - Spinners in pure CSS and HTML - přehršel rozličných motátek s on-line nastavováním

Určitě si taky vyberete. :-)

Animovaná Ajax Loading ikona v SVG?

Scalable Vector Graphics - SVG - oslavilo (-a?) nedávno 15. narozeniny a pět let je už "dospělé". Dosud ale není v prohlížečích plně podporováno (viz Can I use... svg) a třeba u Googlu z Chrome výpárávají již zabudovanou podporu animací SMIL (také Can I use... svg-smil).

A přitom právě "samochodná" animace je užitečná třeba pro animované ikony pro Ajax loader. Můžete si je vygenerovat třeba na webu loading.io - Your SVG + GIF Ajax Loading Icons (ano, tam získáte i CSS a GIF verze), nebo na SVG Loaders - Sam Herbert potažmo GitHub - SamHerbert/SVG-Loaders: Loading icons and small animations built with SVG and CSS, kde jsou fakt sexy kousky. Další zdroje nabízí Best CSS-SVG Loaders and Spinners na Code Geekz.

Síla použití těchto ikon se projeví při vložení do css jako "data:image".

Ale co je to vlastně platné, když Chrome 45 a Opera 32 animace SMIL neschvaluje, zatím jen stížností v konzoli. Ať to takto zůstane dlouho. ;-)

"Syntax error, unrecognized expression"? Upgradoval jsi jQuery, že?

Jednoho dne vám váš kdysi stvořený scriptík místo postupného dotahování HTML kusů stránky AJAXem napíše do konzole "Error: Syntax error, unrecognized expression".
Inu co, zagooglíte a najdete javascript - jQuery + client-side template = "Syntax error, unrecognized expression" - Stack Overflow a následně prostudujete jQuery Core 1.9 Upgrade Guide | jQuery a máte jasno:

jQuery 1.9 začalo jinak zpracovávat Ajaxem natažený HTML kód. Samozřejmě z důvodů bezpečnosti a blá blá blá...

No, prostě konstrukci
…
},
success: function(data){
    $(data).appendTo('#content');
…
doplňte kouskem
…
},
success: function(data){
    $($.parseHTML(data)).appendTo('#content');
…

Podle dalších informací tuto radikální změnu další verze nějak zase napravili, ale to už si ověřte sami. ;-)

Který ajax vyvolal ajaxComplete?

Při použití jQuery.ajax() zpravidla funkci, která zpracuje přečtená data, definujete jako metodu "cuccess" (všeobecně vřele doporučováno). Když se ale na stránce potkává scriptů více, nemusíte moci funkci "success" nadefinovat vždy tak, aby udělala vše, co je třeba. A přitom potřebujete zareagovat na dokončení Ajaxu. Pak přijde ke slovu událost (event) .ajaxComplete() (oproti .ajaxSuccess() reaguje i na dokončení ajaxu s chybou). V případě jednoho ajaxu je hotovo. Ale když je ajaxů více,  potřebujete identifikovat, který to vlastně právě skončil. To je optimální vyřešit kontrolou nastavení ajaxu. Buď můžete třeba kontrolovat použitou URL adresu, nebo si - jako já - nadefinovat zcela nový parametr. ...jenom na to přijít :-)


$.ajax({
    type: 'POST',
    url: actionURL,
    data: {},
    success: function(result) {
        /* standardní obsluha */
    },
    myFlag: true
});

...

$(document).ajaxComplete(function(event, xhr, settings) {
    if ( settings.myFlag ) {
        myFunction();
    }
});


Viz také Can jquery code be triggered by ajax success? - Drupal Answers, jQuery ajaxComplete: Is there a way to tell which Javascript function executed the ajax call? - Stack Overflow nebo ajax - jquery::ajaxStop() versus jquery::ajaxComplete() - Stack Overflow.