1

I want to pass all datas stored in the table in my template. The table is growing by user's choices. My project is about a food ordering system and what i'm trying to do is, when user adds menus to its basket, and make an order, how can i pass the values to my view to save them to my db. I know about forms but my table is not static.. I can't imagine how it will be big.

My add row func:

    $(document).ready(function(){
      var sum = 0;
      $(document).on('click', '.myaddButton', function() {

        var $foodname = $(this).closest("tr")   // Finds the closest row <tr>
        .find(".nr")     // Gets a descendent with class="nr"
        .text();
        var $foodprice = $(this).closest("tr")   // Finds the closest row <tr>
        .find(".rn")     // Gets a descendent with class="nr"
        .text();
        $('#carttable').prepend("<tr class='danger' id ='myTableRow'><td>"+$foodname+"</td><td class='price'>"+$foodprice+"</td> <td> <button class='deletebutton btn btn-danger' type='button'>   <span class='glyphicon glyphicon-trash'></span> </button> </td></tr>");

      });
      $(document).on('click', '.deletebutton', function() {
        $('#myTableRow').remove();
        //$('.price').each(function() {
        //  var $price = $(this);
        //console.log($price);
        //sum += parseInt($price.context.innerHTML);

        //});

        //$('#total').html(sum);
        //sum = 0;
      });
    });
    </script>

My Table

<table  border="1" class="table" id="menutable" name="menutable">
      <tr class="danger">
        <tbody>
          {%for a in list%}
           <tr class= {% DoRandom %}>
            <td><b> {{a.name}}</b> </td>
            <td class="nr">{{a.description}}</td>
            <td class="rn"><p>{{a.price}}</p></td>
            <td id="addbutton" > <button class="myaddButton btn btn-success" type="button">
           <span class="glyphicon glyphicon-plus"></span> </button> </td>
          </tr>
          {%endfor%}
        </tbody>
      </table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Alican Yilmaz
  • 57
  • 1
  • 10

2 Answers2

0

If you want to use little bit higher technique of form processing, then you should look at question Making a Django form class with a dynamic number of fields...

Second "simple" solution is to add hidden input values (which will contain food_id and quantity) together with name and price (during prepend), and wrap your table in form. E.g

var $food_id = ... // some how get food id
var $quantity = 1; //1 for now, but you can add increase and decrease functionality
...
// in prepend text
... + "<input type='hidden' name='food-" + $food_id + "' value='" + $quantity + "' >" + ...

And in your template you should add <form> before <table> (and </form> after </table> tags), or use serialize if you are using ajax.

Third solution is to use JS object as cart, and encode it to Json before form submittion. E.g.

   //in your javascript global scope
   var js_food_cart = {};
   ....
   // then on click
   $food_id = ... ;// yes, again you need food id
   $quantity = 1; // or something elese
   js_food_cart[$food_id] = $quantity;
   ....
   // then somwhere in before submit, code assumes that you have form with my_cart hidden input
   $('input[name=my_cart]') = JSON.stringify(js_food_cart);

Then in view you should parse your json value of my_cart input. In template you should add form with hidden field to pass cart value.

This approach more convenient if you will implement ability to increase/decrease quantity of food.

Community
  • 1
  • 1
1844144
  • 657
  • 4
  • 11
0

Thanks, i resolved the issue by casting my food objects to json and post by AJAX post.

Alican Yilmaz
  • 57
  • 1
  • 10