title: How to call the external jsp in js
body: <p>In my project my UI developer has hard coded piece of html code in js. I want to keep this code in the jsp, Because i need to use spring message tags to get the file rendered in any language selected by the user.</p>
  
  <pre><code> render: function () {
              $("#pageloading").show();
              this.$el.html(
                  **'&lt;div class="row" id="test_page"&gt;' +
                      '&lt;div class="col-xs-12"&gt;' +
                          '&lt;div class="panel"&gt;' +
                              '&lt;div class="panel-heading"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'SECTION &lt;span id="section"&gt; A &lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'QUESTIONS : &lt;span id="quesNo"&gt; &lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'Time Remaining : &lt;span id="timer"&gt;&lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                      '&lt;div class="col-xs-12"&gt;' +
                                          '&lt;div class="panel-group" id="test_questions"&gt;&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                                  '&lt;!-- /.row (nested) --&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;!-- /.panel-body --&gt;' +
                              '&lt;div class="panel-footer"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                      '&lt;div class="col-xs-3 pull-right"&gt;' +
                                          '&lt;button id="back_section" type="reset" class="btn btn-default"&gt;PREVIOUS&lt;/button&gt;' +
                                          '&lt;button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;"&gt;NEXT&lt;/button&gt;' +
                                          '&lt;button id="submit_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;"&gt;Submit&lt;/button&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;!-- /.panel --&gt;' +
                      '&lt;/div&gt;' +
                      '&lt;!-- /.col-xs-12 --&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%"&gt;' +
                      '&lt;div class="modal-dialog" style="width: 80%;"&gt;' +
                          '&lt;div class="modal-content"&gt;' +
                              '&lt;div class="modal-header"&gt;' +
                                  '&lt;h4&gt;Instructions &lt;div class="btn goToLastPage"&gt;&lt;i class="fa fa-reply-all"&gt;&lt;/i&gt; Back&lt;/div&gt;&lt;/h4&gt;'+
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-body"&gt;' +
                                  '&lt;div class="panel-body" style="text-align: justify; padding:0 100px"&gt;' +
                                      '&lt;div class="row"&gt;' +
                                          '&lt;div class="col-xs-12"&gt;' +
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to  you (participant).&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is &lt;= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' &lt;a href="mailto:amruta.p@exidelife.in"&gt; amruta.p@exidelife.in &lt;/a&gt; '+' in case of any clarifications.&lt;/h5&gt;'+
                                          '&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-footer"&gt;' +
                                  '&lt;div class="startTopicTest btn btn-default"&gt; Test Start &lt;/div&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;/div&gt;' +
                  '&lt;/div&gt;'** 
              );
  
              Backbone.ajax({
                  dataType: "json",
                  url: "topictestquestion",
                  data: "",
                  type: "POST",
                  beforeSend: function(xhr) {
                      xhr.setRequestHeader(header, token);
                  },
  </code></pre>
  
  <p>I want to put this HTML code in a jsp file and this js file should call my jsp file that i am suppose to create.</p>
  
  <pre><code>mockTestBegin: function() {
              $("#pageloading").show();
              this.$el.html(
                  '&lt;div class="row" id="test_page"&gt;' +
                      '&lt;div class="col-xs-12"&gt;' +
                          '&lt;div class="panel"&gt;' +
                              '&lt;div class="panel-heading"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'SECTION &lt;span id="section"&gt; A &lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'QUESTIONS : &lt;span id="quesNo"&gt;&lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                      '&lt;div class="col-xs-4"&gt;' +
                                          'Time Remaining : &lt;span id="timer"&gt;&lt;/span&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                      '&lt;div class="col-xs-12"&gt;' +
                                          '&lt;div class="panel-group" id="test_questions"&gt;&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                                  '&lt;!-- /.row (nested) --&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;!-- /.panel-body --&gt;' +
                              '&lt;div class="panel-footer"&gt;' +
                                  '&lt;div class="row"&gt;' +
                                          '&lt;button id="mok_submit" type="submit" class="btn btn-danger pull-right" style="margin-right: 3%;"&gt;EXIT&lt;/button&gt;' +
                                          '&lt;button id="preview_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;"&gt;PREVIEW&lt;/button&gt;' +
                                      '&lt;div class="col-xs-3 pull-right"&gt;' +
                                          '&lt;button id="back_section" type="reset" class="btn btn-default"&gt;PREVIOUS&lt;/button&gt;' +
                                          '&lt;button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;"&gt;NEXT&lt;/button&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;!-- /.panel --&gt;' +
                      '&lt;/div&gt;' +
                      '&lt;!-- /.col-xs-12 --&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="modal fade" id="preview-mock" tabindex="-1" role="dialog" aria-labelledby="preview-mock" aria-hidden="true" data-backdrop="static" style="margin-top:2%"&gt;' +
                      '&lt;div class="modal-dialog" style="width: 80%;"&gt;' +
                          '&lt;div class="modal-content"&gt;' +
                              '&lt;div class="modal-header"&gt;' +
                                  '&lt;h1 class="page-header"&gt; Questions Numbers &lt;/h1&gt;'+
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-body"&gt;' +
                                  '&lt;div class="panel-body" style="text-align: justify; padding:0 100px"&gt;' +
                                      '&lt;div class="row"&gt;' +
                                          '&lt;div class="col-xs-12" id="preview-quession"&gt;' +
                                           '&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-footer"&gt;' +
                                  '&lt;button id="mok_submit" type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;/div&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%"&gt;' +
                      '&lt;div class="modal-dialog" style="width: 80%;"&gt;' +
                          '&lt;div class="modal-content"&gt;' +
                              '&lt;div class="modal-header"&gt;' +
                                  '&lt;h4&gt;Instructions &lt;div class="btn goToLastPage"&gt;&lt;i class="fa fa-reply-all"&gt;&lt;/i&gt; Back&lt;/div&gt;&lt;/h4&gt;'+
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-body"&gt;' +
                                  '&lt;div class="panel-body" style="text-align: justify; padding:0 100px"&gt;' +
                                      '&lt;div class="row"&gt;' +
                                          '&lt;div class="col-xs-12"&gt;' +
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to  you (participant).&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.&lt;/h5&gt;'+
                                              '&lt;i class="fa fa-hand-o-right col-xs-1"&gt;&lt;/i&gt;&lt;h5 class="col-xs-11"&gt; The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is &lt;= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' &lt;a href="mailto:amruta.p@exidelife.in"&gt; amruta.p@exidelife.in &lt;/a&gt; '+' in case of any clarifications.&lt;/h5&gt;'+
                                          '&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="modal-footer"&gt;' +
                                  '&lt;div class="startMockTest btn btn-default"&gt; Test Start &lt;/div&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;/div&gt;' +
                  '&lt;/div&gt;'
                  );
  
              Backbone.ajax({
                  dataType: "json",
                  url: "mok-testquestion",
                  data: "",
                  type: "POST",
                  beforeSend: function(xhr) {
                      xhr.setRequestHeader(header, token);
                  },
  </code></pre>
  
  <p>Same goes here as well, Everywhere my UI developer has hard coded the html code. I need to put all this in a jsp template so i can make use of spring features and that jsp file need to be called at the same place where this HTML code is been residing. 
  I am a beginner in UI please do help me. I am struggle with this issue from past one week browsing all the possible source and also learning basics of javascript, but now i dont have much time need to deliver it soon. please help 
  thanks in advance.</p>