{"id":456,"date":"2006-07-19T14:22:23","date_gmt":"2006-07-19T06:22:23","guid":{"rendered":"http:\/\/www.nargalzius.com\/blog2\/http:\/www.nargalzius.com\/blog2\/archives\/2006\/07\/2006_07_19_1422.php"},"modified":"2006-07-19T14:22:23","modified_gmt":"2006-07-19T06:22:23","slug":"instant-ajax-on-your-site","status":"publish","type":"post","link":"http:\/\/nargalzius.com\/blog\/archives\/2006\/07\/19\/instant-ajax-on-your-site","title":{"rendered":"Instant AJAX on your site"},"content":{"rendered":"<p>I went back to the <a href=\"http:\/\/www.nargalzius.com\/music\" title=\"View music page\">music section<\/a>, and redid the <code>AJAX<\/code> code I used. I remembered the <a href=\"http:\/\/www.nargalzius.com\/blog\/archives\/2006\/07\/2006_07_19_1422.php\" title=\"view entry from site\">Prototype library<\/a> (<code>prototype.js<\/code>) I was using for the lightbox had its own <code>AJAX<\/code> object class &#8211; which was much more comprehensive than my implementation (error handling, browser support, etc).<\/p>\n<p>I thought that since I was <em>already<\/em> using the framework anyways, might as well redo my functions altogether to <em>utilize<\/em> it. While the <a href=\"http:\/\/www.sergiopereira.com\/articles\/prototype.js.html\" title=\"Read documentation\">documentation<\/a> had example codes, like any other site, I noticed that usually they always include a fixed &#8220;target&#8221; in the function. Meaning if you have a certain <code>AJAX<\/code> operation you wish to perform, the function usually took in the <code>URL<\/code> which you specify, but plugs it into a <strong>set<\/strong> target. While this is easily fixed, I was simply baffled as to why they don&#8217;t make it a standard to &#8220;assume&#8221; people would want at least to specify both the <code>url<\/code> <strong>and<\/strong> <em>target<\/em> as a default.<\/p>\n<p>So I came up with code which I dubbed <em>&#8220;InstA-JAX&#8221;<\/em> to do just that. I&#8217;m sharing it here since I figured that anyone I know who is remotely interested in implementing rudimentary AJAX functionality might find it very useful as it doesn&#8217;t require them to &#8220;think&#8221; anymore hehehehe. &#8211; just plug it in, markup your HTML the proper way and you should be good to go.<\/p>\n<!--more-->\n<p>Here&#8217;s the code. Just drop it somewhere between your <code>&lt;head&gt;<\/code> tags &#8211; or import it via <code>.js<\/code> file if that&#8217;s your thing.<\/p>\n<script type=\"text\/javascript\" language=\"javascript\" src=\"prototype.js\"><\/script>\n<script type=\"text\/javascript\" language=\"javascript\">\n<!-- \/\/ Hide from browsers\n\/*==================================================================================*\n*  InstA-JAX script                                                                *\n*  (c) 2006 Carlo Santos <www.nargalzius.com>                                      *\n*                                                                                  *\n*  usage: loadXML('SOME_FILE_TO_LOAD','DESTINATION_DIV_ID')                        *\n*                                                                                  *\n*  Requires Prototype JavaScript framework by Sam Stephenson <prototype.conio.net> *\n*  Prototype.js Documentation: <www.sergiopereira.com\/articles\/prototype.js.html>  *\n*==================================================================================*\/\n\nfunction loadXML(argURL,argTARGET) {\nurl = argURL;\ndivID = argTARGET;\npars = '';                          \/\/ Extra paramaeters, should you need them.\n\nvar instaAJAX = new Ajax.Updater(   \/\/ Use Prototype.js' Ajax.Updater class\n{success: divID},\nurl,\n{\nmethod: 'get',\nparameters: pars,\nonFailure: reportError\n} );\n}\n\nfunction reportError(request) {\nalert( 'Sorry, here was an error.' );\n}\n\/\/ -->\n<\/script>\n<p>As an example, your HTML code would look something like this:<\/p>\n<pre>\n&lt;!-- HERE ARE YOUR TRIGGERS --&gt;\n&lt;p&gt;\n&lt;span onlick=\"loadXML('<code>\/path\/to\/your\/data<\/code>','<code>demo_target1<\/code>')\"&gt;\n<em>Load data to demo_target1<\/em>\n&lt;\/span&gt;\n&lt;br \/&gt;\n&lt;span onlick=\"loadXML('<code>\/path\/to\/your\/data<\/code>','<code>demo_target2<\/code>')\"&gt;\n<em>Load data to demo_target2<\/em>\n&lt;\/span&gt;\n&lt;\/p&gt;\n\n&lt;!-- HERE ARE YOUR DESTINATIONS --&gt;\n&lt;p \/&gt;\n\nDIV container for demo_target1:\n&lt;div id=\"<code>demo_target1<\/code>\"&gt;<em>Default content before data is loaded<\/em>&lt;\/div&gt;\n\nDIV container for demo_target2:\n&lt;div id=\"<code>demo_target2<\/code>\"&gt;<em>Default content before data is loaded<\/em>&lt;\/div&gt;\n\n<\/pre>\n<p>Basically, in simple english, what I just demonstrated is two links, which can load data into two different target using the <em>same<\/em> javascript function. The key here is the trigger function in the <code>html<\/code> which is: <code>loadXML('SOME_FILE_TO_LOAD','DESTINATION_DIV_ID')<\/code> which basically says <em>&#8220;Hey <code>loadXML<\/code>, could  you be a dear and load <code>SOME_FILE_TO_LOAD<\/code> into <code>DESTINATION_DIV_ID<\/code> for me?<\/em><\/p>\n<p>Let&#8217;s now try it <em>inside<\/em> this blog entry. I&#8217;ll use the same code above, this time using legitimate paths to the data they&#8217;ll pull. I&#8217;ll also replace the <code>&lt;span onclick=\\\"...&gt;<\/code> with <code>&lt;a href=\"javascript:...&gt;<\/code> because that&#8217;s just the type of guy I am \ud83d\ude42<\/p>\n<p>If you&#8217;re reading this through an RSS reader, all this won&#8217;t work, try visiting the <a href=\"http:\/\/www.nargalzius.com\/blog\/archives\/2006\/07\/2006_07_19_1422.php\" title=\"view entry from site\">actual entry from the site<\/a> for a live demo.<\/p>\n<p><a href=\"javascript:loadXML('\/music\/playerXML.php?id=14','demo_target1')\">Load data to demo_target1<\/a>\n<a href=\"javascript:loadXML('\/music\/playerXML.php?id=12','demo_target2')\">Load data to demo_target2<\/a><\/p>\n<style type=\"text\/css\">\n#demo_target1, #demo_target2 {\nwidth: 240px;\nbackground-image: url(\/images\/music\/player_bg.gif);\npadding: 5px;\nmargin: 0px 10px 20px 0px;\nborder: 1px solid #CCC;\n}\n\n#player_left {\nwidth: 198px;\n}\n\n#player_right {\nwidth: 32px;\n}\n\n#player_title {\ndisplay: block;\npadding-top: 5px;\nmargin-left: 10px;\nfont-weight: bold;\nfont-size: 12px;\ncolor: #000;\nheight: 35px;\n}\n\na#player_info,\na#player_info:link,\na#player_info:visited,\na#player_download,\na#player_download:link,\na#player_download:visited {\nfloat: right;\ndisplay:block;\ntext-indent: -90000px;\nbackground-repeat: no-repeat;\nbackground-position: 0px 0px;\n}\n\n#player_info {\nbackground-image: url(\/images\/music\/icon_info.gif);\nwidth: 16px;\nheight: 16px;\n}\n\n#player_download {\nmargin-top: 14px;\nbackground-image: url(\/images\/music\/icon_dload2.gif);\nwidth: 32px;\nheight: 31px;\n}\n.header_imgs {\nfont-family: Arial;\nfont-weight: bold;\ntext-transform: uppercase;\nfont-size: 9px;\ncolor: #CA7900;\n}\n<\/style>\n<p>DIV container for demo_target1:<\/p>\n<div id=\"demo_target1\" style=\"background-color:#EEE;margin:20px;\">Default content before data is loaded<\/div>\n<p>DIV container for demo_target2:<\/p>\n<div id=\"demo_target2\" style=\"background-color:#EEE;margin:20px;\">Default content before data is loaded<\/div>\n<p>It&#8217;s pretty basic stuff, but you&#8217;ll be surprised how all the tutorials out there don&#8217;t mention this <em>practical<\/em> approach at all. It&#8217;s also easily modifiable (should you want to &#8220;variable-ize&#8221; even the <code>pars<\/code>, <code>method<\/code>. etc.) But for simple brainless loading of data to an element ID, this should work just fine.<\/p>\n<p>If you find this useful to you, drop me a line and tell me what you think \ud83d\ude42<\/p>","protected":false},"excerpt":{"rendered":"<p>I went back to the music section, and redid the AJAX code I used. I remembered the Prototype library (prototype.js) I was using for the lightbox had its own AJAX object class &#8211; which was much more comprehensive than my implementation (error handling, browser support, etc). I thought that since I was already using the &hellip; <p class=\"link-more\"><a href=\"http:\/\/nargalzius.com\/blog\/archives\/2006\/07\/19\/instant-ajax-on-your-site\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Instant AJAX on your site&#8221;<\/span><\/a><\/p><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[5,8,9,13],"tags":[74,645,961],"class_list":["post-456","post","type-post","status-publish","format-standard","hentry","category-internet","category-music","category-nargalzius","category-technology","tag-ajax","tag-js","tag-prototype"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":0,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"wp:attachment":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}