Advertisement
amr_aly

cloning_div

Feb 2nd, 2023 (edited)
1,118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.08 KB | Source Code | 0 0
  1. <div class="wrapper">
  2.     <!-- INPUTS -->
  3.     <div class="row purchase-row">
  4.  
  5.         <div class="col-lg-4">
  6.             <div class="form-group">
  7.                
  8.                 <div class="input-group">
  9.                     <div class="input-group-prepend">
  10.                         <span class="input-group-text">
  11.                             <i class="fas fa-dolly"></i>
  12.                         </span>
  13.                     </div>
  14.                    
  15.                     <select class="form-control product select2 js-programmatic-init" name="pro-product" id="id_pro-product">
  16.                         <option value="0" selected disabled>--- Product Name ---</option>
  17.                         {% for obj in products %}
  18.                             <option value="{{obj.id}}">{{obj.name}}</option>
  19.                         {% endfor %}
  20.                     </select>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.  
  25.         <div class="col-lg-1">
  26.             <div class="form-group ">
  27.                 <div class="input-group">
  28.                     <select class="form-control unit" name="pro-unit" id="id_pro-unit">
  29.                         <option disabled selected>---Unit---</option>
  30.                     </select>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.  
  35.         <div class="col-lg-1">
  36.             <div class="form-group ">
  37.                 <div class="input-group">
  38.                     {% render_field pro_form.quantity class="form-control quantity" %}
  39.                 </div>
  40.  
  41.             </div>
  42.         </div>
  43.  
  44.         <div class="col-lg-1">
  45.             <div class="form-group ">
  46.                 <div class="input-group">
  47.                     {% render_field pro_form.last_price class="form-control last-price" %}
  48.                 </div>
  49.  
  50.             </div>
  51.         </div>
  52.  
  53.         <div class="col-lg-1">
  54.             <div class="form-group ">
  55.                 <div class="input-group">
  56.                     {% render_field pro_form.purchasing_price class="form-control purchasing-price" %}
  57.                 </div>
  58.             </div>
  59.         </div>
  60.  
  61.         <div class="col-lg-1">
  62.             <div class="form-group ">
  63.                 <div class="input-group">
  64.                     {% render_field pro_form.total class="form-control total" %}
  65.                 </div>
  66.             </div>
  67.         </div>
  68.        
  69.         <!-- BUTTONS -->
  70.         <div class="col-lg-1">
  71.             <div class="control ">
  72.                 <button
  73.                     type="button"
  74.                     id="clone_vendor"
  75.                     class="btn btn-outline-danger purchase-minus remove_item btn-block"
  76.                     style="margin-bottom: 20px;"
  77.                 >
  78.                     <span class="fas fa-times"></span>
  79.                 </button>
  80.             </div>
  81.         </div>
  82.  
  83.         <div class="col-lg-1">
  84.             <div class="control ">
  85.                 <button
  86.                     type="button"
  87.                     id=""
  88.                     class="btn btn-outline-secondary purchase-broom btn-block"
  89.                     style="margin-bottom: 20px;"
  90.                 >
  91.                     <span class="fas fa-broom"></span>
  92.                 </button>
  93.             </div>
  94.         </div>
  95.  
  96.         <div class="col-lg-1">
  97.             <div class="control ">
  98.                 <button
  99.                     type="button"
  100.                     id=""
  101.                     class="btn btn-outline-info purchase-eye btn-block"
  102.                     style="margin-bottom: 20px;"
  103.                 >
  104.                     <span class="fas fa-eye"></span>
  105.                 </button>
  106.             </div>
  107.         </div>
  108.  
  109.     </div>
  110.     <!-- ./ROW -->
  111.  
  112.     <div class="row">
  113.  
  114.         <div class="col-lg-4">
  115.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Product </label>
  116.         </div>
  117.    
  118.         <div class="col-lg-1">
  119.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Unit </label>
  120.         </div>
  121.    
  122.         <div class="col-lg-1">
  123.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Quantity </label>
  124.         </div>
  125.    
  126.         <div class="col-lg-1">
  127.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Last Pr </label>
  128.         </div>
  129.        
  130.         <div class="col-lg-1">
  131.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Price </label>
  132.         </div>
  133.    
  134.         <div class="col-lg-1">
  135.             <label class="btn bg-gradient-lightblue btn-block btn-sm">Total</label>
  136.         </div>
  137.    
  138.         <div class="col-lg-3">
  139.             <label class="btn bg-gradient-lightblue btn-block btn-sm">
  140.                 Tools
  141.             </label>
  142.         </div>
  143.    
  144.     </div>
  145.     <br>
  146.  
  147.     <button
  148.         type="button"
  149.         id="clone_purchase_product"
  150.         class="btn btn-outline-primary purchase-plus add_item"
  151.         style="margin-bottom: 20px;">
  152.         <span class="fas fa-caret-down"></span>
  153.     </button>
  154.     <!-- ADDING BUTTON -->
  155.     <!-- <div class="row add-row">
  156.         <div class="col-sm-1">
  157.             <div class="control ">
  158.                 <button
  159.                     type="button"
  160.                     id="clone_purchase_product"
  161.                     class="btn btn-outline-primary purchase-plus add_item"
  162.                     style="margin-bottom: 20px;"
  163.                 >
  164.                     <span class="fas fa-caret-down"></span>
  165.                 </button>
  166.             </div>
  167.         </div>
  168.     </div> -->
  169.  
  170. </div>
  171.  
  172. ### js.html file
  173.  
  174. <script>
  175.     $(document).ready(function() {
  176.  
  177.         var purchase = $('.purchase-row').last().clone();
  178.         let purchaseCount = 0;
  179.        
  180.         $(document).on('click', '.add_item', function() {
  181.             // $(".select2").select2();
  182.             var clone = purchase.clone(); //.prop('id', 'product_' + purchaseCount);
  183.             // var clone = purchase.clone().prop('class', 'product_' + purchaseCount);
  184.             console.log('clone: ', clone);
  185.             $(this).prevAll('.purchase-row').first().after(clone.hide());
  186.             clone.slideDown('fast');
  187.            
  188.             // $('#product_'+ purchaseCount).find('#id_pro-product').removeClass('product').addClass('newProduct');
  189.             // $('#product_'+  purchaseCount).find('#id_pro-unit').removeClass('unit').addClass('newUnit');
  190.             $('.purchase-row').find('#id_pro-product').removeClass('product').addClass('newProduct');
  191.             $('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('newUnit');
  192.  
  193.             $('.purchase-row').find('#id_pro-product').addClass('product_'+ purchaseCount);
  194.             $('.purchase-row').find('#id_pro-unit').addClass('unit_'+ purchaseCount);
  195.             // Bind an event
  196.             // $('.newProduct').on('select2:select', function (e) {
  197.             //     console.log('select event');
  198.             // });
  199.             // The next code for reinitialize select2
  200.             // var $example = $(".js-programmatic-init").select2();
  201.             var $example = $(".newProduct").select2();
  202.             $example.select2();
  203.  
  204.             // ($(".newProduct").select2().select2());
  205.             // $(".js-programmatic-init").select2();
  206.             // $('.purchase-row').find('.product').addClass('newProduct');
  207.             // $('.purchase-row').find('.unit').addClass('newUnit');
  208.             purchaseCount++;
  209.             console.log('PURCHASE-COUNT: ', purchaseCount);// $(this).parent().slideUp('fast');
  210.            
  211.         });
  212.  
  213.         $(document).on('click', '.purchase-minus', function() {
  214.             if (purchaseCount == 0) {
  215.                 // Do nothing.
  216.                 alert('You can not delete this row' );
  217.             } else {
  218.                 $(this).closest('.purchase-row').remove();
  219.                 purchaseCount--;
  220.                 console.log('PURCHASE-COUNT2: ', purchaseCount);// $(this).parent().slideUp('fast');2
  221.  
  222.             }
  223.         });
  224.  
  225.         $(document).on('click', '.purchase-broom', function() {
  226.             // $(this).closest('.purchase-row').find('select').val(0);
  227.             $(this).closest('.newProduct').select2('destroy');
  228.             $(this).closest('.purchase-row').find('select')[0].selectedIndex=0;
  229.             // $(this).closest('.purchase-row').find('input').val('');
  230.  
  231.         });
  232.  
  233.  
  234.         $(document).on('change', '.product', function(e){
  235.             var product_id = $(this).val();
  236.             console.log('SUCCESS-CHANGE-PRODUCT: ', product_id);
  237.             $.ajax({
  238.                 type: 'POST',
  239.                 url: '{% url "purchases:get_product_unit" %}',
  240.                 // dataType: 'json',
  241.                 // async: true,
  242.                 // cache: false,
  243.                 data: {
  244.                     'pro-product': $('.purchase-row select').closest('.product').val(), // this is right
  245.                     // find('#id_pro-product')
  246.                 },
  247.                 success: function (data) {
  248.                     console.log(
  249.                         'FROM SUCCESS: ', data['unit'],
  250.                     );
  251.                     var values_3 = data['unit'];
  252.                     // $('#id_pro-unit').text('');
  253.                     // $('select').closest('.unit').find('select').text('');
  254.                     $('select').closest('.unit').text('');
  255.                     if (values_3.length > 0) {
  256.                        
  257.                         for (var i = 0; i < values_3.length; i++) {
  258.                             // $('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
  259.                             $('select').closest('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
  260.                         }
  261.                     }
  262.        
  263.                 },
  264.                 error: function (){
  265.                     console.log('ERROR with ajax request in Adding Purchase !!!');
  266.                 },
  267.             });
  268.             e.preventDefault();
  269.         });
  270.  
  271.         $(document).on('change', '.newProduct', function(e){
  272.             var product_id = $(this).val();
  273.             var $this = $(this);
  274.             // $('select').find('#id_pro-product').addClass('product_'+ product_id + '_' + purchaseCount);
  275.             // $('select').find('#id_pro-unit').addClass('unit_'+ product_id + '_' + purchaseCount);
  276.             console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', product_id);
  277.             $.ajax({
  278.                 type: 'POST',
  279.                 url: '{% url "purchases:get_new_row_unit" %}',
  280.                 // dataType: 'json',
  281.                 // async: true,
  282.                 // cache: false,
  283.                 data: {
  284.                     'pro-product': product_id,
  285.                     // $('#product_'+purchaseCount).closest('.newProduct select').val(),
  286.                     // find('#id_pro-product')
  287.                 },
  288.                 success: function (data) {
  289.                     console.log(
  290.                         'FROM SUCCESS-NEW-CLASS: ', data['unit'],
  291.                         'PRODUCT-FROM-NEW-CLASS: ', data['product'],
  292.                     );
  293.                     var values_3 = data['unit'];
  294.                     // $('#id_pro-unit').text('');
  295.                     $('select').closest('.unit_'+purchaseCount).text('');
  296.                     if (values_3.length > 0) {
  297.                        
  298.                         for (var i = 0; i < values_3.length; i++) {
  299.                             $('.purchase-row select').closest('.unit_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
  300.                             // $('.newUnit select').closest('#product_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
  301.                             // $('select').closest('#product_'+ purchaseCount).find('.newUnit').append('<option>' + values_3[i] + '</option>');
  302.                             // $('.newUnit select').closest('.unit_'+purchaseCount).append('<option>' + values_3[i] + '</option>');
  303.                         }
  304.                     }
  305.        
  306.                 },
  307.                 error: function (){
  308.                     console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
  309.                 },
  310.             });
  311.             e.preventDefault();
  312.         });
  313.  
  314.  
  315.     });
  316.  
  317. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement