How to do AJAX?

I want to this line, conert to ajax

window.location.href = '{{ route('product.warranty.save', [$product->id, $warranty->id]) }}';

How do I do it?

@extends('Admin.master')

@section('title', 'مدیریت گارانتی')

@section('content')

    <div id="app" class="container-fluid">
        <div class="row">
            <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
                <span class="me-2"><i class="far fa-calendar-check"></i></span>
                <span>@yield('title')</span>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-3 datePickerApp">
                    <label for="date" class="col-form-label">تاریخ</label>
                    <date-picker type="date" id="date" name="date" value="{{ old('date') }}" v-model="date"></date-picker>
                </div>
            </div>
            <div id="showType">

            </div>
            <div>
                Product ID: <span v-text="product_id"></span>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <button type="submit" class="btn btn-success">ذخیره</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')

    <script src="{{ asset('themes/vue/vue.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
    <script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
    <script src="{{ asset('themes/js/axios.min.js') }}"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                dates: [],
                products: [],
                warranties: [],
                date: '',
                product_id: {{ $product->id }},
                warranty_id: {{ $warranty->id }},
            },
            watch: {
                date(newDate) {
                    const showType = document.getElementById('showType');
                    showType.textContent = newDate;
                    axios.get('{{ route('product.warranty.save', [$product->id, $warranty->id]) }}', {
                        date: newDate,
                        product_id: this.product_id,
                        warranty_id: this.warranty_id,
                    })
                        .then(response => {
                            console.log('Response:', response.data);
                            window.location.href = '{{ route('product.warranty.save', [$product->id, $warranty->id]) }}';
                        })
                        .catch(error => {
                            console.log('Error:', error);
                        });
                }
            },
            components: {
                DatePicker: VuePersianDatetimePicker
            }
        });
    </script>

@endpush

LaryAI

3 years ago

Level 58

To convert the given line to AJAX, you can use the Axios library to make a GET request to the specified route with the necessary data. Here's an example of how you can modify the existing code to achieve this:

axios.get('{{ route('product.warranty.save', [$product->id, $warranty->id]) }}', {
    date: newDate,
    product_id: this.product_id,
    warranty_id: this.warranty_id,
})
.then(response => {
    console.log('Response:', response.data);
    // handle the response as needed
})
.catch(error => {
    console.log('Error:', error);
    // handle the error as needed
});

This code should be placed inside the watch property of the Vue instance, so that it gets executed whenever the date property changes. You can remove the existing window.location.href line, as it is no longer needed.

Note that you'll need to include the Axios library in your HTML file, either by downloading it and linking to it locally, or by using a CDN. Here's an example of how you can include it using a CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Snapey

3 years ago

Level 122

looks like you are trying to do a window.location to a POST route which will obviously not work

MaverickChan

3 years ago

Level 47

axios.get('{{ route('product.warranty.save', [$product->id, $warranty->id]) }}

get request won't work

change to

axios.post

after catch block, add finally block to excute the redirect

Please or to participate in this conversation.