Announcement Announcement Module
Collapse
No announcement yet.
Can an AJAX call return a JSP-file Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Can an AJAX call return a JSP-file

    In my webapp I'd like to save info about customer through an Ajax-call. The information should be typed in a form and when the "submit" button is clicked, an AJAX call to the server is executed.

    After the customer is saved, I want the server to return html code for a section that should replace the form that was submited. I want this to be in a jsp file. The section could typically contain info about the customer that was saved, but instead of sending back just firstname, lastname, I want to send HTML code that already contain this information.

    Then I don't need to use javascript to put it into the right place on the site.
    Is this possibel to do?
    Code:
    @Controller
    public class AjaxFrontController {
    
    @RequestMapping("/addCustomer.do")
      public void addCustomer(HttpServletRequest request, HttpServletResponse response)
              throws IOException, ServletException {
    
        String firstName = request.getParameter("firstname");
        String lastname = request.getParameter("lastname");
        String address = request.getParameter("address");
    
    
       Code for saving customer...
    
    
    The code below is how I normally would do it... And then I would use Javascript to put it into the HTML code.
    
        sb.append("<result>");
        sb.append("<customer>");
        sb.append("<firstname>" + firstName  + "</firstname>");
        sb.append("<lastname>" + lastName  + "</lastname>");
        sb.append("</customer>");
        sb.append("</result>");
    
    But I want to return a file that contains a div with firstname and lastname like you would do if this was a normal HTTP call.
    
    
        response = initResponse(response);
        response.setContentLength(sb.length());
        response.getWriter().write(sb.toString());
      }

  • #2
    No problem with HTML fragments or XML inside a JSP. A JSP compiler just cares for the JSP tags and is oblivious to the rest of the content.
    Besides, using an iframe or a decent template/decoration engine would allow you to do this without AJAX at all.

    HTH

    Comment


    • #3
      Thanks for your answer!

      iframe or a decent template/decoration engine
      Can you explain this a bit more thoroughtly? Is it possible to use a tag library?

      If you have a link to an example, I'd be happy if you could post it!

      This is typically my Javascript file. I'm using JQuery.
      So you're saying I shouldn't use Javascript for this?

      //Saves customer
      Code:
      $("#saveCustomerBtn").click(function() {
       
          $.post("http://localhost:8080/CustBase/saveCustomer.do", $("#frmSaveCustomer").serialize(),
            function(data){
      
              $(data).find("result").each(function() {
            
      Javascript that inserts the returned values into the html code
      
            });
        });

      Comment


      • #4
        You will find a short description of the iframe tag here: http://www.javascriptkit.com/howto/externalhtml.shtml.
        Basically, you include an HTML page within another. If the included page contains the form and you submit it, the containing page will stay the same. Additionally the result page will replace the included form page, which is what you wanted. The price you pay for this luxury is the second HTTP request for the included page.

        HTH

        Comment


        • #5
          For me it seems a bit weird to use an iframe to solve this problem. I would imagine the best solution is to use some kind of tags. I don't know if Spring provides that, but I've heard that Struys does.

          But let me explain my problem more thoroughly one more time to decrease the chance of misunderstanding.

          Below is a jsp-file that shows a bit of information about a customer. When I click on the "editCustomerBtn" button, I want to make an AJAX call to the server, and receive just the html-code for the div with id mainFrame. If I didn't use AJAX the server would return a whole new jsp-file with header and right frame included. When the client recives the new mainFrame, it switches with the old one.

          I know you can do this with JQuery, but is there a better way. There will be a lot of javascript coding, so I recon there is a better way to do this. I know there is something called Spring Javascript and Webflow. CAn you use that on theis problem?


          ViewCustomer.jsp

          Code:
          <html>
            <head></head>
            <body>
          
              <div id="wrapper">
                <div id="header"></div>
                <ul id="horMenu"></ul>
          
          <!-- ========== Mainframe ==========  -->
          <div id="mainFrame" class="mainFrame">
            <h4>View Customer</h4>
          
            <div class="elementWrapper">
              <form method="post" action="addCustomer.do" id="frmAddCustomer">
                <table class="inputTable">
                  <tr>
                    <td><label>Firstname</label></td>
                    <td><input type="text" id="firstname" name="firstname" /></td>
                  </tr>
                  <tr>
                    <td><label>Lastname</label></td>
                    <td><input type="text" id="lastname" name="lastname"/></td>
                  </tr>
                </table>
          
                <ul class="buttonList">
                  <li><input type="button" value="Edit"  id="editCustomerBtn" /></li>
                </ul>
          
              </form>
            </div><!--elementArea-->
          </div><!--mainFrame-->
          </div><!-- main -->
          </body>
          </html>

          Comment


          • #6
            That's exactly where an iframe would fit in.
            ViewCustomer.jsp would look like this:
            HTML Code:
            <html>
              <head></head>
              <body>
            
                <div id="wrapper">
                  <div id="header"></div>
                  <ul id="horMenu"></ul>
            
            <!-- ========== Mainframe ==========  -->
            <iframe src="AddCustomer.jsp"/>
            </div><!-- main -->
            </body>
            </html> 
            AddCustomer.jsp:
            HTML Code:
            <html>
              <head></head>
              <body>
            <!-- ========== Mainframe ==========  -->
            <div id="mainFrame" class="mainFrame">
              <h4>View Customer</h4>
            
              <div class="elementWrapper">
                <form method="post" action="addCustomer.do" id="frmAddCustomer">
                  <table class="inputTable">
                    <tr>
                      <td><label>Firstname</label></td>
                      <td><input type="text" id="firstname" name="firstname" /></td>
                    </tr>
                    <tr>
                      <td><label>Lastname</label></td>
                      <td><input type="text" id="lastname" name="lastname"/></td>
                    </tr>
                  </table>
            
                  <ul class="buttonList">
                    <li><input type="button" value="Edit"  id="editCustomerBtn" /></li>
                  </ul>
            
                </form>
              </div><!--elementArea-->
            </div><!--mainFrame-->
            </body>
            </html>
            The result page which would replace AddCustomer.jsp inside ViewCustomer.jsp can also be a JSP.
            The controller would be plain Spring MVC or any other web framework you like.

            HTH

            Comment

            Working...
            X