Passing parameters into Javascript in HTML

Question

I have an html template that I am using in my Django project. I have a string that is defined in my Django view that I want to pass to javascript in my html template, but I am having trouble getting it to work. There are two different strings, and the one displayed depends on the state of the toggle.

The strings created in my view (and when properly displayed) look like this:

ATS_string_true:

2015-123-01:34:39 CDS_FSW_FLASH_PLAYBK_STOP 
2015-123-01:34:41 CDS_FSW_FLASH_REPLAY_REQ TLM_DATA_TYPE=0 START_BLOCK=7 NUM_BLOCKS=3
2015-123-01:34:43 CDS_FSW_FLASH_REPLAY_REQ TLM_DATA_TYPE=1 START_BLOCK=300 NUM_BLOCKS=12
2015-123-01:34:51 CDS_FSW_FLASH_PLAYBK_STOP

and ATS_string_false:

[Ref task: SAT_F7_COMM_NOMINAL_31_op ] 2015-123-01:34:39 CDS_FSW_FLASH_PLAYBK_STOP

However, the string in the error message looks like this:

[Ref task: &lt;SAT_F7_COMM_NOMINAL_31_op&gt; ] &gt;&gt; 2015-123-01:34:39 CDS_FSW_FLASH_PLAYBK_STOP  
[Ref task: &lt;SAT_F7_COMM_NOMINAL_31_op&gt; ] &gt;&gt; 2015-123-01:34:41 CDS_FSW_FLASH_REPLAY_REQ TLM_DATA_TYPE=0 START_BLOCK=7 NUM_BLOCKS=3 
[Ref task: &lt;SAT_F7_COMM_NOMINAL_31_op&gt; ] &gt;&gt; 2015-123-01:34:43 CDS_FSW_FLASH_REPLAY_REQ TLM_DATA_TYPE=1 START_BLOCK=300 NUM_BLOCKS=12

My html/js looks like this:

{% if ATS %}
  <div class="panel panel-heading">
    <h3 class="text-center">ATS</h3>
  </div>
  <div class="panel-body">
    <div class="checkbox disabled">
      <label>
        <input id="ATS_debug" type="checkbox" data-toggle="toggle">
        ATS Debug
      </label>
    </div>
    <div id="ATS" style="background-color:black; color:white; padding:20px;">
      <p>{{ ATS_string_false | linebreaks }}</p>
    </div>
  </div>
  <script>
    $(function() {
      $('#ATS_debug').change(function() {
        if ($(this).prop('checked')) {
          $('#ATS').html({{ATS_string_true}});
        } else {
          $('#ATS').html({{ATS_string_false}});
        }
      })
    })
  </script>
{% endif %}

I'm getting an Uncaught SyntaxError: Unexpected identifier error at $('#ATS').html({{ATS_string_true}});. Can anyone help me out with this?

Thanks!

Going from what I know about server pages and server templates, @RexOverflow is correct. You need to put those values into quotes so the result is proper js/html. — Sinistralis
– Sinistralis, Commented Jul 17, 2015 at 18:10
@Sinistralis I just deleted my comment. So, don't refer it now. @ Nursultan has answered. — Talha Akbar
– Talha Akbar, Commented Jul 17, 2015 at 18:12

Nursultan Zarlyk · Accepted Answer · 2015-07-17 18:10:17Z

3

You need to wrap a variable {{ATS_string_true}} into "" like this:

$('#ATS').html("{{ATS_string_true}}");

Because Django doesn't do it for you).

answered Jul 17, 2015 at 18:10

Nursultan Zarlyk

4221 gold badge5 silver badges16 bronze badges

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

2 Comments

Sinistralis Over a year ago

The same goes for any server page/template language.

kdubs Over a year ago

Ahh. It's always the simple things that get me. Thanks!!

Talha Akbar · Accepted Answer · 2015-07-17 18:27:16Z

You need to wrap it in quotes as @Nursultan just answered. The templating engines only concern about what to replace with what. The {{ATS_string_true}} part will be exactly replaced by the value of the variable ATS_string_true. Now, have a look at what your code which throws error:

$("#ATS").html({{ATS_string_true}});

Also,

$("#ATS").html({{ATS_string_false}});

Here consider: var ATS_string_true = "I am the true value";

The .html() method of jQuery expects the first parameter to be a string. If you do not wrap it in quotes, it will look as:

$("#ATS").html(I am the true value); // Invalid JS

But if you will add quotes like as suggested; the final processed template will look like:

$("#ATS").html("I am the true value"); // Valid JS

Collectives™ on Stack Overflow

Passing parameters into Javascript in HTML

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related