I recently had the need to detect when new elements were appended to the DOM, however by default in jQuery there is no “append” event. This meant that the code I wanted to write, was invalid.

(function($) {
	$(document).on('append', function(){
		// handle the "append" event using the elements from the arguments
	});
})(jQuery);

The solution I ended up using involved caching the existing jQuery.append() to jQuery._append() and then overriding jQuery.append() to call the cached function internally, followed by the triggering of my new “append” event.

(function($) {
	// store a copy of the append() function as _append()
	$.fn._append = $.fn.append;

	// overwrite the existing append()
	$.fn.append = function () {
		return $.fn
			// apply the cached (function)ality using _append()
			._append.apply(this, arguments)
			// trigger our custom "append" event to fire handlers.
			.trigger("append", [arguments]);
	};
})(jQuery);

The post Inserting & Triggering Custom Events In jQuery Functions appeared first on Justin Silver.

It is not possible to control the visibility of the Edit/Del action links for a related list. On a VisualForce page you can insert your own CSS or Javascript to control the display, which you can also do on a Salesforce standard layout, albeit in a slightly more complicated fashion.

The trick is to use a Custom Link on your Home Page Layout. This Custom Link is defined as an onClick, but will actually load code inline with the use of REQUIRESCRIPT. Inside the REQUIRESCRIPT will be our Javascript payload, Base64 encoded.

Create Javascript Payload

First let’s compile the Javascript we need to control the UI on standard page layouts. In this case we want to hide the Edit/Del links on a related list, so view the page and use your developer tools to look at the DOM. You want to find the ID of the top level element in the related list table, something like “500c0000004BtmN_00sE0000004gkgq_body”. Use the following snippet as an example.

jQuery(document).ready(function($){
	// hide this sidebar module
	$('#sidebarDiv div.linksModule').each(function(){
		var $module = $(this);
		if ( $module.find('.brandPrimaryFgr').text()=='UserInterfaceInjection'){
			$module.hide();
			return false;
		}
	});
	// hide the Edit/Del links
	jQuery('#500c0000004BtmN_00sE0000004gkgq_body .actionColumn').hide();
});

Now we need to convert this to Base64. Any way is fine, but online is pretty easy: https://www.base64encode.org/.

alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigkKXsNCgkvLyBoaWRlIHRoaXMgc2lkZWJhciBtb2R1bGUNCgkkKCcjc2lkZWJhckRpdiBkaXYubGlua3NNb2R1bGUnKS5lYWNoKGZ1bmN0aW9uKCl7DQoJCXZhciAkbW9kdWxlID0gJCh0aGlzKTsNCgkJaWYgKCAkbW9kdWxlLmZpbmQoJy5icmFuZFByaW1hcnlGZ3InKS50ZXh0KCk9PSdVc2VySW50ZXJmYWNlSW5qZWN0aW9uJyl7DQoJCQkkbW9kdWxlLmhpZGUoKTsNCgkJCXJldHVybiBmYWxzZTsNCgkJfQ0KCX0pOw0KCS8vIGhpZGUgdGhlIEVkaXQvRGVsIGxpbmtzDQoJalF1ZXJ5KCcjNTAwYzAwMDAwMDRCdG1OXzAwc0UwMDAwMDA0Z2tncV9ib2R5IC5hY3Rpb25Db2x1bW4nKS5oaWRlKCk7DQp9KTs=

Put this text aside, we will need it later when creating the Javascript link.

Create Custom Link

Visit Setup > Home > Customize > Custom Links

1. Create a new Link
2. Name: UserInterfaceInjection
3. Behavior: Execute Javascript
4. Content Source: onClick Javascript
5. Body: {!REQUIRESCRIPT('data:application/javascript;base64,BASE64_JS')}, except that you want to replace BASE64_JS with your Base64 encoded Javascript.

   {!REQUIRESCRIPT('data:application/javascript;base64,alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigkKXsNCgkvLyBoaWRlIHRoaXMgc2lkZWJhciBtb2R1bGUNCgkkKCcjc2lkZWJhckRpdiBkaXYubGlua3NNb2R1bGUnKS5lYWNoKGZ1bmN0aW9uKCl7DQoJCXZhciAkbW9kdWxlID0gJCh0aGlzKTsNCgkJaWYgKCAkbW9kdWxlLmZpbmQoJy5icmFuZFByaW1hcnlGZ3InKS50ZXh0KCk9PSdVc2VySW50ZXJmYWNlSW5qZWN0aW9uJyl7DQoJCQkkbW9kdWxlLmhpZGUoKTsNCgkJCXJldHVybiBmYWxzZTsNCgkJfQ0KCX0pOw0KCS8vIGhpZGUgdGhlIEVkaXQvRGVsIGxpbmtzDQoJalF1ZXJ5KCcjNTAwYzAwMDAwMDRCdG1OXzAwc0UwMDAwMDA0Z2tncV9ib2R5IC5hY3Rpb25Db2x1bW4nKS5oaWRlKCk7DQp9KTs=')}

Create Home Page Component

Visit Setup > Home > Home Page Components

1. Create a new Component
2. Name: UserInterfaceInjection
3. Type: Links
4. Choose UserInterfaceInjection Link

Add to Home Page Layout

Visit Setup > Home > Home Page Layouts

