SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Snippets - Little bits of code to make you happy

Inserting Javascript into a DOM Popup

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

 

  • Ricardona
    11/09/2011 2:50pm (3 years ago)

    This is in CMS, but, how is the same in front end ?
    Thanks in advance
    Ricardo

  • Bart van Irsel
    12/09/2011 7:17pm (3 years ago)

    Hi Gordon,

    Thanks for these nice code examples. I took a look at your Links Module which shows a good way to solve the topnav and footernav in a website. Used to solve this doing Pages in a Holder Page, your solution using DataObjects being either internal or external links is a great solution.

    Bart

  • Gordon Anderson
    13/09/2011 3:54am (3 years ago)

    hi Ricardona, Can you please explain a little more about what you are trying to do?

    Thanks

    Gordon

  • Gordon Anderson
    13/09/2011 3:56am (3 years ago)

    hi Bart

    Glad you found the module useful as both an example and for practical purposes. I normally use the SiteTree structure for the header menus and then cherry pick a selection of links for the footer using the module previously mentioned

    Regards

    Gordon

  • HeartlandTechie
    19/09/2011 4:04pm (3 years ago)

    BTW: Make sure you have the latest DataObject Manager download as well . . . I installed it and it was squawking over the LiveDropDown field https://github.com/unclecheese/DataObjectManager/tree/master/code/dropdown_fields

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image njorndare
7 article image Martijn van Nieuwenhoven
8 article image Darren-Lee
9 article image Roman Schmid
10 article image Matt Clegg

View full leaderboard


Advertisement