Question posted in
You can find the official documentation here.

my data is not posting to django rest api using ajax – Jquery ajax

somehow my data is not posting to /api/recipe/recipes/ my html

    {% extends 'base.html' %}
    {% block content %}
    <!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Create a Recipe</title>
    </head>
    
    <body class="">
      <form>
        {% csrf_token %}
        <br>
        <label for="T">Title: </label>
        <input type="text" name="T" value="">
        <br>
        <label for="Ingr">Ingredients: </label>
        <select class="" name="Ingr">
          {% for ing in Ing %}
          <option value="ing.pk">{{ing}}</option>
          {%endfor%}
        </select>
        <br>
        <label for="Tag">Tags: </label>
        <select class="" name="Tag">
          {% for tag in Tag %}
          <option value="Tag.pk">{{tag}}</option>
          {%endfor%}
        </select>
        <br>
        <label for="Time">Time: </label>
        <input type="text" name="Time" value="">
        <br>
        <label for="P">Price: </label>
        <input type="text" name="P" value="">
        <br>
        <label for="link">Link: </label>
        <input type="text" name="link" value="">
        <br>
        <input type="submit" name="submit" value="Post">
      </form>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script>
       $('form').on('submit', function(e) {
    e.preventDefault()
      var data = {
        title: $('[name="T"]').val(),
        tags: $('[name="Tag"]').val(),
        ingredients: $('[name="Ingr"]').val(),
        time_minutes: $('[name="Time"]').val(),
        price: $('[name="P"]').val(),
        link: $('[name="link"]').val()
      };

      var headers = {
        'X-CSRFToken': '{{ csrf_token }}'
      }; // Inject our token into the javascript using a template tag
      $.ajax({
        type: 'POST',
        data: data,
        headers: headers, // Set the headers in the request
        url: '/api/recipe/recipes/',
        success: function(res) {
          console.log(res)
        },
      });
  })
      </script>
    </body>
    
    </html>
    {%endblock%}

I am trying to post this form to the rest framework in the URL above the data isn’t even posting in the console if you have any solution please help me thank you in advance

I am getting these errors in the console when I submit

Uncaught TypeError: $.ajax is not a function
    at HTMLFormElement.<anonymous> ((index):101)
    at HTMLFormElement.dispatch (jquery-3.1.1.min.js:3)
    at HTMLFormElement.q.handle (jquery-3.1.1.min.js:3)

those 3 errors are a nightmare for me i treid allot of ways and none of them worked i really would appreciate any help 😀

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally solved it, I had another jquery script in my base.html that's why it wasn't working I deleted it and it works now thanks to everyone for helping me


  2. 0

    I expect it is something to do with how you are referencing the library, emulating your code here works (well, it makes the request anyway). Import multiple versions of the same library is likely to cause trouble, but I’m not sure that it would give the error you have been getting though. In this example, from your code, I’ve stripped out the iterating through django context variables, but these shouldn’t have anything to do with the probelm you have been experiencing.

    $('form').on('submit', function(e) {
  e.preventDefault()
  var data = {
    title: $('[name="T"]').val(),
    time_minutes: $('[name="Time"]').val(),
    price: $('[name="P"]').val(),
    link: $('[name="link"]').val()
  };

  var headers = {
    'X-CSRFToken': '{{ csrf_token }}'
  }; // Inject our token into the javascript using a template tag
  
  $.ajax({
    type: 'POST',
    data: data,
    headers: headers, // Set the headers in the request
    url: '/api/recipe/recipes/',
    success: function(res) {
      console.log(res);
    },
    error: function(res) {
      var errorMessage = res.status + ': ' + res.statusText;
      console.error('Error Posting: ', errorMessage);
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <br>
  
  <label for="T">Title: </label>
  <input type="text" name="T" value="">
  <br>
  
  <label for="Time">Time: </label>
  <input type="text" name="Time" value="">
  <br>

  <label for="P">Price: </label>
  <input type="text" name="P" value="">
  <br>
  
  <label for="link">Link: </label>
  <input type="text" name="link" value="">
  <br>
  
  <input type="submit" name="submit" value="Post">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search