1. Edit your layout to include UserInterfaceInjection

Now when you visit your page the Action column should be hidden from your related list. It’s pretty easy to see how this could be further expanded to add all kinds of custom functionality to standard Page Layouts in Salesforce.

The post Hide Edit/Del Links on Salesforce Standard Page appeared first on Justin Silver.

The jQuery library makes it much easier to create cross-browser functionality on any web page, and Salesforce Visualforce pages are no exception. Going one step further and include jQuery plugins in your pages as well for even more functionality and sparkles. But what do you do when you want to use a more recent version of jQuery, and your plugin is being reported as an undefined function in the console? To the rescue comes jQuery.noConflict(true);.

First you will want to upload both jQuery and your plugin as Static Resources, or from a CDN if you prefer. For our purposes we will assume they are Static Resources called jQuery and jQueryPlugin. As soon as the javascript sources is includes – jQuery first followed by plugins – we need to make a call to noConflict() to free up the $ resources. Using jQuery as an alias is easy and logical.

Next we want to tell our code to run after the DOM of the page has loaded, so we wrap our code inside a function that is called by jQuery.ready(). A neat trick here is to pass jQuery back into the callback function as $, so your code will know the version of jQuery you loaded and it’s attached plugins as the standard $.

<!-- include static resources -->
<apex:includeScript value="{!$Resource.jQuery}" />
<apex:includeScript value="{!$Resource.jQueryPlugin}" />
<script type="text/javascript">
// Alias to jQuery and free $
jQuery = $.noConflict(true);

// Call jQuery.ready(), and alias jQuery back to $ by passing as an argument
jQuery(document).ready(function($){
	// use $.plugin()
	$('#container').plugin();

	// attach events to DOM elements
	$('.button').on('click', function(){
		alert('clicked!');
	});
});
</script>

The post Use jQuery + Plugins with Visualforce Pages appeared first on Justin Silver.

AJAX Action Hooks

Adding an AJAX callback to WordPress 2.8+ is pretty simple – you just need to hook in the wp_ajax_(action) action for admin callbacks, and the wp_ajax_nopriv_(action) action for front-end callbacks. One caveat however is that the ajaxurl property (which holds the URL for admin-ajax.php where the AJAX call is submitted) is not automatically included. You will have to add it manually by adding admin_url( 'admin-ajax.php' ) to make it available on the front-end. The (action) in the callback matches up with the action: my_action that should be passed in your AJAX call, for example wp_ajax_my_action.

// process all my_action for admin only
add_action( 'wp_ajax_my_action', 'my_action_callback_function' );

// process my_action for the front-end too
admin_url( 'admin-ajax.php' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback_function' );

For versions of WordPress older than 2.8, add an action on init to handle the AJAX requests. When called the function will attempt to call do_action() for the key "wp_ajax_" + $_REQUEST['action'], so if the “action” in the $_REQUEST was “get_post” the resulting key would be “wp_ajax_get_post”. This effectively reproduces the functionality of the wp_ajax_nopriv_(action) action hook in WordPress 2.8+.

// process all wp_ajax_* calls
function core_add_ajax_hook() {
	/* Theme only, we already have the wp_ajax_ hook firing in wp-admin */
	if ( ! defined( 'WP_ADMIN' ) && isset( $_REQUEST['action'] ) ) {
		do_action( 'wp_ajax_' . $_REQUEST['action'] );
	}
}
add_action( 'init', 'core_add_ajax_hook' );

Now you are free to add as many wp_ajax_* functions as you would like. To continue with the example above, we will create a function for “wp_ajax_get_post”.

AJAX Callback Functions

This is the PHP function that handles your AJAX callback. Noted that it takes no arguments, and that you will have to grab the values submitted using $_GET, $_POST, or the more generic $_REQUEST (though not really recommended) depending on your HTTP type used.

// get a post by its post.ID
function wp_ajax_get_post_callback_function() {
	// default response
	$response = array( "success"=>false );

	/* get the 'post_id' from the $_REQUEST and sanitize, if post can be loaded
	   set success to true and assign post */
	$post_id = filter_input( INPUT_POST, 'post_id', FILTER_SANITIZE_NUMBER_INT );
	if ( $post_id && $post = get_post( $post_id, ARRAY_A ) ){
		$response = array( "success"=>true, "post"=>$post );
	}

	// set the content type and return json encode response, then exit
	header( 'Content-type: application/json' );
	die( json_encode( $response ) );
}
add_action( 'wp_ajax_get_post', 'wp_ajax_get_post_callback_function' );

jQuery AJAX Call

And now to call this AJAX method using jQuery.

$(document).ready(function(){
	// the post id to query
	var my_post_id = 123;

	// add a click event to our anchor link that will post the id and get back the post data.
	$('#anchor').on('click', function(){
		$.post(
			ajaxurl,
			{
				action: 'get_post', // the action to pass to the WordPress hook, and then do_action()
				post_id: my_post_id // the post id to query
			},
			success: function(response){
				if (response.success==true){
					alert('The post title is ' + response.post.post_title);
				}
			}
		);
	}
});

This can be triggered by clicking a link like the following.

<a href="#" id="anchor">Click Me</a>

The post Creating AJAX Functions in WordPress appeared first on Justin Silver.