CODEWITHSUNDEEP
javascripthtmljsondjango
ChocolateCode
ChocolateCode

Reputation: 11

Using django variables in Javascript

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.

Upvotes: 0

Views: 205

Answers (1)

wardk
wardk

Reputation: 1143

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

Upvotes: 1

Related Questions