I have a webpage that I load my data from XML files to DIVs.
In this Example I have DIV with this attribute: class="Group";
Also this is my JS code:
$(document).ready(function () {
$.get(Root + "/Feed_Products/Groups", {}, function (xml) {
var output = '';
$('item', xml).each(function (i) {
var Name = $(this).find("Name").text();
var Id = $(this).find("Id").text();
var Link = Root + '/Group' + Id;
output += '' + Name + '';
});
$(".Group").append(output);
});
});
As you know, loading XML has delay and its not as fast as direct database request.
How can I show small loading GIF on each DIV that is loading XML?
Image: http://i.stack.imgur.com/BPWcg.png
$(document).ready(function () {
$(".Group").addClass("loading");
$.get(Root + "/Feed_Products/Groups", {}, function (xml) {
var output = '';
$('item', xml).each(function (i) {
var Name = $(this).find("Name").text();
var Id = $(this).find("Id").text();
var Link = Root + '/Group' + Id;
output += '' + Name + '';
});
$(".Group").append(output).removeClass("loading");
});
});
Then in your css define :
.Group.loading{
background-image: url("yourGIF.gif");
/* other rules */
}
Related
On this page, that I uploaded through https://mappingforyou.eu/fusion/ , Owl Carousel calls on Flickr to provide some photos according to a list of National Parks, in the variable "cached", and the caption is the National park name
I would like to remove any reference to these parks and instead, add each item of photos2, with the jpg in "photo" and the caption in "caption", in that carousel which seems to bein the buildhtml function, but it has a parkname value and i have several values to provide.
So far, I'm very unsuccessful. I have trouble too, understanding some things in this code.
If the provided info isn't enough, or well written, please ask some additional info and I'd be glad to edit my question, with your help.
var photos;
var gallery_items;
function callFlickr(f, parkName) {
var bbox = turf.extent(f.geometry).join(",");
var tags = parkName.split(" ");
tags.push("park");
tags.push("national");
tags = tags.join(",");
$.ajax({
url : flickr_config.url,
//jsonp : "jsonFlickrApi",
dataType : 'json',
data : {
api_key : flickr_config.key,
tags : tags,
bbox : bbox,
format : 'json',
method : 'flickr.photos.search',
per_page : flickr_config.maxNumImages,
nojsoncallback : 1
}
}).done(function (resp) {
queue_length += 1;
if(resp.stat !== "ok") {
if(queue_length == current_req_length) {
buildHtml(parkName)
}
return;
}
photos = [];
$.each(resp.photos.photo, function (i, v) {
photos.push("https://farm" + v.farm + ".staticflickr.com/" + v.server + "/" + v.id + "_" + v.secret + "_n.jpg");
});
// add to cache
cached[parkName] = photos;
current_gallery[parkName] = photos;
if(queue_length == current_req_length) {
buildHtml(parkName);
}
});
}
// builds html for carousel
function buildHtml() {
// var gallery_items;
var gallery_container = $("<div />", {
id : 'owl-slider',
class : 'own-carousel'
});
var list = [];
$.each(current_gallery, function (park, photos) {
list.push("<a class='park-item' href='' target='_blank'>" + park + "</a>");
$.each(photos, function (idx, photo) {
var div = $("<div />", {
class : 'thumbnail'
});
div.on('mouseover', function (e) {
highlightPark(park);
});
div.on('mouseout', function (e) {
$.each(np_geo.getLayers(), function (i, l) {
l.setStyle(style());
});
});
var title = $("<span />", {
html : "<h2><span class='glyphicon glyphicon-globe inverse'></span> " + park + " National Park</h2>",
class : 'parkname-title'
});
var fullPhoto = photo.replace("n.jpg", "b.jpg");
var link = $("<a />", {
"data-lightbox" : "image-" + idx,
"data-title" : park + " (courtesy of Flickr)",
href : fullPhoto
});
var img = $("<img />", {
src : photo
});
link.append(img);
div.append(link);
div.append(title);
gallery_container.append(div);
});
});
list = list.join(' | ');
$("#parkslist").html(list);
$(".park-item").on('click', function (e) {
e.preventDefault();
highlightPark(e.target.text);
})
$("#slider").empty();
$("#slider").append(gallery_container);
$("#owl-slider").owlCarousel({
margin : 10,
autoWidth : true,
stagePadding : 50
});
}
How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?
Below is the function for the download button.
// Function to generate the Download button
VideoPlayer.prototype.initDownload = function () {
var downloadBtn = $("button.download"),
downloadToolTipCls = "download_tooltip",
sources = {},
downloadToopTip,
sourcesLength = 0,
sourcesKeys;
// Add each source
if (typeof (firstSrc = this.$video.attr("src")) !== "undefined") {
sources[firstSrc] = this.$video.attr("type");
}
this.$video.find("source").each(function () {
var $this = $(this);
sources[$this.attr("src")] = $this.attr("type");
});
sourcesKeys = Object.keys(sources);
sourcesLength = sourcesKeys.length;
if (sourcesLength === 1) {
downloadBtn.wrap("<a href=\"" + sourcesKeys[0] + "\" download />");
} else if (sourcesLength > 1) {
downloadBtn.after("<span class=\"" + downloadToolTipCls + "\" />");
downloadToopTip = $("." + downloadToolTipCls);
$.each(sources, function (source, type) {
downloadToopTip.append("<a href=\"" + source + "\" download> Type " + type + "</a>");
});
downloadBtn.click(function () {
downloadToopTip.toggle();
});
}
};
Put the name that you want for your file in download attribute download=name
I am working on a website and I am looking to make the recipes pages dynamic. I created a JSON test database, created a JS file that retrieves values from the JSON file and displays them in appropriate divs on the page.
What i want to do is be able to choose the respectful JSON for each recipe and display it on the same page when a user clicks a link in the sidebar without having to create a ton of blank HTML pages with the same divs.
Below is my code. Hoping someone can help guide me thanks!
(function() {
'use strict';
var url = 'my json url';
$.getJSON(url, function(json) {
//store json data into variable
var data = (json);
//store data in empty string
var title = '';
var image = '';
var directions = '';
var prep = '';
var cook = '';
var serve = '';
//retrieve values from dataArray
$.each(data[0], function (i, item) {
title += '<h1>' + item.recipeName + '</h1>';
image += '<img src="' + item.imageURL + '">';
directions += '<p>' + item.directions + '</p>';
prep += '<strong>' + item.prepTime + '</strong>';
cook += '<strong>' + item.cookTime + '</strong>';
serve += '<strong>' + item.servInfo + '</strong>';
});
//append results to div
$('#recipeTitle').html(title);
$('#recipeImage').html(image);
$('#recipeDirections').html(directions);
$('#recipePrep').html(prep);
$('#recipeCook').html(cook);
$('#recipeServes').html(serve);
var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients');
$.each(data[0][0].ingredients, function(i, item) {
ul.append($(document.createElement('li')).text(item));
});
});
})();
new code`(function() {
function callback(json){
//store json data into variable
var data = (json);
//store data in empty string
var title = '';
var image = '';
var directions = '';
var prep = '';
var cook = '';
var serve = '';
//retrieve values from dataArray
$.each(data[0], function (i, item) {
title += '<h1>' + item.recipeName + '</h1>';
image += '<img src="' + item.imageURL + '">';
directions += '<p>' + item.directions + '</p>';
prep += '<strong>' + item.prepTime + '</strong>';
cook += '<strong>' + item.cookTime + '</strong>';
serve += '<strong>' + item.servInfo + '</strong>';
});
//append results to div
$('#recipeTitle').html(title);
$('#recipeImage').html(image);
$('#recipeDirections').html(directions);
$('#recipePrep').html(prep);
$('#recipeCook').html(cook);
$('#recipeServes').html(serve);
var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients');
$.each(data[0][0].ingredients, function(i, item) {
ul.append($(document.createElement('li')).text(item));
});
}
$('#pasta').click(function(){
$('#recipeIngredients').empty();
//get the url from click coresponding to the item
$.getJSON(url,callback);
});
//intially load the recipies with the URL
var url = '';
$.getJSON(url,callback);
})();`
to achieve code reusability , try calling the $.getJSON() with a reusable function (callback) on click of the link in the sidebar
(function() {
function callback(json){
//store json data into variable
var data = (json);
//store data in empty string
var title = '';
var image = '';
var directions = '';
var prep = '';
var cook = '';
var serve = '';
.... //rest of the code
...
$.each(data[0][0].ingredients, function(i, item) {
ul.append($(document.createElement('li')).text(item));
});
}
$('.sidebarLink').click(function(){
$('#recipeIngredients').empty()
//get the url from click coresponding to the item
$.getJSON(url,callback);
});
//intially load the recipies with the URL
var url = 'my json url';
$.getJSON(url,callback);
})();
Buildgames returns rows:
<a>....</a>
<a>....</a>
When I click on each a the Buildcar_s function returns all the data inside an alert.
Instead of this alert I want to put all the results in a div under each a, so it would look like:
<a>.....clicked ...</a>
<div>....
...
</div>
<a>....not clicked...</a>
<a>....not clicked...</a>
<a>....not clicked...</a>
How can we put a div only under the a which was clicked?
function Buildcar_s(items) {
var div = $('<div/>');
$.each(items, function() {
var car_ = this.car_;
$('<a>' + this.car_ + '----' + this.Names + '---' + '</a>').click(function() {
_Services.invoke({
method: 'GetgamesRows',
data: {
car_Number: car_
},
success: function(car_s) {
var div = Buildgames(car_s);
$(div).insertAfter($a);
}
});
}).appendTo(div);
$('<br/>').appendTo(div);
});
$("#leftRows").append(div);
}
function Buildgames(items) {
var place = '<div>';
$.each(items, function() {
place += 'mmmmmm<br/>';
});
place += '</div>';
return place;
}
Try this, relevant changes have been commented:
function Buildcar_s(items) {
var div = $('<div/>');
$.each(items, function() {
var car_ = this.car_;
$('<a>' + this.car_ + '----' + this.Names + '---' + '</a>').click(function() {
var $a = this;
_Services.invoke({
method: 'GetgamesRows',
data: {
car_Number: car_
},
success: function(car_s) {
var div = Buildgames(car_s);
// this inserts the HTML generated from the function,
// under the A element which was clicked on.
$(div).insertAfter($a);
}
});
}).appendTo(div);
$('<br/>').appendTo(div);
});
$("#leftRows").append(div);
}
function Buildgames(items) {
var place = '<div>';
$.each(items, function() {
place += '<div style="float: right;"> ' + this.CITY + ' ' + '</div><BR />' + +'<br/><br/>';
});
place += '</div>';
return place; // returns the string created, as opposed to alerting it.
}
I am trying get paged json responses from Topsy (http://code.google.com/p/otterapi/) and am having problems merging the objects. I want to do this in browser as the api rate limit is per ip/user and to low to do things server side.
Here is my code. Is there a better way? Of course there is because this doesn't work. I guess I want to get this working, but also to understand if there is a safer, and/or more efficient way.
The error message I get is ...
TypeError: Result of expression 'window.holdtweetslist.prototype' [undefined] is not an object.
Thanks in advance.
Cheers
Stephen
$("#gettweets").live('click', function(event){
event.preventDefault();
getTweets('stephenbaugh');
});
function getTweets(name) {
var MAX_TWEETS = 500;
var TWEETSPERPAGE = 50;
var BASE = 'http://otter.topsy.com/search.json?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + name + '&page=1';
var currentpage = 1;
alert(BASE);
$.ajax({
dataType: "json",
url: BASE,
success: function(data) {
window.responcesreceived = 1;
var response=data.response;
alert(response.total);
window.totalweets = response.total;
window.pagestoget = Math.ceil(window.totalweets/window.TWEETSPERPAGE);
window.holdtweetslist = response.list;
window.holdtweetslist.prototype.Merge = (function (ob) {var o = this;var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {o[z] = ob[z];}}return o;});
// alert(data);
;; gotTweets(data);
var loopcounter = 1;
do
{
currentpage = currentpage + 1;
pausecomp(1500);
var BASE = 'http://otter.topsy.com/search.json?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + name + '&page=' + currentpage;
alert(BASE);
$.ajax({dataType: "json", url: BASE, success: gotTweets(data)});
}
while (currentpage<pagestoget);
}
});
};
function gotTweets(data)
{
window.responcesreceived = window.responcesreceived + 1;
var response = data.response;
alert(response.total);
window.holdtweetslist.Merge(response.list);
window.tweetsfound = window.tweetsfound + response.total;
if (window.responcesreceived == window.pagestoget) {
// sendforprocessingsendtweetlist();
alert(window.tweetsfound);
}
}
You are calling Merge as an static method, but declared it as an "instance" method (for the prototype reserved word).
Remove prototype from Merge declaration, so you'll have:
window.holdtweetslist.Merge = (function(ob)...
This will fix the javascript error.
This is Vipul from Topsy. Would you share the literal JSON you are receiving? I want to ensure you are not receiving a broken response.
THanks to Edgar and Vipul for there help. Unfortunately they were able to answer my questions. I have managed to work out that the issue was a combination of jquery not parsing the json properly and needing to use jsonp with topsy.
Here is a little test I created that works.
Create a doc with this object on it ....
RUN TEST
You will need JQUERY
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
And put the following in a script too. The is cycle through the required number of tweets from Topsy.
Thanks again everyone.
$("#gettweets").live('click', function(event){
event.preventDefault();
getTweets('stephenbaugh');
});
var MAX_TWEETS = 500;
var TWEETSPERPAGE = 50;
var BASE = 'http://otter.topsy.com/search.json';
var currentpage;
var responcesreceived;
var totalweets;
var pagestoget;
var totalweets;
var TWEETSPERPAGE;
var holdtweetslist = [];
var requestssent;
var responcesreceived;
var tweetsfound;
var nametoget;
function getTweets(name) {
nametoget=name;
currentpage = 1;
responcesreceived = 0;
pagestoget = 0;
var BASE = 'http://otter.topsy.com/search.js?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + nametoget + '&page=1';
$('#gettweets').html(BASE);
$.ajax({url: BASE,
dataType: 'jsonp',
success : function(data) {
getalltweets(data);
}
});
};
function getalltweets(data) {
totalweets = data.response.total;
$('#gettweets').append('<p>'+"total tweets " + totalweets+'</p>');
$('#gettweets').append('<p>'+"max tweets " + MAX_TWEETS+'</p>');
if (MAX_TWEETS < totalweets) {
totalweets = 500
}
$('#gettweets').append('<p>'+"new total tweets " + totalweets+'</p>');
gotTweets(data);
pagestoget = Math.ceil(totalweets/TWEETSPERPAGE);
var getpagesint = self.setInterval(function() {
currentpage = ++currentpage;
var BASE = 'http://otter.topsy.com/search.js?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + nametoget + '&page=' + currentpage;
$.ajax({url: BASE,
dataType: 'jsonp',
success : function(data) {
gotTweets(data);
}
});
if (currentpage == pagestoget) {
$('#gettweets').append('<p>'+"finished sending " + currentpage+ ' of ' + pagestoget + '</p>');
clearInterval(getpagesint);
};
}, 2000);
};
function gotTweets(data)
{
responcesreceived = responcesreceived + 1;
holdlist = data.response.list;
for (x in holdlist)
{
holdtweetslist.push(holdlist[x]);
}
// var family = parents.concat(children);
$('#gettweets').append('<p>receipt # ' + responcesreceived+' - is page : ' +data.response.page+ ' array length = ' + holdtweetslist.length +'</p>');
// holdtweetslist.Merge(response.list);
tweetsfound = tweetsfound + data.response.total;
if (responcesreceived == pagestoget) {
// sendforprocessingsendtweetlist();
$('#gettweets').append('<p>'+"finished receiving " + responcesreceived + ' of ' + pagestoget + '</p>');
}
}