Ajax not​ working[SOLVED]

1

I am using django as backend. This is my attempt at star rating. For some reason the url /rate/ loads and it sends empty strings.

My html:

<form action="{% url 'rating' %}" data-page="{{page.name}}" method="post">
{% csrf_token %}
            <input class="star star-5" id="star-5" data-rate="5" type="radio" data-cat="{{category.category_name}}" data-page="{{page.name}}" value="5"/>
            <label class="star star-5" for="star-5"></label>

            <input class="star star-4" id="star-4" data-rate="4" type="radio" data-cat="{{category.category_name}}" data-page="{{page.name}}" value="4"/>
            <label class="star star-4" for="star-4"></label>

            <input class="star star-3" id="star-3" data-rate="3" type="radio" data-cat="{{category.category_name}}" data-page="{{page.name}}" value="3"/>
            <label class="star star-3" for="star-3"></label>

            <input class="star star-2" id="star-2" data-rate="2" type="radio" data-cat="{{category.category_name}}" data-page="{{page.name}}" value="2"/>
            <label class="star star-2" for="star-2"></label>

            <input class="star star-1" id="star-1" data-rate="1" type="radio" data-cat="{{category.category_name}}" data-page="{{page.name}}" value="1" />
            <label class="star star-1" for="star-1"></label>

          </form>

ajax:


$(document).ready(function(){
  const forms=document.querySelectorAll(`form`);
   
forms.forEach(form=>{form.addEventListener('submit',rating);});
 
  var rate='';
  
 var cat='';
   
var page='';
 
  $(`input[type=radio]`).on('click',function(){

   
  console.log(this);
     
 rate=$(this).val();
  
    cat=$(this).attr("data-cat");
  
    page=$(this).attr("data-page");
 
     console.log(rate)
  
    $(this).closest("form").submit();

   });
  
 function rating(e){
   
   e.preventDefault();
     
 console.log(rate);

 
       $.ajax({
         
 type:'POST',
        
  url:'/rate/',
    
      data:{
      
      category_name:cat,
  
          page:page,
      
      rate:rate,
         
   csrfmiddlewaretoken:$(`input[name=csrfmiddlewaretoken]`).val()
          },
    
      sucess: function(){
            $('.desc').html(data);
          }
        });
     
   
   }
});
2

I don’t know a lot about Django, but success has 2 cs. Could that be it? :sunglasses:

3

Changed that. Still not working.

4

Curious. I also see a lot of smart quotes in your code. Could you confirm that all the above single quotes are ' and not ’ (there’s a subtle but important difference in coding). It might just be the forum parser changing them, but we should be sure these aren’t in your code editor before debugging further. Also, is there a place to see your code live? That would help with debugging too.

5

I typed that part :sweat_smile: it’s not in my text editor…and for live code I would have to deploy the whole project. I have been stuck on this for days.
If it helps:
1.I have put console.log(rate) everywhere, the console doesn’t show me anything.(does it contain an empty string?)
2.The ajax function technically works bcoz it shows a 200 post msg in web console.
3.the url ajax sends the data to shows empty strings when printed.

So overall I think the problem must be in the jQuery/ajax itself. I just can’t find it.

6

Okay… I have no idea if this helps… but here’s something. I wasn’t able to get the rate into your current rating function. I was able to get the rate all the way into your ratings function with the following code buy rewriting how the submit event is attached to the form.

$(document).ready(function(){

  var rate='';
  var cat='';
  var page='';
  
  $('form').submit(function(e){
    console.log('hello');
    e.preventDefault();
    rating();
  })

  $('input[type=radio]').on('click',function(){
    console.log(this);
    rate = $(this).val();
    // cat=$(this).attr("data-cat");
    // page=$(this).attr("data-page");
    console.log(rate);
    console.log($(this).parent());
    $(this).parent().submit();
    
  });
  
  function rating(){
    console.log(rate);

//     $.ajax({
//       type:'POST',
//       url:'/rate/',
//       data:{
//         category_name:cat,
//         page:page,
//         rate:rate,
//         csrfmiddlewaretoken:$(input[name=csrfmiddlewaretoken]).val()
//       },
//       success: function(){
//         $('.desc').html(data);
//       }
//     });
  }
});

I have no way of testing your ajax call without seeing the code live, but I hope this helps.

1 Like
7

Thanks for the effort. its not working really. The problem must be in my django code then.

8

ok this is late but I just solved this!
the problem was in my javascript.
this variable points to my local address i.e http://127.0.0.1:8000/accounts/rate/ and when i used event.target instead of this it worked!
ps : this was not showing up on the console before bcoz of some django jargan(form submission and all that).

1 Like