Access to the variable I put in the model in my jquery script

Question

i want to access in my jquery script to the variable cardlist i put in the model:

@RequestMapping(value="/searchlostcard") 
public  
String searchlostcard(@ModelAttribute(value="searchform") SearchForm searchForm
        ,HttpServletRequest request, Map<String, Object> model) {   


    List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());

    model.put("cardlist", listlostcard);

    return "search/results";

}

My jquery ajax call:

function searchAjax() {
$.ajax({
    url : 'searchlostcard',
    type: 'POST',
    data:$('#formSearch').serialize(),
    success : function(responce) {  

        /* how can i acces to my List of object (listlostcard) ? */
        $('#page_grid').html(responce);
    },      
    error : function(){
        alert("error");
    }
});

}

You need to understand that Java is a server side component in this case, while javascript is a client side component. The List no longer exists on the client side. — Sotirios Delimanolis
– Sotirios Delimanolis, Commented Jan 8, 2014 at 18:56
but the variable it send with request. so we can get it from the client side. — Hayi
– Hayi, Commented Jan 8, 2014 at 18:59
The server response with an HTTP response which contains HTML content with nested javascript. The browser (the client) can execute the javascript. There is no concept of java object or variables at this point. — Sotirios Delimanolis
– Sotirios Delimanolis, Commented Jan 8, 2014 at 19:00
take a look at this topic i try it but i return me something wrong. — Hayi
– Hayi, Commented Jan 8, 2014 at 19:02
You aren't accessing the variable from javascript. The JSP is rendering the ${something} expression into some String. The rendered text (which is simply HTML) is sent as the body of the HTTP response. Your browser receives that body, sees something like var javascriptVar = "someText";, evaluates it and executes it. It's just text. — Sotirios Delimanolis
– Sotirios Delimanolis, Commented Jan 8, 2014 at 19:12

Evgeni Dimitrov · Accepted Answer · 2014-01-08 19:39:34Z

1

Change you method as:

@RequestMapping(value="/searchlostcard") 
@ResponseBody
public  
List<Lostcard> searchlostcard(@ModelAttribute(value="searchform") SearchForm searchForm
        ,HttpServletRequest request) {   


    List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());

    return listlostcard ;

}

make sure you have Jackson Mapper in the classpath. Then you can access the list in the success mehtod.

To use the response in the you can use:

success : function(responce) {  

    jQuery.each(response, function(i, val) {
                    alert(val.someProperty);
                });
}

edited Jan 8, 2014 at 19:39

answered Jan 8, 2014 at 19:22

Evgeni Dimitrov

22.6k34 gold badges124 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

a better oliver Over a year ago

And how is $('#page_grid').html(responce);supposed to work then?

Evgeni Dimitrov Over a year ago

It's not. I said the list can be accessed in the success method. You need to iterate over it...

a better oliver Over a year ago

So your solution isn't working or at least not complete. For the JavaScript part is still the same.

Evgeni Dimitrov Over a year ago

I updated the answer with Jquery example. pur JS can also be used. Instead of alert the result can be appended to the html. someProperty can be any Lostcard property.

Mehran Hatami · Accepted Answer · 2014-01-08 19:45:51Z

0

use Gson api to create a json string and put it in your model. to use Gson add this to your pom.xml:

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>1.7.1</version>
</dependency>

then do this in your java code:

List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());
Gson gson = new GsonBuilder().create();
String json = gson.toJson(listlostcard);
model.put("cardlist", json);
return "search/results";

then read it in your js file like this:

success : function(responce) {  

    var cardlist = JSON.parse(responce);
    var tbl = document.createElement("table");
    for(var i=0;i<cardlist.length;i++){
        var row = tbl.insertRow(i);
        //let's say you have ID and title in your model
        var idCell = row.insertCell(0);
        idCell.innerHTML = cardlist[i]["ID"];
        var titlecell = row.insertCell(1);
        titlecell.innerHTML = cardlist[i]["title"];
    }
    $('#page_grid').append(tbl);
}

edited Jan 8, 2014 at 19:45

answered Jan 8, 2014 at 19:18

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

10 Comments

a better oliver Over a year ago

responce would still be HTML

Hayi Over a year ago

yes var cardlist = JSON.parse(responce); responce is html !

Mehran Hatami Over a year ago

no it is a json string if you want to convert it to html, first you have to decide how would you like to display your data, for instance in a table or a list...

a better oliver Over a year ago

So if if you know it doesn't work, why do you include it in your code?

Mehran Hatami Over a year ago

I put it there just to print the json data as an string in the page. but if you want I can add another part to make it like a table.

|

Collectives™ on Stack Overflow

Access to the variable I put in the model in my jquery script

2 Answers 2

4 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related