Question 15716 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to pass this array from Laravel Controller via AJAX and create a button base on data

First I choose Color button:

    <form class="form form-variant">
{{ csrf_field() }}
    
                                                    
    <button type="submit" class="btn btn-success checkbox_click" id="colorChange"  style="colors: purple !important"> Color </button> 
    </form>

My javascript

<script type="text/javascript">
      $(document).ready(function(){
        $('#myForm{{$skuItemVariant_colorJs->SkuColorId}}').submit(function(e){
          e.preventDefault();
          $.ajax({
            url: "{{ url('product-detail/getsize') }}",
            type: "POST",
            data: $('.form-variant{{$skuItemVariant_colorJs->SkuColorId}}').serialize(),
            success: function(data){
              //alert("Form submission success!");
            },
            error: function(){
              alert("Form submission failed!");
            }
          });
        });
      });

Then My Json respons:

{Id: 18, SkuItemId: 19, SkuSizeId: 17, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000018",…},…]
0
: 
{Id: 18, SkuItemId: 19, SkuSizeId: 17, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000018",…}
1
: 
{Id: 20, SkuItemId: 19, SkuSizeId: 18, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000020",…}

I would like to pass it via Ajax and create a new button base on data availabe of Size SkuItemId. I have this JS Code :

so, if I choose Color then appear Size of data

image sample

Tags:

2

Answers


  1. 0

    step 1. Write this code to your main layout in head tags

    `<meta name="csrf-token" content="{{ csrf_token() }}">`

    step 2. use @csrf in your form

    step 3. Write this between your ajax codes

    `headers: {
   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
url: "{{ url('product-detail/getsize') }}",
type: "POST",
`
    Login or Signup to reply.
  2. 0

    you can loop through the array using JavaScript and generate a button for each unique SkuItemId value.

    <script type="text/javascript">

    $(document).ready(function(){
    var skuItems = {!! json_encode($yourArray) !!}; // assuming $yourArray contains the array you provided

    // loop through the array to find unique SkuItemId values
var skuItemIds = [];
for (var i = 0; i < skuItems.length; i++) {
  var skuItemId = skuItems[i].SkuItemId;
  if (skuItemIds.indexOf(skuItemId) === -1) {
    skuItemIds.push(skuItemId);
  }
}

// generate a button for each unique SkuItemId value
for (var j = 0; j < skuItemIds.length; j++) {
  var skuItemId = skuItemIds[j];
  var buttonHtml = '<button type="button" class="btn btn-success" style="colors: purple !important">' + skuItemId + '</button>';
  $('#button-container').append(buttonHtml); // assuming there is a container element with id="button-container"
}

// handle form submission for each button
$('.btn-success').click(function() {
  var skuItemId = $(this).text();
  var skuItemVariant = skuItems.find(function(item) {
    return item.SkuItemId === skuItemId;
  });
  if (skuItemVariant) {
    // submit the form using Ajax
    var form = $('.form-variant' + skuItemVariant.SkuColorId);
    $.ajax({
      url: "{{ url('product-detail/getsize') }}",
      type: "POST",
      data: form.serialize(),
      success: function(data){
        //alert("Form submission success!");
      },
      error: function(){
        alert("Form submission failed!");
      }
    });
  }
});

    });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search