${findState} value is not getting if script file placed outside

Question

I have created a liferay portlet with ajax feature, The application is working fine but the issue is that say when I put the ajax script within the jsp page like as shown below I will be able to pass the ${findState} url but If I include the javascipt outside within a js file and tries to trigger the ajax I am not getting the value of ${findState} and is showing error.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />

<portlet:resourceURL id="findState" var="findState" ></portlet:resourceURL>

<script type="text/javascript">
$(document).ready(function(){

$( "#country" ).change(function() {
      $.ajax({
            url: "${findState}" ,
            type: 'POST',
            datatype:'json',
            data: { 
                    countryName: $("#country").val() 
              },
                success: function(data){
                var content= JSON.parse(data);
                $('#state').html('');// to clear the previous option
                $.each(content, function(i, state) {
                    $('#state').append($('<option>').text(state.name).attr('value', state.stateId));
                });
            }
        });
  }); 
});
</script>

<b>Change the Country State Change By Ajax</b> <br><br>
Country:
<select id="country" name="country">
<option value="select">Select Country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>

<br><br>
State:
<select id="state" name="state">
</select>

Can anyo please tell me some solution for this

score 2 · Accepted Answer · edited May 23 '17 at 11:44

${findState} is an expression language variable that is being processed on the server by the JSP engine. So at runtime, in the browser, the url: "${findState}" property is in fact a url: "someUrlString". When you move the Javascript portion of the code in a separate js file, that file will no longer be processed by the server (the JSP engine).

My suggestion would be to wrap the ajax call in a function in a separate js file (named yourJavascriptFile.js, for example) containing the following:

var callAjax = function(ajaxUrl) {
      $.ajax({
            url: ajaxUrl ,
            type: 'POST',
            datatype:'json',
            data: { 
                    countryName: $("#country").val() 
              },
                success: function(data){
                var content= JSON.parse(data);
                $('#state').html('');// to clear the previous option
                $.each(content, function(i, state) {
                    $('#state').append($('<option>').text(state.name).attr('value', state.stateId));
                });
            }
        });
}

Then your JSP should have the following:

<script src="yourJavascriptFile.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$( "#country" ).change(function() {
      callAjax("${findState}");
  }); 
});
</script>

In other words, you're trying to mix expression language variables into external JS files that will not be executed by your server engine. Please see the answer to this question for other solutions to this kind of problem.

${findState} value is not getting if script file placed outside

1 Answers1