gistfile1.txt

#Inserting Arbitrary Javascript into a DOM Popup

I recently ran into the problem of how to insert my own Javascript into a DOM 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.		

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

		function getRequirementsForPopup() {
			error_log("Link get requirements for popup");
			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