Inserting Javascript into a DOM Popup

Tweet

11 September 2011 | Gordon Anderson | JavaScript, DataObjectManger | Supports v2.4, v2.3

5 6

I recently ran into the problem of how to insert my own Javascript into a DOM (DataObjectManager) popup window.  After much googling and getting nowhere I resorted to reading the code and discovered that it was in fact quite simple to do.

The problem I was trying to solve was for a dropdown select box to toggle fields in the form, depending on whether a link is internal or external to the site. 

The relevant parts of the Link model are this:

static $db = array(
    'URL' => 'Text',
    'Title' => 'Text',
	 'Description' => 'HTMLText',
	 "LinkType" => "Enum('External,Internal')",
);
static $has_one = array(
    'LinksFolder' => 'LinksFolder',
	 'InternalPage' => 'SiteTree'
);

When the LinkType dropdown is changed I wanted to either show or hide the Fields for URL or InternalPageID. This requires Javascript of course.

In order to add Javascript to a DOM popup, one has to add a method called getRequirementsForPopup() in your DataObject, in this example the model being a Link.

function getRequirementsForPopup() {
    Requirements::javascript('silverstripe-links/javascript/linkedit.js');
}

What this line does is to include the javascript file /silverstripe-links/javascript/linkedit.js into the HTML of the popup box.  One can now use this to manipulate the fields visibility when the dropdown is toggled.

There is one further gotcha.  The id of the field for the dropdown changes depending on whether one is adding a new Link or editing an existing one.  I realised this when the change event was binding in the case of editing an existing Link - use Insepect Element in Chrome to check the id of the select element generated by the DataObjectManager.

In the javascript, we get a handle on jQuery, wait for the document to load, hide or show the URL field depending on whether the link is internal or external, and finally use the change event on the dropdown to toggle the internal/external URL fields.

JQ = jQuery.noConflict();
JQ(document).ready(function() {
    // Find the select box, named differently on the update and add forms
    var sel = JQ('select[id="DataObjectManager_Popup_DetailForm_LinkType"]');
    if (sel.attr('id') == undefined) {
		sel = JQ('#DataObjectManager_Popup_AddForm_LinkType');
	}
	// hide either the internal or external link editing box
	if (sel.val() == 'Internal') {
		JQ('#URL').toggle();
	}  else {
		JQ('.autocomplete_holder').toggle();
	};
	// toggle boxes on drop down change
	sel.change(function(e) {
	    JQ('#URL').toggle();
	    JQ('.autocomplete_holder').toggle();
	});
});

If you wish to study the code in more detail, you can checkout out a working example from https://github.com/gordonbanderson/Silverstripe-Links-Module