SlideShare uma empresa Scribd logo
1 de 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.

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante a Drupal 7 advanced ajax

Semelhante a 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
 

Mais de merlinofchaos

Mais 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
 

Último

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
🐬 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
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
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
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
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
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
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
 

Último (20)

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
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
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
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
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
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
 

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.