Question posted in
You can find the official documentation here.

Jquery ajax – Update data on the view without page refreashing – Laravel

I want to load data frequently after 60 seconds without page refreshing. The line of code is 

<div id="callmeauto">@include('custome.myquestionodds')</div>

The code in “myquestionodds.blade.php” in where the data is fetching. It is working fine. But I want to call this blade php file frequently and show in “callmeauto” div. I tried some codes from here there. But not working. As example below. I am sure I am in the wrong direction.

   $(document).ready(function() {
        $('#callmeauto').load('/custome/myquestionodds');
      });
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Error:

    app.js:4 GET https://example.com/custome/myquestionodds 500
send           @    app.js:4
ajax           @    app.js:4
loaddata       @    (index):1366
setInterval (async)     
(anonymous)    @    (index):1376
j              @    app.js:2
k              @    app.js:2
setTimeout (async)      
(anonymous)    @    app.js:2
i              @    app.js:2
fireWith       @    app.js:2
fire           @    app.js:2
i              @    app.js:2
fireWith       @    app.js:2
ready          @    app.js:2
S              @    app.js:3

  2. 0

    use setInterval with 60 seconds 

    function loaddata(){

    $.ajax({
        url: "{{ url('custome/myquestionodds') }}",
        type: 'GET',
        success: function(data) {
            $('#callmeauto').html(data);
        }     
    });
}

$(document).ready(function() {
   setInterval(loaddata, 60000);
});
    Login or Signup to reply.
  3. 0

    A better way to use frontend framework to fetch data from endpoint in JSON format.

    For example you can try to use Vue.js framework.
    It in simple case your problem will be solved like that.

    Vue({
    el: '#callmeauto',
    data: {
        contentToRender: "",
    },
    created() {
        this.loadContent();
        setInterval(this.loadContent, 60000)
    },
    methods: {
        loadContent(){
            axios.get('/custome/myquestionodds').then((response)=>{
                this.contentToRender = response.data;
            })
        }
    }
});

    In your template you just use template syntax:

    <div id="callmeauto">{{ contentToRender }}</div>

    To use vue.js you will need to install it. Also axios library for making ajax calls.
    The eases way via CDN:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search