Solution to add javascript components to snippet options dialog.

[allochi]

Hi,

I have been trying to add some javascript components to my options view, I've tried too many different ways, and I would like to share my successful attempt here, for other users and hopefully to find its way to mercury in the future.

Requirement: I need to add an ajax driven Select2 drop-down to my options view, I need this to select a document or an image from my resources library which contains thousands of documents. I also need this for other JS components, which I haven't tried yet (I only tried it successfully with Select2 so far, but all should work the same way).

I also don't want to load all the scripts when Mercury initialize, who knows which snippet the user will use, loading all would slow down the editor loading time, and may create conflicts that better without.

Suggested Solution: Add another view that contains javascript for the options view, call the file options.js.erb, load and then execute the file after the dialog has been completely initialized and loaded.

My Current Solution

• I added the view (options.js.erb) to the snippet folder, all necessary javascript to deal with the form is there.
• in mercury.html.erb I added this code which override Snippet.displayOptionsFor

Mercury.Snippet.displayOptionsFor = function(name) {
        Mercury.modal(Mercury.config.snippets.optionsUrl.replace(':name', name), {
          title: 'Snippet Options',
          handler: 'insertSnippet',
          snippetName: name
        });
        setTimeout(500, function() {
          $.ajax({
            url: Mercury.config.snippets.optionsUrl.replace(':name', name).replace('.html','.js'),
            dataType:'html',
            success: function(data){
              eval(data);
            }
          });
        });
        return Mercury.snippet = null;
      };

• This was added after the following code in mercury.html.erb

new Mercury.PageEditor(saveUrl, options);

Now every time I add a snippet, options.html.erb gets loaded and the javascript in mercury.js.erb get executed.

Hope this will help some to write more CMSs with Mercury.

Again and again I would like to thank Mercury Team for their great work!

[gvarela]

Thanks for sharing. This might be a good wiki entry.

[kitwalker12]

Thanks for sharing. This helped a lot.