I have created a simple form field:

class myField extends formField {

function Field()
{
Requirements::javascript('mymodule/test.js');
//Requirements::javascript($this->BaseHref() . 'mymodule/test.js'); // Also tried this
return 'hello, world';
}

}

All test.js does is issue the alert "Hi there!".

Now, I can add this field to a DataObject's form, and it correctly displays the message "hello, world" in the form in the expected place. However, the JavaScript does not appear to be anywhere. I realise the forms are displayed using AJAX in the AdminManager scaffolding thingy, but is it not supposed to also pull in additional JavaScript when the form is loaded?

Or maybe that is not an automatic thing and I am missing out some vital step? The documentation does not seem to cover how the JS and AJAX interact (there are some essays on ways it *could* be done, but nothing that clearing states "this is how it works...").

Any clues what I'm missing?

-- Jason

Okay, I tried the above code again later, and it seemed to work this time. The JS is loaded just as it is first needed. It is not loaded again until the next complete page refresh.

I can't get the custom inline JavaScript to work though:

Requirements::customScript('alert("hi there again");');

Maybe that will mysteriously start working tomorrow ;-)

-- Jason

More subtle is the fact that the loaded JavaScript cannot seem to see items in the form that it was loaded with.

If instead of displaying "hello, world" when the JS is loaded, I try to find an element in the form that was loaded with the JS, using the item's ID, it cannot find that item. Accessing an item by its ID *outside* of the AJAX-loaded form does work.

I'm using

jQuery(document).ready(function(){...}); 

I am guessing that is the wrong approach, since it will only fire once when the JavaScript is loaded for the first (and only) time. After that the edit form can be replaced many times using AJAX, but will not trigger again.

So I guess the question is: once an admin form has been loaded using AJAX, what is the trigger to use to run some custom JavaScript to set up or manipulate items on that form? In my case I am binding the jQuery AjaxUpload plugin to one of the form items.

Edit: my guess is going to be jQuery live() binding? Set up the live binding once when the JavaScript is first loaded, and then it will get automatically applied to each new form called up with AJAX. In theory.

-- Jason

Hi,

Did you get any further with this? I need to do something similar.

Situation: I have created a custom video field where you just paste in the youtube embed code, share code etc. and the ID is extracted and the video pulled in via an iFrame. This is in the admin area so admins can see the video that has been set.

When a page first loads in the admin (i.e. the whole page admin has just loaded and it displays the page form straight away), the iframe works fine. If you move to another page and back again, then the iframe rewriting code in LeftAndMain_Right.js kicks in and prepends the src of the iframe with the base URL of the site - which obviously doesn't work, so I end up with a src looking like:

http://my-base-url.com/http://www.youtube.com/embed/<some video ID>

Now, I could just stop that rewriting by commenting it out, but unsure of the consequences, as the comment above states it is to sort something with IE and I know several admins will be using IE. Therefore I would prefer to just target these specific iframes and remove the base from the src, rather than editing the base files.

If there is a specific event being triggered that I can bind to, that would suffice as the custom JS is being loaded, but fires before the src is rewritten, and only fires once when the admin is first loaded, not on subsequent page loads within the admin.

Cheers,
Jason.