SUMMARY: Designed widget in HTML/CSS. Figured out where to put my javascript files, and how to load them on a per-page template basis.

I’ve taken a break from the coding, but am now back in the saddle and contemplating the next piece of understanding I need: AJAX. That is: how do I get a click on my HTML page to send a message to a server, and then respond to an asynchronous event?

As I don’t really know anything about how this works, this task feels somewhat daunting and open-ended. But, really, if I think about it, I do know what needs to happen:

1. I make a web page with a DIV on it.
2. I attach a bit of javascript code to it that calls a function when the DIV is clicked.
3. The function spawns an asynchronous request to a web service.
4. Another function waits for the web service to respond with data
5. The web page is updated in some way

Let me break this down further in my head:

• The web page, in addition to having the DIV, also has to include the attached javascript code and underlying jQuery library. The initialization for this web page should search for the elements to attach behaviors to, and then attach event handlers. I prefer to do this dynamically rather than statically, to make for a cleaner source web page.

• There are several javascript code fragments: one is the onclick event handler for the DIV. Then, there’s the function the onclick handler will call to dispatch a message to the server through a webservice, presumably with a jQuery call. Then, there’s the function callback that responds. In a trivial example, this would be very easy to model. However, I want a more architectural solution. That means event management dispatching and handling that can be easily generalized for any web page that possibly has hundreds of events. There are very few examples of this that I’ve come across, left as an exercise to the reader I suppose.

<

p>I just pulled my ancient jQuery reference to read up on the AJAX-related calls. In particularly, I’m looking at the complex form of the AJAX call to grok its various parameters, so I can get a sense of the range of possibilities. They boil down into sending data via POST or GET to the web server, retrieving data from the server, callback, error handling, and parameter setting. The key takeaways are that I can do an AJAX call to a webservice, and in the callback get some kind of object populated with data that I can then use to modify the webpage.

Web Page

So…let me start populating my test page with a sample object:

mockup

markup

<div id='task0001' class='task'>
    <div class='canvas'>
        <p class='stat1'>IMMEDIATE</p><p class='stat2'>15MIN QUEUED 9-19</p>
        <div class='main blue'>
            <div class='title'><h2>Get Blanket for Cats</h2><h3>IDEATE</h3></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><br />
            <div class='controls'>TASK<img /><br /><img /></div>
        </div>
    </div>
</div>

CSS

.task { width:400px; margin:10px; float:left; }
.canvas { width:400px;}
.canvas .stat1 { margin:0 0 0 40px; font-size: smaller; width:160px; float:left; }
.canvas .stat2 { margin:0; font-size: smaller; width:200px; float:left; text-align:right; }
.canvas div.main { clear:both; position:relative; min-height:90px; }
.canvas div.blue { background-color:#d6f0ff; }
.canvas div.title h2 { clear:none; margin-left:40px; width:260px; float:left; font-weight:bold; }
.canvas div.title h3 { clear:none; width:100px; float:right; text-align:right; }
.canvas div.main p { margin-left:40px; width: 320px; float:left; color: #67869a; font-size:smaller;}
.canvas div.main br { clear:both; }
.canvas div.main .controls { position:absolute; left:0; top:0; width:40px; float:left; font-size:smaller; text-align:center; color:#7fc8eb; }
.canvas div.main .controls img { width:30px; height:30px; background-color:#a9defe; border:0; }

screenshot

My markup and CSS isn’t well-optimized or pixel-perfect, but at least I have the semblance of a structure that I think I can manipulate.

Scripts

Now…how do I initialize all the javascript I need to do a round trip chat with the server?

In my _main.php file, I have a function called dseah_enqueue_scripts() which isn’t being called. This loads jquery and jquery-ui-core. What I want to be able to do is load ADDITIONAL initialization scripts on a page-by-page basis.

I implemented a new call called dseah_pagescript('scriptname') that is called somewhere within the page template that’s executing. The script is loaded from THEME_URL/scripts/scriptname and executed just before the closing BODY tag, via a setup call to add_action('wp_footer','dseah_runpagescript').

So, my jQuery/javascript code will go into the scripts/scriptname file. That’s where javascript init begins. jQuery is already initialized by the time this script at the end runs, and because it’s at the very end all the HTML objects should be defined, though images may not be loaded. However, I can write the jQuery code here to execute when the document is ready.

bottom of page-test-jquery.php

            </div><!-- #content -->
        </div><!-- #primary -->
<?php dseah_pagescript('boogah.js'); ?>
<?php get_footer(); ?>

HTML source of bottom of page template

    </footer><!-- #colophon -->
</div><!-- #page -->

<script type='text/javascript' src='http://davidseah.net/second/wp-includes/js/jquery/ui.core.js?ver=1.8.12'></script>
<script type='text/javascript' src='http://davidseah.net/second/wp-content/themes/twentyeleven-second/scripts/boogah.js'></script>
</body>
</html>

contents of scripts/boogah.js

// create jquery $ object for use in WordPress
// executes when dom is defined
jQuery(document).ready(function($) {
    alert("DOM loaded");
});

// create jquery $ object for use in WordPress
// executes when window is rendered
jQuery(window).load(function($) {
    alert("Window loaded");
});

I should note that the way I’m enqueuing my “boogah.js” script is just by echoing a script tag directly, rather than using the preferred wp_enqueue_script() call to add it to the footer. The offending code is in _main.php, and I’ll probably have to clean it up at some point when I start using jqueryUI.

Anyway, at this point I can bind event handlers to DOM elements defined here on the page. That will be tomorrow’s task, along with handling the AJAX call to the server and figuring out how best to handle it.