Retrospectively acting JS on register page (with the use of require.js)

[Calla]

Hi Folks,

Apologies for sounding new to all of this -- so bare with me. 

I'd like to do a bit of retro acting Javascript on the registration page i.e. Apply a snippet of javascript after ALL the logistration_factory and access_views etc have run and loaded. I can't simply add it into the template as a <script>, since it requires all of the fields to be read and added. 

So far I believe what this requires is using require.js to require a dependency on perhaps the logistration_factory. 

I thought I had it running well on the devstack - I followed the way logistration_factory was being used. But after pushing these changes to the fullstack, it did not seem to prevail. and get an error: History.js Adapter has already been loaded...

My first question is: is this described approach the only approach to guarantee the running of a javascript after the elements have been loaded?

Secondly:

If so:

What are the steps required to get a snippet running easily? or Is there something different which runs for building static files on the fullstack?

If not: 
What is the most simplest approach?

[Andy Armstrong]

Hi Calla,

I think your approach does seem like the only way to ensure that everything has loaded. The challenge, as you've discovered, is how to get it to play nicely with the static pipeline on fullstack. To get started, you might find the material linked from this wiki page useful: 

https://openedx.atlassian.net/wiki/display/FEDX/RequireJS+at+edX

The logistration factory is loaded using this Mako function that behaves differently in fullstack:

https://github.com/edx/edx-platform/blob/master/common/djangoapps/pipeline_mako/templates/static_content.html#L82

What happens is that the factory and all of its dependencies are bundled into a single JavaScript file by RequireJS Optimizer (r.js), and then the resulting file is included as a script on the page rather than it being loaded asynchronously via RequireJS. From the sound of your error, it appears that you are requiring the factory before the bundle has been loaded, so your code ends up trying to load it via RequireJS. Then when the bundle loads, it throws an error because the code has already been loaded, which the r.js-optimized code doesn't expect.

It seems that what you need is to both have a dependency upon the factory *and* have your file loaded after the bundle. The factory is loaded in the js_extra block and I don't see a hook for you to ensure that your file is loaded afterwards:

https://github.com/edx/edx-platform/blob/master/lms/templates/student_account/login_and_register.html#L12

If you are comfortable modifying the platform, you might look at whether the logistration_factory can be loaded earlier, so that everything loaded in the js_extra block can rely upon the bundle being loaded in fullstack. Another option would to be introduce yet another block, but that to me seems more confusing. IMO the js_extra block is meant precisely for the kind of thing you are doing.

I hope this helps get you started. Let me know if I can help any more. If you want to continue this discussion in real time, you can use the #front-end channel in Slack (I'm @andya).

Thanks,

 - Andy

--
You received this message because you are subscribed to the Google Groups "General Open edX discussion" group.
To view this discussion on the web visit https://groups.google.com/d/msgid/edx-code/6a71a8ad-a1b3-4bb5-97e2-4ca033ffc41f%40googlegroups.com.

--

Andy Armstrong

edX | UI Architect  | an...@edx.org  

141 Portland Street, 9th floor

Cambridge, MA 02139

http://www.edx.org