Using JavaScript in a JSP tag

Question

I saw this question by canceling the import of js files related to the content of the tag itself. I have a similar problem, here I have a jsp tag that generates some HTML and has a common js implementation that handles the behavior of this HTML. In addition, I need to write some initialization instructions, so I can use them later through JavaScript. To be able to use this "handler" in my JavaScript, it must be somehow accessible.

Question ... Is it possible to write inline <script> tags along with my HTML to create and initialize (personally, I don’t think it is very elegant)? And about being accessible to the JS world, should I leave a global var that references the object of my handler (not very elegant as I think), are there any better ways to do this?

Answer 1

You should aim for javascript in your files. This is usually done with Progressive Enhancement . But sometimes you have no choice, for example, when the same JSP displays pages in different languages. Here is a real life example:

JSP:

<script src="/javascript/article_admin.js"></script> <script type="text/javascript"> NP_ArticleAdmin.initialize({ text: { please_confirm_deletion_of: '<i18n:output text="please.confirm.deletion.of"/>', this_cannot_be_undone: '<i18n:output text="this.cannot.be.undone"/>' } }); </script> 

javascript (article_admin.js):

  /*global NP_ArticleAdmin, jQuery, confirm */ NP_ArticleAdmin = function ($) { var text; function delete_article(event) { var article = $(this).parents("li.article"), id = article.attr("id"), name = article.find("h3.name").html(); if (confirm(text.please_confirm_deletion_of + name + text.this_cannot_be_undone)) { $.post("/admin/delete_article", {id: id}); article.fadeOut(); } event.preventDefault(); return false; } function initialize(data) { text = data.text; $("#articles a.delete").click(delete_article); } return {initialize: initialize}; }(jQuery); 

In this example, the only Javascript in the JSP file is the part that should be there. The main functionality is shared in its own js file.

Answer 2

I'm not quite sure what you are asking here, but I don't see anything bad, including <script> tags in the JSP to generate JavaScript code. I often follow this model by writing library code to external javascript files, and then calling the constructors for my objects from the <script> tags.

This makes debugging easier, as the logic is in external files (and firebug seems to have problems debugging the javascript inline code). Libraries receive caching, but the data that creates them is not (which is the desired behavior).

An alternative is to create dynamic instantiation code in an external javascript file or AJAX call. I also did this with positive results.

I think the deciding factor is how much dynamic data you have. If you need to represent large data structures, I would serve them through an AJAX call that returns JSON. If this is a simple call to the constructor, put it in the JSP.

As for the global variable, I will often have a global object for the top level that repels everything. Inside this, all other references to auxiliary objects.

Answer 3

Although I agree that it is not quite elegant, as I know, I did this several times when combining server-side solutions with an integrated AJAX environment. Echo inline <script> tags to initialize some variables, not a terrible thing if no one sees it.

As for the best methods, I don't know about that. I did this so rarely that I was not looking for a more elegant or “right” solution.

Answer 4

This is fine using <script> tags according to HTML. There are times when it is necessary, but as far as I know, it’s better. Without making things more complicated, it’s easier to use the <script> tag and then try to find a way to implement js files.