Im trying to update dynamic values to the marquee by using ajax time to time.
Im using following plugin for this
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Although the data is actually getting updated it does not get updated into the marquee while scrolling. If I refresh the browser it gets the updated value, that means the ajax update is working fine. What am I doing wrong here?, I need to get the update without stopping the ongoing scrolling of data and without refreshing the browser.
$(document).ready(function() {
$(".scroll").marquee();
var i = setInterval(function (){
$.ajax({
type : "GET",
url : 'http://Data.xhtml',
dataType : "json",
success: function(data) {
var values = '';
$.each(data, function(i, item) {
values += '<span class=\'up\'>
<span class=\'quote\'>'+data[i].Data+'</span></span>';
$(".scroll").marquee(values);
});
},
return false;
}, 4000);
});
});
<div class="scroll">
<span class="up">
<span class="quote">default value</span>
</span>
</div>
$(document).ready(function(){
$(".scroll").marquee();
var refreshId = setInterval(function()
{
$.ajax({
type : "GET",
url : 'http://Data.xhtml',
dataType : "json",
success: function(data) {
data=eval(data);
$.each(data.Data, function(i) {
$(".quote").append('<span class=\'up\'><span class=\'quote\'>'+data.Data[i]+'</span> </span>');
});
}
});
}, 3000);
});
<div class="scroll">
<span class="up">
<span class="quote">default value</span>
</span>
Related
I have a small jquery script that should modifiy text passing through flask.
I use ajax to do so.
<i class="fas fa-heart likesspot" name = "{{spot.titre}}" style="color:#e86c60" ></i> <span id = "{{spot.titre}}_l">{{spot.likes}}</span>
$(document).ready(function(){
$('.likesspot').click(function(){
console.log($(this).attr("name"))
var name = $(this).attr("name");
var fct = '/addlikesspot/'+name;
console.log(fct)
$.ajax({ type: 'POST', url: fct,
success: function(data) {
console.log(data.matching_results);
console.log(name);
$("#"+name+"_l").html("<b>"+data.matching_results[1].toString()+"</b>" );
},
});
});
});
note that each time I click the console log returns
console.log(data.matching_results);
console.log(name);
with the good values
note also that the span is in a carroussel and it seems that the first carousel page always works whereas other page works randomly
I want to show/hide the boostrap spinner in div #loading before and after loading more data in the ajax infinite scroll shown below. The ajax loads data perfectly well but the spinner does not show when scrolled to the point to trigger ajax. Pls help. Helping with some code example will be great.
<div class="p-3 text-center" id="loading" style="display: none" >
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">Loading more items...</span>
</button>
</div>
<script type="text/javascript">
let in_ajax = false;
var flag = 20;
$(window).scroll(function() { //scroll function
if (!in_ajax) {
if ($(window).scrollTop() >= $('#result').height() - $(window).height()) {
in_ajax = true;
$.ajax({
type: 'POST',
url: 'get_results.php', //get result page
data: {
'offset': flag,
'limit': 10
},
beforeSend: function() {
$("#loading").show(); //to show spinner before ajax sends data
},
success: function(data) {
$('#result').append(data);
flag += 10; //add 10 to last offset value after callback
in_ajax = false;
},
complete: function() {
$("#loading").hide(); //to hide spinner after ajax call
}
}); //close ajax
}
}
});
</script>
I want to add data that's stored in XML Files to the HTML View with handlebars.js but,
Instead of make a GET of 1 url ex:http://json.org/example.html i will want to add multiple XML Files. I will aprreciate any help on this
Thanks in advance!
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/pets-data.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
createHTML(data);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
Handlebars.registerHelper("calculateAge", function(birthYear) {
var age = new Date().getFullYear() - birthYear;
if (age > 0) {
return age + " years old";
} else {
return "Less than a year old";
}
});
function createHTML(petsData) {
var rawTemplate = document.getElementById("petsTemplate").innerHTML;
var compiledTemplate = Handlebars.compile(rawTemplate);
var ourGeneratedHTML = compiledTemplate(petsData);
var petsContainer = document.getElementById("pets-container");
petsContainer.innerHTML = ourGeneratedHTML;
}
<div class="page-wrap">
<h1>Handlebars js</h1>
<div id="pets-container"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="petsTemplate" type="text/x-handlebars-template">
{{#each pets}}
<div class="pet">
<div class="photo-column">
<img src="{{photo}}">
</div>
<div class="info-column">
<h2>{{name}} <span class="species">({{species}})</span></h2>
<p>Age: {{calculateAge birthYear}}</p>
{{#if favFoods}}
<h4 class="headline-bar">Favorite Foods</h4>
<ul class="favorite-foods">
{{#each favFoods}}
<li>{{{this}}}</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
{{/each}}
</script>
What you need is a single callback that gets executed only when all the data you need from your various requests has been fetched. To achieve this you will need some sort of synchronization between the various AJAX calls you're doing.
Promise pattern, the Q library, which is one of the several implementations of the pattern. They have done most of the hard work of synchronizing multiple AJAX requests for us.
I will post an example here:
function xmlPromise(name) {
return Q.promise(function (resolve, reject, notify) {
$.ajax({
type: "GET",
dataType: "xml",
async: true,
url: name,
contentType: "text/xml; charset=UTF-8"
})
.done(function (data) {
resolve(data);
}).fail(function () {
reject();
});
});
};
//your xml files can be stored in the promises variable
var promises = [ xmlPromise('your-xml-file-1.xml'), xmlPromise('your-xml-file-2.xml') ];
var results = [];
Q.allSettled(promises).then(function(responses) {
results.push(responses[0].value);
results.push(responses[1].value);
});
Hope it help
I have an ajax script that returns the temperature of a probe. I would like to add deg C tot he result but do not know how to do this. Can some one help. My script is below
<script>
setInterval(function(){
$.ajax({
url:"data.php",
dataType:"json",
success: function(data){;
$('#niamh').html(data.Gniamh);
}
});
}, 1000);
</script>
This return the temp as a value and places it in the Div tags but I would like deg added to it. I have tried putting °C with in the Div tags but this gets written over.
you can either add it to the return function:
<script>
setInterval(function(){
$.ajax({
url:"data.php",
dataType:"json",
success: function(data){;
$('#niamh').html(data.Gniamh + "°C");
}
});
}, 1000);
or wrap the result div with a parent:
<div><div id="niamh"></div>°C</div>
I'm using ons-carousel to show some images fetched from network using ajax. But the problem is, It's not showing images. but the images and carousel-items are present in the html when I see it in chrome developer tools.
And I can see the ons-carousel-item visibility is hidden in css. When I make a static ons-carousel which is not loading images from ajax but in the same manner using ng-repeat, the carousel is working fine. Here is my code.
HTML
<ons-page controller="hotelDetails">
<div ng-init="getHotel()">
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" noslidingmenu>
<ons-carousel-item style="background-color: gray;" ng-repeat="thumb in images" style="visibility: visible">
<img src="{{thumb}}" style="width: 100%"/>
</ons-carousel-item>
<ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
</ons-carousel>
</div>
</ons-page>
AngularJS
module.controller('hotelDetails', function($scope){
var page = $scope.ons.navigator.getCurrentPage();
$scope.id = page.options.id;
$scope.title = page.options.title;
$scope.getHotel = function(){
console.log('Loading data');
$.ajax({
url: "http://domain.com/api/hotels/hoteldetails",
dataType: "jsonp",
data: {
id: $scope.id
},
success: function(data){
console.log('Success');
$scope.$apply(function(){
$scope.images = data.images;
});
},
error: function(error){
console.log(error);
}
});
}
});
here is a screenshot of running app.