Using django variables in Javascript

Question

My model lop is contains a list of programs which I use for varying purposes. I want to use the name field as an argument for a javascript function.

I modified some of my lops so the modified versions have a "ver2" at the end of its name. What the Javascript function does is that it checks for the suffix "ver2" of the program. The javascript was originally found from here.

I read some similar questions and one of them said that I need to serialize the object

EDIT: Expanded view of views.py, Javascript console started working and now is included.

In my views.py (UPDATED)

  from django.core import serializers
           .      
           .
           .
           .
  def loppage(request):

  jsondata = serializers.serialize('json', lop.objects.all(),fields=('name'));

  ## get programs
  data = []
  types = Type.objects.all()
  for type in types:
  data.append([type.title, type.script_set.all()])
  context = {'lop': Lop.objects.all(), 'cat': data, 'jsondata':jsondata}

  ## render list
  return render(request, 'loppage.html', context)

In my templates file: Javascript/HTML (loppage.html):

<script>
function endsWithsuffix(progname, suffix) {
return progname.indexOf(suffix, progname.length - suffix.length) !== -1;} 

  </script> 

        .
        .
        .
        .
   {% for lop in type %}
      <p id="Options"><i>{{lop.options}}</i></p>
      <p id="Id"><a href="/ne/{{lop.id}}/">{{lop.name}}</a></p>

   <script type="text/javascript">
     if  (endsWithsuffix({{jsondata}}, 'ver2'))   {    //This I've tried with and without quotation marks, and with lop.name with and without quotation marks
         document.getElementById('Options').style.visibility = 'visible';
         document.getElementById('Id').style.visibility = 'visible';
    }

     else {
         document.getElementById('Options').style.visibility = 'hidden';
         document.getElementById('Id').style.visibility = 'hidden';
       }
    </script>
   {% endfor %}

But for whatever reason, the script doesn't seem to load (it loads as if the script wasn't even though).

As wardk suggested, I have now included my Javascript console which can be seen here

SyntaxError: invalid property id loppage:56:28

It's a long repetition of this same error on the same line as shown below

Debugger console highlights

if  (endsWithsuffix([{&quot;pk&quot;: 2, &quot;model&quot;: &quot;programs.lop&quot;,

I've been working on this way longer than I should but I can't get anywhere with it. Help.

You're missing the closing `{% endfor %}` before the opening ` — Brandon Taylor, Feb 19 '15 at 22:06
@Brandon. Sorry, typo on my part (I didn't copy long enough but it's there in the original code). Fixed the question to match the correction. — ChocolateCode, Feb 20 '15 at 05:21

score 1 · Answer 1 · answered Feb 20 '15 at 07:03

1

You're applying endsWithSuffix on a json representation of lop.objects.all(). Shouldn't you test endsWithSuffix for {{lop.name}} instead?

answered Feb 20 '15 at 07:03

wardk

1,143
8
12

I initially tried it with {{lop.name}} but it was mentioned in a similar question that I would need to convert it into json before I could use it to javascript. Still, I tried using {{lop.name}} with the json variable instead and it still doesn't seem to be running. – ChocolateCode Feb 20 '15 at 14:55
^sorry, correction: I tried again with {{lop.name}} while keeping the json variable somewhere else but no dice. – ChocolateCode Feb 20 '15 at 15:02
i think you need quotes around {{lop_name}}. – wardk Feb 22 '15 at 16:48
Tried that too, both with single and double quotes. Still not working :( – ChocolateCode Feb 23 '15 at 14:05
what appears in the page source exactly? did you check the javascript console? (https://developer.chrome.com/devtools/docs/console in chrome, something similar exists for firefox) – wardk Feb 23 '15 at 17:53
The web console appears completely blank, even when I click the Javascript,Logging,etc tiles (this might be because I'm running the local version). As for the page source, it appears exactly the same except the on the page source, it says "
" instead of "
{{lop.name}}
" and (endsWithsuffix(lop.name, 'ver2')) instead of (endsWithsuffix({{'lop.name'}}, 'ver2')) . For the later, I'm not sure why it's missing the curly brackets and quotation marks despite it being there for the saved source code. – ChocolateCode Feb 23 '15 at 19:05
what exactly are you passing as context to your template? could you include the entire view function in your question? – wardk Feb 24 '15 at 20:20
When you say entire view function, are you referring to my views.py or the .html file? – ChocolateCode Feb 25 '15 at 20:54
the function in the views.py that renders the html file – wardk Feb 26 '15 at 16:19
you're looping over type in the template but you haven't passed it in the context.; you're passing lop but then you don't use it in the template. i think you need to check the django template basics. – wardk Feb 28 '15 at 08:48
Aren't I passing "lop.name" into "context" as "jsondata"? – ChocolateCode Mar 01 '15 at 21:01
I got the JavaScript console back working again and updated the question accordingly – ChocolateCode Mar 02 '15 at 19:56
Your for loop makes no sense. You haven't passed the variable 'type' and you try to loop over it. 'jsondata' doesn't change inside the loop, and you don't need it. Just loop over Lop.objects.all(). – wardk Mar 03 '15 at 19:07
'type' is appended into data and using 'lop' represents Lop.objects.all() (as seen through 'context'). The thing is that everything in the template is running perfect EXCEPT what's within the javascript (The type loop's contents is visible but nothing within the – ChocolateCode Mar 04 '15 at 15:53

Using django variables in Javascript

1 Answers1