Json response data doesn't append to div
<p>I dont understand what is the problem with the success function as the ajax call works fine and the data is processed in the view, but in the success function, data doesn't get appended to the div.</p>

<p>My jquery</p>

<pre><code>$(document).ready(function() {
   $('#other').click(function() {
        var filename = "{{filename}}";
        var count = $("#count").val();

          $.ajax({
                type: 'POST',
                url: '/increment_page/',
                data: {'name':filename,'count':count,'csrfmiddlewaretoken': '{{ csrf_token }}',},
                dataType: 'jsonp',
                success: function(data) {

                 $( "#show" ).html(data.result);

                 }
             });

    });
});
</code></pre>

<p>Template</p>

<pre><code>&lt;div id="filename"&gt;{{filename}}&lt;/div&gt;
&lt;input type="text" id ="count" value='1'&gt;
&lt;button id="other"&gt;Click
&lt;/button&gt;
&lt;div id="show"&gt;
{{result|first|slice:"1:"}}
&lt;/div&gt;
</code></pre>

<p>Views.py</p>

<pre><code>def increment_page(request):
#If the AJAX request
if request.is_ajax() and request.POST:
    try:
        #Get the filename
        name = request.POST['name']
        pdf = pyPdf.PdfFileReader(open(name, "rb"))
        result=[]
        #Extract the file contents
        for page in pdf.pages:
            result.append(page.extractText())
        result = [x for x in result if x != '']
        #Get the count
        count = int(request.POST['count'])
        #Increment the count


        #Get the list item at the count(position)p
        result=result[count]
        my_dict={}
        my_dict={'result':result,'count':count}
        #print(my_dict)
        data =json.dumps(my_dict)
        return HttpResponse(data,content_type='application/json')

    except:
        e = sys.exc_info()
        return HttpResponse(e)

else:
    raise Http404
#return render(request,'view2.html',{'my_dict':my_dict,'result':result})
</code></pre>

<p>Since you commented that you're response is getting printed to the command prompt I assume that you're success function is getting called exactly how it should. Just in case please add following line to your ajax call to log error and if any please comment it.</p>

<pre><code>error: function(xhr, status, error) {
  var err = eval("(" + xhr.responseText + ")");
  alert(err.Message);
}
</code></pre>

<p>If you're calling your ajax from the click  of a button and your form is getting submitted prevent that event.</p>

<pre><code>    $(document).ready(function() {
     $('#other').click(function(e) {

      e.preventDefault();

      var filename = "{{filename}}";
      var count = $("#count").val();

      $.ajax({
       type: 'POST',
       url: '/increment_page/',
       data: {'name':filename,'count':count,'csrfmiddlewaretoken': '{{ csrf_token }}',},
       dataType: 'jsonp',
       success: function(data) {

        $( "#show" ).html(data.result);

       },
       error: function(xhr, status, error) { 
          var err = eval("(" + xhr.responseText + ")");
          console.log(err.Message);
          //alert(err.Message);  //you can use either of these to  display error
       }
      });

     });
    });
</code></pre>

<p>Sorry for asking you to comment any error. I cannot post comments to the questions yet so I have to include it within my answer.</p>

javascript jquery python html django