Asked  7 Months ago    Answers:  5   Viewed   31 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!

 Answers

26

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:

$(function(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

    // load() functions
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

// end  
});

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

You can find the corresponding tutorial HERE

Update

Right now the following event starts the ajax load function:

$("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

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

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(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:

$("#result").html(ajax_load).load(loadUrl);

Which has THIS corresponding demo.

Wednesday, March 31, 2021
 
Hexaholic
answered 7 Months ago
80

dataType - delete this one.

Add console.log and open console in Your browser

success: function (data) {
   console.log( data );

show Your console, and then You will see why. Maybe an unwanted char or php error

Second thing - there should be if stament like this (I supposed)

if (data == "1") // it is returning string, not integer.

You can also try to use switch case in success.

Wednesday, March 31, 2021
 
CodeCaster
answered 7 Months ago
50

Ok Here is a simple use case but less complicated as yours and using vuejs as it should be used. (http://codepen.io/simondavies/pen/MJOQEW)

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: [
    'storeId',
    'isFavorited'
  ],
  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:link,
a:active,
a:visited {
  text-decoration: none;
  text-transform: uppercase;
  color: #444;
  transition: color 800ms;
  font-size: 18px;
}
a:hover,
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="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<div id="app">

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

</div>
Monday, July 5, 2021
 
TecHunter
answered 4 Months ago
37

add target=_blank in your ajax success function like below

success: function(){
  window.open('http://YOUR_URL','_blank' );
},

otherwise you can handle smartly to open your Excel download link in new tab with jQuery trigger function or etc.

Monday, July 19, 2021
 
Jubair
answered 4 Months ago
67

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: http://docs.mathjax.org/en/v1.1-latest/typeset.html

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.

Sunday, August 29, 2021
 
mario
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :