AJAX with Validator.nu API

4/25/2015 1parish.saintpats.org kofc809.org

AJAX with Validator.nu API

Today’s Event hosts

• St. Patrick’s Church & School - Tacoma

• Knights of Columbus Tacoma Council 809

4/25/2015 2parish.saintpats.org kofc809.org

AJAX with Validator.nu API

Moderator: Joe Devlin

4/25/2015 3parish.saintpats.org kofc809.org

AJAX with Validator.nu API

Access this slideshow at:

http://www.vividventures.biz/d/?q=node/8

4/25/2015 4parish.saintpats.org kofc809.org

A word from our hosts•St. Patrick’s Church – Tacoma

o The pastoral council has generously offered us this location for today, as part of the churches community outreach.

o Founded in 1892

o Aligned with St. Patrick’s Catholic School link

o Reference: The Bible API

o Working on the Engaged Church model“Growing an Engaged Church” by Albert Winseman, Gallup Press, ISBN 978-1-59562-014-9

o Promoting personal development with Strengths Finder.“Strengths Finder” by Tom Rath, Gallup Press, ISBN 978-1-59562-015-6

strengthsfinder.com

4/25/2015 5parish.saintpats.org kofc809.org

A word from our hosts• Knights of Columbus www.kofc.org

o Founded in 1882

o Dedicated to “Saving Lives and Changing Lives”

o Promoting strong families through charitable giving and a AAA rated life insurance and annuity program.

o Local projectsHabitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care &

4US.org, Coats for Kids, Wheelchair Mission.

4/25/2015 6parish.saintpats.org kofc809.org

Introduction•Joe Devlin - moderator

o Member of St Patrick’s Parish and K of C council 809

o Working as a web host for small to medium sized businesses.

o Interested in Javascript for the obvious reasons that it is a must

for web development, plus for the purposes of getting people

together to code; JS is a universal standard that comes with

freely downloadable browsers and tools. We can easily

collaborate.

4/25/2015 7parish.saintpats.org kofc809.org

Time management

4/25/2015 8parish.saintpats.org kofc809.org

Present

Code

Discuss

4/25/2015 9parish.saintpats.org kofc809.org

Schedule

0830-0845 Set-up laptops, coffee and pastries

0845-0900 Introduce ourselves

0900-1000 Workspace setup, AJAX Basics, validator.nu

1000-1015 Break

1015-1130 validatorNu-JSwebServiceAPI

1130-1200 Lunch

Rest Rooms• Down the hall past the fireside room

4/25/2015 10parish.saintpats.org kofc809.org

Attendee Introduction• Let each of us introduce ourselves

o My name is ____________. (First name)

o Working as a ____________, or looking for work as a _________.

o I have been working on / studying ____________________.

o My current question is _____________________.

o What am I doing with social networking to market myself in the

job market, or my business?

4/25/2015 11parish.saintpats.org kofc809.org

Setup for today

4/25/2015 12parish.saintpats.org kofc809.org

• Pierce County Library applyo Teamtreehouse.com

o teamtreehouse.com/gateways/pierce_county_public_library/signup

o Why? Teachable, repeatable, powerful

• codepen.io

• http://www.it-ebooks.info/ ajax

• https://github.com/Tacoma-JS• Send a request to me for write access.

HTML Validation in the spirit of Test Driven Development

4/25/2015 13parish.saintpats.org kofc809.org

• When writing javascript in the DOM it is imperative that the HTML be valid, especially if manipulating the DOM.

• One possible way to confirm the validity is to submit your markup to Validator.nu in one of the following formatso Addresso File uploado Text field

• Try it!

HTML Validation automation sure would be nice

4/25/2015 14parish.saintpats.org kofc809.org

• After repeatedly testing a few pages the novelty wears off and I think it would be nice if each page under development returned validation automatically so I can focus on writing code and not waste time on validating the document.

• So I clearly need to send data to the validator.nu API(application programmer interface) in the background (asynchronously) so the validator does not hog the intended page function.

