Viewed   76 times

I have a website where I need to update a status. Like for a flight, you are departing, cruise or landed. I want to be able to refresh the status without having my viewers to have and reload the whole page. I know there is a way to do it with AJAX and jQuery, but I don't have any understanding of how that works. I also don't want them to have and click a button. If anybody knows how that would be done I much appreciate it!



In general, if you don't know how something works, look for an example which you can learn from.

For this problem, consider this DEMO

You can see loading content with AJAX is very easily accomplished with jQuery:

    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    var ajax_load = "<img src='' alt='loading...' />";

    // load() functions
    var loadUrl = "";

// end  

Try to understand how this works and then try replicating it. Good luck.

You can find the corresponding tutorial HERE


Right now the following event starts the ajax load function:


You can also do this periodically: How to fire AJAX request Periodically?

(function worker() {
    url: 'ajax/test.html', 
    success: function(data) {
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);

I made a demo of this implementation for you HERE. In this demo, every 2 seconds (setTimeout(worker, 2000);) the content is updated.

You can also just load the data immediately:


Which has THIS corresponding demo.

Thursday, December 22, 2022

I think you've got almost everything. The callback function you have under success needs an argument which stands for the results from search.php

     success: function(res) {
             $('#result').html("<br><br><br><br><br><br><br><br><br><br><div class='center'><img src='img/loader.gif' /></div>").hide().fadeIn(2500, function() {
                 $('#result').html(res + "<br /><br /> Finished");

res is everything outputted be search.php. Echo, stuff outside of php tags, etc Anything you'd see if you loaded search.php itself.

I don't know if you wanted 'Finished' to still be there. Take it out if you dont.

Tuesday, October 18, 2022

Ok Here is a simple use case but less complicated as yours and using vuejs as it should be used. (

OK let laravel/php code get the store ID as well as if its already been favorited. This way your script is not first checking the store to then decide what to do.

What this does is sends the store-id and the is-favorited through the component like:

 <favorite :store-id="{{$store->id}}" :is-favorited="{{$store->isFavorited}}"></favorite>

Then the Vue component will update the button to display if its already liked (red) or not (grey), and then also handle the click event and update accordingly as well.

As you are using Laravel to tell the component if it's already favorited you can get rid of your checking function and one less http request. Then you only need to then update the store when the user clicks the favourite button.

And as seen in the demo it updates, no need to refresh.

I hope this help you re-write yours so you get waht you want.

PS i have left out the Logged IN check @if (Auth::user()) you have so you can put that back in etc

Vue.component('favorite', {
  template: '<button type="button" @click.prevent="updateFaviteOption" :class="{ 'is-favorited': isFavorited }"><span class="fa fa-heart"></span></button>',
  props: [
  data: function() {
    return {}
  methods: {
    updateFaviteOption: function() {
      this.isFavorited = !this.isFavorited;
      ///-- DO YOU AJAX HERE i use axios
      ///-- so you can updte the store the the this.isFavorited


new Vue({
  el: '#app',
.favorite-wrapper {
  margin: 20px auto;
  padding: 0;
  text-align: center;
  width: 500px;
  height: 100px;
a:visited {
  text-decoration: none;
  text-transform: uppercase;
  color: #444;
  transition: color 800ms;
  font-size: 18px;
a:hover:visited {
  color: purple;
button {
  margin: 10px auto;
  padding: 8px 10px;
  background: transparent;
  width: auto;
  color: white;
  text-transform: uppercase;
  transition: color 800ms;
  border-radius: 4px;
  border: none;
  outline: none;
button:hover {
  cursor: pointer;
  color: #058A29;
.fa {
  color: #d9d9d9;
  font-size: 20px;
  transition: color 400ms, transform 400ms;
  opacity: 1;
.is-favorited .fa {
  opacity: 1;
  color: red;
  transform: scale(1.4);
<script src=""></script>
<link href="" rel="stylesheet" />
<link href="" rel="stylesheet" />
<div id="app">

  <div class="favorite-wrapper">
    <favorite :store-id="3" :is-favorited="true">

Saturday, November 26, 2022

MathJax.Hub.Typeset() is the JavaScript command that can re-render the math content within your page or within individual elements that have been updated by current changes. If you are sure that all typesetting is finished, then you can call it directly, but in general it is good to use the safe way to call it, like this MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

Read more instructions for how to use it here:

For instance, MathJax.Hub.Queue(["Typeset",MathJax.Hub,"previewdiv"]); would re-render the updated contents of the HTML element with an ID of previewdiv after you have updated its contents using your jQuery call.

Thursday, November 17, 2022

i think your problem may be in ajax code since you are using formData object . try append the message variable with it

$('#submit').on('click', function(){

  var fd = new FormData(this);
  fd.append('message ',$('#message').val());

    url:"<?php echo site_url('home/send_chat');?>",    
    data: fd,  
    cache: false,
    contentType: false,
    processData: false,   
    success: function(data){                 
    error: function(xhr, status, error) {
Saturday, November 12, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :