AJAX Sidebar

Note
This page contains content originally intended as a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. on Improve UX with AJAX. It was moved here because certain elements could not be clicked or dragged for an unknown reason.

jQuery in WordPress runs in noConflict mode. This means you cannot use the common $ shortcut. Every jQuery statement must begin with “jQuery” as shown in the basic click event statement. In order to still use the $ shortcut, you can place your code inside a “noConflict Wrapper”. The basic event statement example inside a wrapper would look like this:

jQuery(document).ready(function($) {
	$.(selector).event(function);	//basic event statement with $ shortcut
});

Also know as anonymous functions. Instead of defining a named function, then providing the name to another function that will be calling it, like so:

function someName(){ /*do stuff*/}
$.(".class_name").click("someName");

You could provide the function definition itself with no name like so:

$.(".class_name").click(function(){ /*do stuff*/});

The main advantage of doing this is the anonymous function inherits the parent function’s variable scope, removing the need to pass values as parameters or define globals.

This chapter uses the .post() method in all the examples. In other places you will see .ajax() used in the same context. .ajax() is the correct, proper way to make an AJAX request. .post() is a shorthand method that assumes you want to use the most common settings, so it is a bit cleaner and simpler to use. For complete control use .ajax().

← Back