How can set jinja variable in javascript function?

Question

function show_modal(val1, val2){
    {% set msg1 = val1 %}
    {% set msg2 = val2 %}
    document.getElementById('id01').style.display='block'
}

I have calling show_modal() function in some where in the template.

Needs each time assigning situational values to msg1 and msg2

Not working. Each not working below:

function show_modal(){
    {% set msg1 = "Delete Column" %}
    {% set msg2 = "Are you sure you want to delete this column?" %}
    document.getElementById('id01').style.display='block'
}

May I show different prompts with this part of code? (Which is invisible by default)

<div id="id01" class="modal">
        <h1>{{ msg1 }}</h1>
        <p>{{ msg2 }}</p>
</div>

Are you using external js file or the js code is within HTML file? — itsmehemant7
– itsmehemant7, Commented Jan 15, 2023 at 23:25
After the page rendered, I can using {% set msg1 = "Delete Column" %} or {% set count = namespace(value=0) %} and so on... — parmer_110
– parmer_110, Commented Jan 15, 2023 at 23:36
In this case user click on Delete button and I need show him a warning prompt. This prompt have difference for each delete button. The page contains several Delete button — parmer_110
– parmer_110, Commented Jan 15, 2023 at 23:38

itsmehemant7 · Accepted Answer · 2023-01-15 23:37:56Z

1

You have to use pure js for this, try something like this:

function show_modal(){
   let msg1 = "Delete Column";
   let msg2 = "Are you sure you want to delete this column?";
   document.getElementById("id01").innerHTML=`
     <h1>${msg1}</h1>
     <p>${msg2}</p>`;
   document.getElementById('id01').style.display='block'
 }

<div id="id01" class="modal">
</div>

answered Jan 15, 2023 at 23:37

itsmehemant7

3431 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How can set jinja variable in javascript function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related