CODEWITHSUNDEEP
javascripthtml
kdubs
kdubs

Reputation: 946

Passing parameters into Javascript in HTML

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: <SAT_F7_COMM_NOMINAL_31_op> ] >> 2015-123-01:34:39 CDS_FSW_FLASH_PLAYBK_STOP  
[Ref task: <SAT_F7_COMM_NOMINAL_31_op> ] >> 2015-123-01:34:41 CDS_FSW_FLASH_REPLAY_REQ TLM_DATA_TYPE=0 START_BLOCK=7 NUM_BLOCKS=3 
[Ref task: <SAT_F7_COMM_NOMINAL_31_op> ] >> 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!

Upvotes: 1

Views: 63

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10030

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

Upvotes: 0

Nursultan Zarlyk
Nursultan Zarlyk

Reputation: 412

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).

Upvotes: 3

Related Questions