SlideShare une entreprise Scribd logo
1  sur  15
Drupal 7 Advanced AJAX
Tips and Tricks
Summary
• Non-form related AJAX
• Responding to an AJAX request
• Bind AJAX behavior to a simple link
• In more than one way
• Modify this behavior via javascript
• Modify the AJAX response via javascript
• Use a custom response command
• Perform AJAX on non-traditional events like a
timer.
We are skipping #ajax
• This is the basic usage
• Plenty of examples in examples.module
• Too tied to the form id and cache
Responding to an AJAX request
Drupal’s AJAX Commands
• http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax_commands/7
Simplest Example
• <a href="/aajax-example/simple/nojs"
id="aajax-example-1" class="use-ajax">Simple
example</a>
• l(t('Simple example'), 'aajax-
example/simple/nojs', array('attributes' =>
array('id' => 'aajax-example-1', 'class' => 'use-
ajax')))
Second verse, same as the first
<a href="/aajax-example/simple/nojs" id="aajax-
example-2" class=“aajax-example use-ajax">Simple
example 2</a>
Setting up the AJAX event
• Use Drupal’s behavior
• Bind to a DOM object
• Fill in the element_settings
• Register the Drupal.ajax object
Element Settings
Also:
• wrapper
Let’s see this again
<a href="/aajax-example/simple/nojs" id="aajax-
example-2" class=“aajax-example use-ajax">Simple
example 2</a>
Manipulating the response
Custom AJAX Command
Javascript side
PHP Side
What about things that are not clicks?
Wrapping up
• This framework can integrate into strong
javascript applications.
• Server can be used for storage, rendering and
decision making.
• Client can be more interactive.
• Framework can add additional CSS and
javascript to page automatically.

Contenu connexe

Tendances

Specifying a default exception strategy
Specifying a default exception strategySpecifying a default exception strategy
Specifying a default exception strategysivachandra mandalapu
 
Advance java session 20
Advance java session 20Advance java session 20
Advance java session 20Smita B Kumar
 
Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7andrewmriley
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSArmin Vieweg
 
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafSpring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafThymeleaf
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp  - Giáo trình Bách Khoa AptechSession 5 : intro to jsp  - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp - Giáo trình Bách Khoa AptechMasterCode.vn
 
Angular JS Indtrodution
Angular JS IndtrodutionAngular JS Indtrodution
Angular JS Indtrodutionadesh21
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsJoseph Khan
 
How angularjs saves rails
How angularjs saves railsHow angularjs saves rails
How angularjs saves railsMichael He
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
 

Tendances (20)

Validate json schema
Validate json schemaValidate json schema
Validate json schema
 
Specifying a default exception strategy
Specifying a default exception strategySpecifying a default exception strategy
Specifying a default exception strategy
 
Property place holder
Property place holderProperty place holder
Property place holder
 
Advance java session 20
Advance java session 20Advance java session 20
Advance java session 20
 
Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7
 
Validation
ValidationValidation
Validation
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
 
Ch. 11 deploying
Ch. 11 deployingCh. 11 deploying
Ch. 11 deploying
 
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafSpring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
 
Angular js
Angular jsAngular js
Angular js
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp  - Giáo trình Bách Khoa AptechSession 5 : intro to jsp  - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
 
Angular JS Indtrodution
Angular JS IndtrodutionAngular JS Indtrodution
Angular JS Indtrodution
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applications
 
How angularjs saves rails
How angularjs saves railsHow angularjs saves rails
How angularjs saves rails
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
Sftplite
SftpliteSftplite
Sftplite
 
Born_ruby_on_rails
Born_ruby_on_railsBorn_ruby_on_rails
Born_ruby_on_rails
 
Object store
Object storeObject store
Object store
 

Similaire à Drupal 7 advanced ajax

Similaire à Drupal 7 advanced ajax (20)

Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
 
Java colombo-deep-dive-into-jax-rs
Java colombo-deep-dive-into-jax-rsJava colombo-deep-dive-into-jax-rs
Java colombo-deep-dive-into-jax-rs
 
My04_MVC.pdf
My04_MVC.pdfMy04_MVC.pdf
My04_MVC.pdf
 
Drupal & javascript
Drupal & javascriptDrupal & javascript
Drupal & javascript
 
Guacamole
GuacamoleGuacamole
Guacamole
 
Prototype-1
Prototype-1Prototype-1
Prototype-1
 
Prototype-1
Prototype-1Prototype-1
Prototype-1
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Ajax Tags Advanced
Ajax Tags AdvancedAjax Tags Advanced
Ajax Tags Advanced
 
Jqueryppt (1)
Jqueryppt (1)Jqueryppt (1)
Jqueryppt (1)
 
Jsp
JspJsp
Jsp
 
Introduction to AJAX
Introduction to AJAXIntroduction to AJAX
Introduction to AJAX
 
JSP Part 2
JSP Part 2JSP Part 2
JSP Part 2
 
Lecture 5 JSTL, custom tags, maven
Lecture 5   JSTL, custom tags, mavenLecture 5   JSTL, custom tags, maven
Lecture 5 JSTL, custom tags, maven
 
Java .ppt
Java .pptJava .ppt
Java .ppt
 
25.ppt
25.ppt25.ppt
25.ppt
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Ajax Under The Hood
Ajax Under The HoodAjax Under The Hood
Ajax Under The Hood
 
Angular js
Angular jsAngular js
Angular js
 

Plus de merlinofchaos

Plus de merlinofchaos (7)

Semantic views
Semantic  viewsSemantic  views
Semantic views
 
The panels family
The panels familyThe panels family
The panels family
 
Panels, Panels Everywhere
Panels, Panels EverywherePanels, Panels Everywhere
Panels, Panels Everywhere
 
The Chaos Tools Suite
The Chaos Tools SuiteThe Chaos Tools Suite
The Chaos Tools Suite
 
User Experience
User ExperienceUser Experience
User Experience
 
Panels 2 and Nodequeue 2
Panels 2 and Nodequeue 2Panels 2 and Nodequeue 2
Panels 2 and Nodequeue 2
 
Drupal 6 Theming
Drupal 6 ThemingDrupal 6 Theming
Drupal 6 Theming
 

Dernier

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024The Digital Insurer
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies
 

Dernier (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 

Drupal 7 advanced ajax

  • 1. Drupal 7 Advanced AJAX Tips and Tricks
  • 2. Summary • Non-form related AJAX • Responding to an AJAX request • Bind AJAX behavior to a simple link • In more than one way • Modify this behavior via javascript • Modify the AJAX response via javascript • Use a custom response command • Perform AJAX on non-traditional events like a timer.
  • 3. We are skipping #ajax • This is the basic usage • Plenty of examples in examples.module • Too tied to the form id and cache
  • 4. Responding to an AJAX request
  • 5. Drupal’s AJAX Commands • http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax_commands/7
  • 6. Simplest Example • <a href="/aajax-example/simple/nojs" id="aajax-example-1" class="use-ajax">Simple example</a> • l(t('Simple example'), 'aajax- example/simple/nojs', array('attributes' => array('id' => 'aajax-example-1', 'class' => 'use- ajax')))
  • 7. Second verse, same as the first <a href="/aajax-example/simple/nojs" id="aajax- example-2" class=“aajax-example use-ajax">Simple example 2</a>
  • 8. Setting up the AJAX event • Use Drupal’s behavior • Bind to a DOM object • Fill in the element_settings • Register the Drupal.ajax object
  • 10. Let’s see this again <a href="/aajax-example/simple/nojs" id="aajax- example-2" class=“aajax-example use-ajax">Simple example 2</a>
  • 13. What about things that are not clicks?
  • 14.
  • 15. Wrapping up • This framework can integrate into strong javascript applications. • Server can be used for storage, rendering and decision making. • Client can be more interactive. • Framework can add additional CSS and javascript to page automatically.