• This is clearly a job for AJAX.

AJAX Basics at Teamtreehouse

4/25/2015 15parish.saintpats.org kofc809.org

• Teamtreehouse AJAX-basics link (must be logged in)

o Introducing AJAX - link In Chrome w/ settings->tools->javascript console Log XMLHttpRequest

tool; view the validator.nu page for XHR requests. See any?

o How AJAX works – link XMLHttpRequest - Mozillas Developer Network Create the XHR object, callback function, open

request, and send the request

o A simple AJAX example - link AJAX requests ONLY work through a web server! onreadystatechange, readystate

HTML Validation automation sure would be nice – Deja Vu

4/25/2015 16parish.saintpats.org kofc809.org

• After repeatedly testing a few pages the novelty wears off and I think it would be nice if each page under development returned somewhat automatic validation so I can focus on writing code and not waste time on validating the document.

• I clearly need to send ‘data’ to the validator.nu API (application programmer interface) in the background (asynchronously) so the validator does not hog the intended page function.

• How does the validator.nu form interact with the server?

Validator.nu API

4/25/2015 17parish.saintpats.org kofc809.org

• You might be inclined to view the source of the validator.nuform and javascript to inspect how it works.oWhen viewing page source the markup is all on one line.

Clean it up at http://www.dirtymarkup.com

o Inside find HTML form stuff and the script name ‘script.js’ which you can see: https://validator.nu/script.js

oUsing the browsers find feature search for clues in code : An AJAX call keyword XMLHttpRequest (none found) A jQuery keyword $.ajax, $.post (none found)

oConclusion is: script only manipulates the DOM and data is sent via the standard HTML form submission button.

Validator.nu API

4/25/2015 18parish.saintpats.org kofc809.org

OR• maybe you would rather read the extensive instructions at

https://about.validator.nu/ and https://github.com/validator/validator/wiki/Service:-HTTP-interface

• You will find no specific Javascript patterns that can be copied from the instructions, and by extensively searching the web you find no published working Javascript yet .

• Naturally one would suspect the easiest solution would be to submit the data with jQuery.ajax.

jQuery.ajax submission to validator.nu

4/25/2015 19parish.saintpats.org kofc809.org

•Stuff that did not work with validator.nuo Following jQuery ajax instructionso Sending multipart form data with jquery – stackoverflowo http://hayageek.com/jquery-ajax-form-submito http://digipiph.com/blog/submitting-multipartform-

data-using-jquery-and-ajaxo How to $.post send multipart form data to validator.nu - link

XMLHttpRequest submission to validator.nu

4/25/2015 20parish.saintpats.org kofc809.org

• What javascript did work with validator.nu

• Find my code at: o at validatorNu-JSwebServiceAPI on github

o http://vividventures.biz/examples/js/validate_html

o codepen.io - link http://codepen.io/NorthDecoder/pen/JdjmVO

4/25/2015 21parish.saintpats.org kofc809.org

Main logic of test_valid_html.js

4/25/2015 22parish.saintpats.org kofc809.org

sendFileData() of test_valid_html.js

4/25/2015 23parish.saintpats.org kofc809.org

sendFileData() of test_valid_html.js

4/25/2015 24parish.saintpats.org kofc809.org

sendURLData() of test_valid_html.js

4/25/2015 25parish.saintpats.org kofc809.org

sendURLData() of test_valid_html.js

Issues with XMLHttpRequest submission to validator.nu

4/25/2015 26parish.saintpats.org kofc809.org

• Internet Explorer enters quirks mode on receiving invalid html, therefore the code will fail. Need to detect quirks mode and issue a warning.

• If the DOM is changed after the test then those changes are untested.

Reference

4/25/2015 27parish.saintpats.org kofc809.org

• https://gist.github.com/NorthDecoder

• https://github.com/VividVenturesLLC/validatorNu-JSwebServiceAPI

• Validator.nu – link

• How to $.post send multipart form data to validator.nu - link