Why is jQuery better?<\/h2>\n
I prepared this demo page<\/a> so that you can test.<\/p>\n You’ll remember from the last post that in order to make an AJAX call in pure JavaScript, you have to do something like this:<\/p>\n Go ahead and run that code on the demo page<\/a> in the browser’s dev tools Console (consult the last post<\/a> if you’re stuck).<\/p>\n Now, to do the very same thing with jQuery, all you have to do is this:<\/p>\n Go ahead and try it in the Console. Change the \n \u26a0\ufe0f I won’t go into the basics of using jQuery, as it’s been here for a very long time, and there’s a vast amount of tutorials written about it. Start with the official docs<\/a> if you want to learn more.\n<\/p><\/blockquote>\n The important thing to note here is that By looking at the docs, you can see that there are more of these so-called shorthand methods<\/a> for making AJAX calls, all of which could be done with the most versatile ajax<\/a> function.<\/p>\n The example from before could be done using the get<\/a> shorthand method:<\/p>\n If you don’t want to pass any parameters, it gets even simpler:<\/p>\n I prepared the same demo page<\/a> as in the previous post, but with jQuery already included so you can test this by just pasting the code below in the Console. I encourage you first to try it yourself and then compare your solution with mine below.<\/p>\n There are a few things that I’d like to point out here:<\/p>\n Say you have this demo page<\/a>, and you need to make the newsletter signup form use AJAX instead of going to a new page when you click the How would you do it? Where would you start?<\/p>\n Well, here are a few search terms you could Google:<\/p>\n Again, here’s my solution, but I encourage you to try it yourself first.<\/p>\n There are a few things that I’d like to point out here:<\/p>\n Sure, but promise you’ll do it yourself first!<\/p>\n \n I do ?\n<\/p><\/blockquote>\n OK then, let’s do this ?<\/p>\n Here’s a new demo page<\/a> that you’ll use for this example.<\/p>\n \n \u26a0\ufe0f I’m using Bulma<\/a> to make the site look pretty. As their website says: In this challenge, you have to create a gif search application using the Giphy Search API<\/a>. As the docs state, you’ll need to get the API key by creating an app<\/a>. Once you do that, you’ll be able to search their API like, for example, this: Once you fetch the gifs (or still images if you so choose), show them in the div with a class Here’s the part where you roll up your sleeves, create it, feel proud of yourself ?, and then come here to check how I did it.<\/p>\n The only new, and potentially tricky, part here is the traversal of the JSON object that you get back from the API, but with just a bit training, you’ll get good at it.<\/p>\n If you open up this URL<\/a> in your browser, you will see this<\/p>\n The returned JSON object consists of three properties:<\/p>\n The Here’s a short gif of this in action:<\/p>\n That’s all for this blog post. I hope it was useful and that you’ve seen how much easier it is to make AJAX requests with jQuery vs. plain JavaScript. I also hope you liked the demo exercises ? TL;DR In this post we’ll do everything (and a bit more ?) we did in the first post, but with jQuery. Why is jQuery better? I prepared this…<\/p>\n","protected":false},"author":1,"featured_media":4147,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=4146"}],"version-history":[{"count":1,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4146\/revisions"}],"predecessor-version":[{"id":4148,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4146\/revisions\/4148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/4147"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=4146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=4146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=4146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}var xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function() {\n if (xhr.readyState === 4){\n document.getElementById('result').innerHTML = xhr.responseText;\n }\n};\nxhr.open('GET', 'http:\/\/nikola-breznjak.com\/_testings\/ajax\/test1.php?ime=Nikola');\nxhr.send();\n<\/code><\/pre>\n$('#result').load('http:\/\/nikola-breznjak.com\/_testings\/ajax\/test1.php?ime=Nikola');<\/code><\/p>\nime<\/code> parameter, and you’ll see that the text on the page will change to Hello [name]<\/code>, where [name] will be the parameter you entered.<\/p>\n.load<\/code> must be chained to a so-called jQuery selection, as mentioned in the .load() documentation<\/a>. We loaded the data from the server and placed the returned text into the element with an id result<\/code>.<\/p>\nShorthand methods<\/h2>\n
var link = 'http:\/\/nikola-breznjak.com\/_testings\/ajax\/test1.php';\n var data = {ime:\"Nikola\"};\n var callback = function(result) {\n $('#result').html(result);\n }\n $.get(link, data, callback);\n<\/code><\/pre>\n var link = 'http:\/\/nikola-breznjak.com\/_testings\/ajax\/test1.php';\n var callback = function(result) {\n $('#result').html(result);\n }\n $.get(link, callback);\n<\/code><\/pre>\nRewriting the mini project<\/h2>\n
var link = 'http:\/\/nikola-breznjak.com\/_testings\/ajax\/test2.php';\n$.getJSON(link, function(result){\n var oglasiHTML = '';\n $.each(result, function(index, oglas){\n var klasaCijene = '';\n if (oglas.cijena < 100){\n klasaCijene = 'is-success';\n }\n else if (oglas.cijena >= 100 && oglas.cijena < 300){\n klasaCijene = 'is-info';\n }\n else if (oglas.cijena >= 300){\n klasaCijene = 'is-danger';\n }\n\n oglasiHTML += `\n <div class=\"columns\">\n <div class=\"column is-one-quarter\">\n <span class=\"tag ${klasaCijene}\">${oglas.cijena}<\/span>\n <\/div>\n <div class=\"column\">${oglas.tekst}<\/div>\n <\/div>\n `;\n });\n\n $('#oglasi').html(oglasiHTML);\n});\n<\/code><\/pre>\n\n
link<\/code> variable. This is because I know that this API returns a JSON response (you can check by opening that link in the browser).<\/li>\nresult<\/code>.<\/li>\noglasiHTML<\/code> in a much cleaner way than we did that in the previous post with using concatenation.<\/li>\nfor<\/code> loop and indexes<\/code> to access each element of the array.<\/li>\n<\/ul>\nI want more examples<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/jYSxnG9.jpg\")
<\/p>\nSubscribe<\/code> button. Right now the API (located at http:\/\/nikola-breznjak.com\/_testings\/ajax\/email.php) doesn’t actually process what you send to it, but try to send data with the request as well for practice.<\/p>\n\n
post data<\/code><\/li>\n<\/ul>\n$('form').submit(function(ev){\n ev.preventDefault();\n var url = $(this).attr('action');\n var formData = $(this).serialize();\n $.post(url, formData, function(response){\n $('#newsletter').html('Thank you for subscribing, please check your email.');\n });\n});\n<\/code><\/pre>\n\n
form<\/code> selector without any id because it’s the only form on the page. If there were more forms on the page, I’d have to distinguish them by using an id (which is always a good practice, even if it’s just one form)<\/li>\nSubscribe<\/code> button clicked, or ENTER pressed while in one of the fields)<\/li>\nev.preventDefault()<\/code> to prevent the form from “doing its thing” and loading the ’email.php’ page, as its default behavior<\/li>\n$(this).attr('action')<\/code> to extract the API URL from the form definition it the HTML (feel free to check it out in the element inspector)<\/li>\n$(this).serialize()<\/code> to encode a set of form elements as a string which I then passed to the jQuery post<\/a> shorthand function. This function sends a request to the server using the POST method, which (as we learned in the previous post) is the preferred way of sending some sensitive data that needs to be handled on the server<\/li>\ndiv<\/code> with the id newsletter<\/code> to set its new content<\/li>\n<\/ul>\nCan I have one more, please?<\/h2>\n
\n ‘Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers.’
\n I’ll just say it’s really great and easy to learn, so make sure you check it out.\n<\/p><\/blockquote>\nhttp:\/\/api.giphy.com\/v1\/gifs\/search?q=funny+cat&api_key=dc6zaTOxFJmzC<\/code>. You can use this API key, but be sure to create your own if this one gets banned for too many requests ?\u200d<\/p>\nresult<\/code> (yes, class, not id ?).<\/p>\n$('form').submit(function(ev){\n ev.preventDefault();\n var searchTerm = $('input').val();\n\n var apiLink = \"http:\/\/api.giphy.com\/v1\/gifs\/search?api_key=dc6zaTOxFJmzC&q=\" + searchTerm;\n\n var output = '';\n $.getJSON(apiLink, function(images){\n $.each(images.data, function(i, im){\n output += `<img src=\"${im.images.downsized.url}\"\/>`;\n });\n\n $('.result').html(output);\n });\n});\n<\/code><\/pre>\n![\"\"](\"https:\/\/i.imgur.com\/Dbu9ge8.jpg\")
<\/p>\n\n
data<\/code><\/li>\npagination<\/code><\/li>\nmeta<\/code><\/li>\n<\/ul>\ndata<\/code> is an array of objects, and in one of its properties it has an array of images<\/code>. In my example, I choose to display the downsized<\/code> gif by accessing its url<\/code> property.<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/ZEuMHuw.jpg\")
<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/dZeGeZT.gif\")
<\/p>\nConclusion<\/h2>\n
\nIn the next blog post, we’ll see how to do this with the modern fetch API<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"