How to pass Spring mvc controller variable to javascript

Question

I am trying to get a variable for a javascript function from an object that sends it to view by the controller.

The object with which I am working is Bpmsn.

Through the controller I injected the object into view.

My method of the controller is:

@RequestMapping(value = "/display")
public ModelAndView index2(@RequestParam int bpmsnId) {
    ModelAndView result;
    Bpmsn bpmsn;

    bpmsn = bpmsnService.findOne(bpmsnId);

    result = new ModelAndView("editor/display");
    result.addObject("bpmsn", bpmsn);

    return result;
}

This method I use to make a display of the object.

In the jsp view I inject the attributes of the object, except the textXML that I will use in a javascript script.

<div>
<ul>
    <li><b><spring:message code="bpmsn.ticker" />:</b> <jstl:out
            value="${bpmsn.ticker}" /></li>
    <li><b><spring:message code="bpmsn.title" />:</b> <jstl:out
            value="${bpmsn.title}" /></li>
    <li><b><spring:message code="bpmsn.summary" />:</b> <jstl:out
            value="${bpmsn.summary}" /></li>
    <li><b><spring:message code="bpmsn.authoredMoment" />:</b> <jstl:out
            value="${bpmsn.authoredMoment}" /></li>
    <li><b><spring:message code="bpmsn.likes" />:</b> <jstl:out
            value="${bpmsn.likes}" /></li>
    <li><b><spring:message code="bpmsn.dislikes" />:</b> <jstl:out
            value="${bpmsn.dislikes}" /></li>
</ul>

With the textXML attribute I want to create a javascript function to import that xml into a bpmn modeler, but I do not know how to get the textXML attribute of the object injected into the view from the javascript script

I tried to call the attribute as in the view but it does not work

<script type="text/javascript">
    var bpmnXML = ${bpmsn.textXML}; //not work
    alert(bpmnXML)
    // BpmnJS is the BPMN viewer instance
    var viewer = new BpmnJS({
        container : '#canvas'
    });

    // import a BPMN 2.0 diagram
    viewer.importXML(bpmnXML, function(err) {
        if (err) {
            // import failed :-(
            alert('could not import BPMN 2.0 diagram', err);
        } else {
            // we did well!
            var canvas = viewer.get('canvas');
            canvas.zoom('fit-viewport');
        }
    });

SAAD BELEFQIH · Accepted Answer · 2019-09-05 21:46:46Z

5

We can pass Spring MVC variables to Javascipt for example:

 <script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

answered Sep 5, 2019 at 21:46

SAAD BELEFQIH

3824 silver badges8 bronze badges

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

Comments

Mihir Gohel · Accepted Answer · 2017-02-02 14:46:21Z

1

Java object stored in model, cannot be accessed in scripts as it is executed on client side.

Easy and simple solution is to serialize object in JSON, add it to model, access in Javascript.

You need something like this.

ObjectMapper objectMapper = new ObjectMapper();
result.addObject("bpmsn", objectMapper.writeValueAsString(bpmsn));

And it can be accessed in script simply.

var bpmnJsonString = '${bpmsn}';
Obj bpmn = JSON.parse(bpmnJsonString);
var bpmnXML = bpmn.textXML; 
alert(bpmnXML)

Hope it solves your problem.

edited Feb 2, 2017 at 14:46

answered Feb 2, 2017 at 5:32

Mihir Gohel

3162 silver badges6 bronze badges

1 Comment

josandluq Over a year ago

Thanks friend, I have been very helpful. I was able to solve my problem

Alex Minjun Yu · Accepted Answer · 2017-02-01 21:44:09Z

0

This does not work because var bpmnXML = ${bpmsn.textXML}; is executed only on client side.

One solution would be that you can introduce a hidden field with an attribute with value ${bpmsn.textXML} which will be executed in the server side. You will be able to access this value in your javascript (I'll use jQuery for illustration).
e.g.

<input id="bpmsn-textxml" type="hidden" data-textxml="${bpmsn.textXML}"/>

var bpmnXML = $("#bpmsn-textxml").data("textxml");

answered Feb 1, 2017 at 21:44

Alex Minjun Yu

3,7174 gold badges27 silver badges42 bronze badges

2 Comments

Cagatay Kalan Over a year ago

You don't need a hidden field for this. Just use some existing element. Put the data-textxml attribute on the "ul" for instance and use $("[data-textxml]").data("textxml")

Alex Minjun Yu Over a year ago

@CagatayKalan That works too, I used hidden field because I want to separate the concerns. What do you think?

Collectives™ on Stack Overflow

How to pass Spring mvc controller variable to javascript

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related