Breaking News: Grepper is joining You.com. Read the official announcement!

send data in modal or popup with ajax

Zabir Emu answered on November 30, 2022 Popularity 6/10 Helpfulness 1/10

answer send data in modal or popup with ajax

send data in modal or popup with ajax

Comment

// send data in modal or popup with ajax 
// first pass id in button (pop up button ) and pass this id in this onclick method
<a aria-label="Quick view" class="action-btn" data-bs-toggle="modal"
   data-bs-target="#quickViewModal" id={{ $product->id }}  
   onclick="productView(this.id)"><i class="fi-rs-eye"></i></a>
// html or Laravel template script  part pass this ajax data
<head>
     <meta name="csrf-token" content="{{ csrf_token() }}" />
<head>     
<script>     
     $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
function productView(id)
    {
         $.ajax({
            url: '/modal/prouduct/' + id,
            dataType: 'json',
            type: "get",
            success: function(data) {
                console.log(data)
                $('#pname').text(data.product.product_name);

                $('#vendor').text(data.product.vendor.name);
                $('#brand').text(data.product.brand.brand_name);
                $('#pcat').text(data.product.category.category_name);
                $('#ptag').text(data.product.product_tag);
                $('#pprice').text(data.product.selling_price);
                $('#pimage').attr('src', data.product.product_thumbail);

                if (data.product.discount_price == null) {
                    $('#pprice').text(data.product.selling_price);
                } else {
                    var olprice = Number(data.product.selling_price);
                    var disPrice = Number(data.product.discount_price);
                    var sellprice = olprice - disPrice;
                    $('#oldprice').text(data.product.selling_price);
                    $('#pprice').text(sellprice);
                }

                $('select[name="size"]').empty();
                $.each(data.size, function(key, value) {
                    $('select[name="size"]').append('<option value="' + value + '">' + value +
                        '</option>')
                    if (data.size == "") {
                        $('#sizeArray').hide();
                    } else {
                        $('#sizeArray').show();
                    }
                })

                $('select[name="color"]').empty();
                $.each(data.color,function(key,value){
                    $('select[name="color"]').append('<option value="'+value+'">'+value +'</option>')
                    if(data.color == "")
                    {
                        $('#colorArray').hide()
                    }else
                    {
                        $('#colorArray').show()
                    }
                })
            }
        })
    }
</script>

// controller data
 public function modal($id)
    {
        $product = Product::with('category', 'subCategory', 'vendor', 'brand')->findOrFail($id);
        $size = $product->product_size;
        $sizeArray = explode(',', $size);
        $color = $product->product_color;
        $colorArray = explode(',', $color);
        return response()->json(array(
            'product' => $product,
            'size' => $sizeArray,
            'color' => $colorArray,
        ));
    }

// quick view sample select template 
  <div class="attr-detail attr-size mb-30" id="colorArray">
          <strong class="mr-10">Color: </strong>
        <select class="form-control" id="color" name="color">                          
                                    
    </select>
</div>

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: ajax javascript popup send

Link to this answer
Share Copy Link

Contributed on Nov 30 2022

Zabir Emu

0 Answers Avg Quality 2/10

send data in modal or popup with ajax

Contents

More Related Answers

send data in modal or popup with ajax

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.