在JSP标记中使用JavaScript

Question

I've seen this question regading the importing of js-files related to the tag content itself. I have a similar problem, here I have a jsp tag that generates some HTML and has a generic js-implementation that handles the behavior of this HTML. Furthermore I need to write some initialization statements, so I can use it afterwards through JavaScript. To be possible to use this "handler" within my JavaScript, it should be somehow accessible.

The question is... Is it Ok to write inline <script> tags along with my HTML for instantiation and initialization purposes (personally I don't think its very elegant)? And about being accessible to the JS world, should I leave a global var referencing my handler object (not very elegant aswell I think), are there better ways to do it?

Answer 1

You should strive for javascript in its own files. This is usually done with Progressive Enhancement . But some times you don't have a choice, for instance when the same JSP renders pages in different languages. Here's a real-life example:

The 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>  

The 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 needs to be there. The core functionality is separated in its own js-file.

Answer 2

I'm not entirely sure what you asking here, but I don't there's anything wrong with including <script> tags in the JSP to instantiate javascript code. I often follow this model, writing the library code in external javascript files, and then calling the constructors to my objects from the <script> tags.

This makes debugging easy, since the logic is all in the external files (and firebug seems to have trouble with debugging inline javascript code). The libraries get cached, but the data instantiating them doesn't (which is the desired behavior).

The alternative is to have the instantiation code dynamically generated in an external javascript file or AJAX call. I've done this too, 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 it out via an AJAX call that returns JSON. If its a simple call to a constructor, put it in the JSP.

As for the global variable, I will often have a global for the top-level object that kicks everything off. Inside that, are all the other references to the helper objects.

Answer 3

Although I agree that it's not entirely elegant, I've been known to do it a few times when combining server-side decisions with an AJAX-integrated environment. Echoing inline <script> tags in order to initialize some variables isn't a terrible thing, as long as no one sees it.

As for better methods, I am unaware of these. I've done this so rarely that I haven't sought a more elegant or "proper" solution.

Answer 4

It is ok with use <script> tags in line with HTML. There are times when it is needed, but as far as any better ways I do not know. Without making things seem more complicated it is easier to use the <script> tag then trying to find a way to implement js files.