How do you get the contextPath from JavaScript the right way

Question

Using a Java-based back-end  i e   servlets and JSP   if I need the contextPath from JavaScript  what is the recommended pattern for doing that  any why   I can think of a few possibilities   Am I missing any   1  Burn a SCRIPT tag into the page that sets it in some JavaScript variable   lt script gt var ctx     lt   request getContextPath    gt   lt  script gt    This is accurate  but requires script execution when loading the page   2  Set the contextPath in some hidden DOM element   lt span id  ctx  style  display none   gt  lt   request getContextPath    gt  lt  span gt    This is accurate  and doesn t require any script execution when loading the page   But you do need a DOM query when need to access the contextPath   The result of the DOM query can be cached if you care that much about performance   3  Try to figure it out within JavaScript by examining document URL or the BASE tag  function         var base   document getElementsByTagName  base   0       if  base  amp  amp  base href  amp  amp   base href length  gt  0             base   base href        else           base   document URL            return base substr 0          base indexOf      base indexOf      base indexOf         2    1         This doesn t require any script execution when loading the page  and you can also cache the result if necessary   But this only works if you know your context path is a single directory -- as opposed to the root directory     or the multiple directories down   mypath iscomplicated     Which way I m leaning  I m favoring the hidden DOM element  because it doesn t require JavaScript code execution at the load of the page   Only when I need the contextPath  will I need to execute anything  in this case  run a DOM query

User · Answer

I render context path to attribute of link tag with id="contextPahtHolder" and then obtain it in JS code. For example:

<html>
    <head>
        <link id="contextPathHolder" data-contextPath="${pageContext.request.contextPath}"/>
    <body>
        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

main.js

var CONTEXT_PATH = $('#contextPathHolder').attr('data-contextPath');
$.get(CONTEXT_PATH + '/action_url', function() {});

If context path is empty (like in embedded servlet container istance), it will be empty string. Otherwise it contains contextPath string

User · Answer

Reviewer the solution by this Checking the solution of this page  make the following solution I hope it works  Example    Javascript   var context   window location pathname substring 0  window location pathname indexOf     2     var url  window location protocol       window location host  context   bla bla

User · Answer

Based on the discussion in the comments  particularly from BalusC   it s probably not worth doing anything more complicated than this    lt script gt var ctx      pageContext request contextPath   lt  script gt

User · Answer

A Spring Boot with Thymeleaf solution could look like   Lets say my context-path is  app   In Thymeleaf you can get it via    lt script th inline  javascript  gt         lt   CDATA            let contextPath                            gt     lt  script gt

User · Answer

Got it  D  function getContextPath        return window location pathname substring 0  window location pathname indexOf     2      alert getContextPath       Important note  Does only work for the  root  context path  Does not work with  subfolders   or if context path has a slash       in it

User · Answer

I think you can achieve what you are looking for by combining number 1 with calling a function like in number 3    You don t want to execute scripts on page load and prefer to call a function later on  Fine  just create a function that returns the value you would have set in a variable   function getContextPath        return   lt   request getContextPath    gt        It s a function so it wont be executed until you actually call it  but it returns the value directly  without a need to do DOM traversals or tinkering with URLs   At this point I agree with  BalusC to use EL   function getContextPath        return    pageContext request contextPath        or depending on the version of JSP fallback to JSTL   function getContextPath        return   lt c out value    pageContext request contextPath     gt

[javascript] How do you get the contextPath from JavaScript, the right way?

Examples related to javascript

Examples related to jsp

Examples related to servlets