Reputation: 217

Load JSP file into Javascript to realize Fragments

I'm working with SringMVC and I'm searching for an easy solution to load a JSP into a div box of another JSP file. I heard about using Tiles but I would prefer to use ajax/jquery. Can anyone help me with that? I'm trying to get this working for two days now... My current approach is something like this:

$(document).ready(function() {
    var html =  '<jsp:include page="searchSites.jsp"/>';
    $('#contentbox').load(html);
});

But this is throwing an "Uncaught SyntaxError: Unexpected token ILLEGAL" Error at the second line. I also tried c:import but this isn't working, too. Thank you very much for your help!

Edit:

@Controller
@RequestMapping("/search")
public class SearchController {

    @Autowired private SiteService siteService;
    @Autowired private SystemService systemService;

    @RequestMapping(value = "")
    public String displaySearch(Model model) {
        return "displaySearch";
    }

    @RequestMapping(value = "sites", method = RequestMethod.POST )
    public String displaySites(Model model, @RequestParam String searchStr) {
        List<RSCustomerSiteViewDTO> sites = siteService.getSitesByName(searchStr);
        model.addAttribute("sites", sites);
        return "searchSites";
    }

    @RequestMapping(value = "systems", method = RequestMethod.POST)
    public String displaySystems(Model model, @RequestParam String searchStr) {
        List<RSServicedSystemViewDTO> systems = systemService.getSystemsByName(searchStr);
        model.addAttribute("systems", systems);
        return "searchSystems";
    }       
}

displaySearch.jsp

<html>
<head>
<title>Site</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="<c:url value="resources/css/style.css" />" />
<script>
    $(document).ready(function() {
        var html =  '/crsp/search/sites';
        $('#contentbox').load(html);
    });

</script>
</head>
<body>
    <div id="content">
        <div id="searchdiv">
            <form method="POST" action="search/sites">
                <input type=text name=searchStr placeholder="Search Site..."
                    id="searchSite" class="search" />
            </form>
            <form method="POST" action="search/systems">
                <input type=text name=searchStr placeholder="Search System..."
                    id="searchSystem" class="search" />
            </form>
        </div>
        <div id="contentbox">


        </div>
    </div>
</body>
</html>

searchSites.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<table>
    <tr id="header">
        <td>Name</td>
        <td>Customer</td>
        <td>City</td>
        <td>Region</td>
    </tr>
    <c:forEach var="site" items='${sites}' varStatus="loopStatus">
        <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
            <td>${site.siteName}</td>
            <td>${site.customerName}</td>
            <td>${site.siteCity}</td>
            <td>${site.regionName}</td>
        </tr>
    </c:forEach>
</table>

Edit: I came closer. I have to fire something like this from the forms instead of the action which I got until now, then it will work: Suggestions?

function searchSites(searchStr) {
    $.ajax({
        type: "POST",
        url: "sites?searchStr=",
        success: function(data) {
            $("#contentbox").html(data);
        }
    });
}

Upvotes: 5

Answers (2)

Kevin Bowersox

Reputation: 94499

The load method should be provided with a url that corresponds with a mapping to one of your controller methods.

Controller

@Controller
@RequestMapping("/site")
public class MyController{

   @RequestMapping("/search")
   public String getFragment(){
       return "fragment";
   }
}

Javascript

$(document).ready(function() {
    var html =  "/contextRoot/site/search"; //you may need to use jstl c:url for this
    $('#contentbox').load(html);
});

Config

Please note this example, assumes you have a ViewResolver setup in your dispatcher configuration file as follows and there is a fragment.jsp file within the root of your WEB-INF directory:

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/" />
<property name="suffix" value=".jsp" />
</bean>

The basic concept of request handling in Spring MVC is that a request is "somehow" mapped to a controller method. Spring MVC provides various ways of doing this url, request type, parameter presence, parameter values, etc... But basically it boils down to which controller/method should handle this request. This is most often accomplished using @RequestMapping.

After the method is found data binding occurs, meaning that request parameters are supplied to the method as arguments. Once again there are various ways to match parameters to arguments, including path variables, modelattributes, etc...

Next the body of the method is executed, this is pretty much custom and you provide the implementation.

The next part is where you seem to be getting stuck. The controller method next tells Spring what view should be displayed. Once again there are many ways to do this, but one of the most common is to return a String at the end of your method that corresponds with a view (.jsp). Usually a view resolver is registered to avoid hardcoding the name of a view file in the returned String. The returned String is resolved by the ViewResolver and associated view is returned.

To answer your follow up question if you want to serve the displaySearch.jsp after processing a request for search/systems you simply return that viewName.

@RequestMapping(value = "systems", method = RequestMethod.POST)
public String displaySystems(Model model, @RequestParam String searchStr) {
    List<RSServicedSystemViewDTO> systems = systemService.getSystemsByName(searchStr);
    model.addAttribute("systems", systems);
    return "displaySearch";
}

Upvotes: 1

mohkhan

Reputation: 12335

You should remove the JSP tag

var html =  'searchSites.jsp';
$('#contentbox').load(html);

Upvotes: 2

Load JSP file into Javascript to realize Fragments

Answers (2)

Related Questions