AJAX on Moovweb

Transcript

1. Lesson AJAX and Javascript
2. There are 2 types of AJAX • HTML • JSON
3. The way you determine this is through the response.
4. The way you respond to each is unique, so it is important to know which you are getting
5. In the Chrome inspector, in the Network Tab you can inspect the response
6. How do we deal with HTML?
7. How do we deal with HTML? 1. Ensure content is going through our server 2. Map it in tritium 3. Open an html_fragment 4. Treat it like regular tritium
8. Ensure Content Is Using Moovweb Rewrite the URL to be mlocal, mstage or m depending on the current domain.
9. $host { replace(/^(\w+)\./) $host_var = $1 } $(".//script") { text() { replace(/www\.site\.com/, $host_var) } }
10. Map The Page In Tritium && Open html_fragment()
11. match($path, /ajax\/path/) { html_fragment() { @import "ajax_path.ts" } }
12. Now you can code like normal (with one exception)
13. # will work $(".//node") { # normal tritium } # will not work in # an html_fragment $("//node") { # normal tritium }
14. But what if it’s not HTML?
15. What if we can’t use Tritium?!
16. Then we have to use JS
17. How do we deal with JS?
18. Dealing with JS There are 4 generic methods: 1. Hijack their function call 2. Regex the source JS 3. DOMNodeAppear 4. Mutation Event
19. Hijacking Javascript
20. Let’s say we have this element: <input type="submit" onclick="sendData();" /> Or this javascript: $(".submit").on("click", function() { sendData(this); });
21. We can define a new function to take its place: var oldSendData = sendData; sendData = function() { oldSendData(); // do new stuff here. }
22. But what if the JS looks like this: var actions = { doAction: function() { $.post("/path", { success: function() { // obviously we cannot hijack this. // It's an anonymous function in another // anonymous function var html = "" html += "<div>" html += " <p>Pretend this is Dynamic</p>" html += "</div>" $("body").append(html); } }); } }
23. Regex Source JS
24. Let’s say we have a javascript file on their server named “foo.js” containing the aforementioned JS $(".//script[contains(@src,'foo.js')]") { attribute("src") { replace(/www(\.site\.com)/, $host_var + "$1") } }
25. Once we have it going through our server. We can edit it using Regular expressions: match($path, /foo.js/) { replace(/(\$\("body"\)\.append\(html\);)/, "html = mwTransform(html); " + $1) }
26. Then if we define the mwTransform function, we can edit the HTML before it is put in the DOM. function mwTransform(html) { $(html).addClass("transformed"); }
27. If you cannot hijack or regex the source for any reason, we must resort to “less than ideal” means.
28. DOMNodeAppear
29. DOMNodeAppear is a jQuery extension that fires off a call back whenever a given element appears on the page. $("selector").onAppear(function() { // do transformations here });
30. It is highly performant and easy to use! Here is the documentation for DOMNodeAppear: https://github.com/liamdanger/ jQuery.DOMNodeAppear
31. The problem with DOMNodeAppear is that it only works if you have jQuery and if something is visible on the page
32. DOMNodeInserted
33. DOMNodeInserted is an event fired on a parent when an HTML node is inserted in it. This even can bubble all the way up to the document. document.querySelector(“.parent") .addEventListener("DOMNodeInserted", function(e) { if(e.target.classList.contains("child")) { var transformThis = e.target // do transformations here. } });
34. The Problem with DOMNodeInserted is that it leads to lots of code redundancy and spaghetti code. Not to mention it is significantly less performant than DOMNodeAppear
35. I hope this has been effective at showing how we can handle AJAX on the Moovweb platform.
36. Q & A