Spotify follow playlist button?

Spotify follow playlist button? - javascript

(function() {
function login(callback) {
var CLIENT_ID = 'my_client_id';
var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'playlist-modify-public'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function followPlaylist(accessToken, playlistUri) {
var parts = playlistUri.split(':');
$.ajax({
url: 'https://api.spotify.com/v1/users/' + parts[2] + '/playlists/' + parts[4] + '/followers',
headers: {
'Authorization': 'Bearer ' + accessToken
},
method: 'PUT',
success: function() {
followButton.textContent = 'Following';
},
dataType: 'html',
error: function(e) {
console.error(e);
}
});
}
var followButton = document.getElementById('btn-follow'),
playlistUriInput = document.getElementById('playlist-uri');
followButton.addEventListener('click', function() {
login(function(accessToken) {
followPlaylist(accessToken, playlistUriInput.value);
});
});
})();
When I press the button it's doing nothing!
I searched everywhere for this, but I can't find it. Is it possible?

Related

How to Add Export button in Jquery Custom Datatable

I am using a Web Template for my web site. I am developing with ASP.NET webform. The data will be shown in a Gridview. The Template also has a custom datatable file but without an Export button. I am sharing the js file here. Can anyone help me to edit the jquery and add the export button (PDF, Excel, and Copy)!
Thanks
(function($) {
'use strict';
$.HSCore.components.HSDatatables = {
/**
*
*
* #var Object _baseConfig
*/
_baseConfig: {
paging: true
},
/**
*
*
* #var jQuery pageCollection
*/
pageCollection: $(),
/**
* Initialization of Datatables wrapper.
*
* #param String selector (optional)
* #param Object config (optional)
*
* #return jQuery pageCollection - collection of initialized items.
*/
init: function(selector, config) {
this.collection = selector && $(selector).length ? $(selector) : $();
if (!$(selector).length) return;
this.config = config && $.isPlainObject(config) ?
$.extend({}, this._baseConfig, config) : this._baseConfig;
this.config.itemSelector = selector;
this.initDatatables();
return this.pageCollection;
},
initDatatables: function() {
//Variables
var $self = this,
config = $self.config,
collection = $self.pageCollection;
//Actions
this.collection.each(function(i, el) {
//Variables
var $this = $(el),
$info = $this.data('dt-info'),
$search = $this.data('dt-search'),
$entries = $this.data('dt-entries'),
$pagination = $this.data('dt-pagination'),
$detailsInvoker = $this.data('dt-details-invoker'),
pageLength = $this.data('dt-page-length'),
isResponsive = Boolean($this.data('dt-is-responsive')),
isSelectable = Boolean($this.data('dt-is-selectable')),
isColumnsSearch = Boolean($this.data('dt-is-columns-search')),
isColumnsSearchTheadAfter = Boolean($this.data('dt-is-columns-search-thead-after')),
isShowPaging = Boolean($this.data('dt-is-show-paging')),
scrollHeight = $this.data('dt-scroll-height'),
paginationClasses = $this.data('dt-pagination-classes'),
paginationItemsClasses = $this.data('dt-pagination-items-classes'),
paginationLinksClasses = $this.data('dt-pagination-links-classes'),
paginationNextClasses = $this.data('dt-pagination-next-classes'),
paginationNextLinkClasses = $this.data('dt-pagination-next-link-classes'),
paginationNextLinkMarkup = $this.data('dt-pagination-next-link-markup'),
paginationPrevClasses = $this.data('dt-pagination-prev-classes'),
paginationPrevLinkClasses = $this.data('dt-pagination-prev-link-classes'),
paginationPrevLinkMarkup = $this.data('dt-pagination-prev-link-markup'),
table = $this.DataTable({
pageLength: pageLength,
responsive: isResponsive,
scrollY: scrollHeight ? scrollHeight : '',
scrollCollapse: scrollHeight ? true : false,
paging: isShowPaging ? isShowPaging : config.paging,
drawCallback: function( settings ) {
var api = this.api(),
info = api.page.info();
$($info).html(
'Showing ' + (info.start + 1) + ' to ' + info.end + ' of ' + info.recordsTotal + ' Entries'
);
}
}),
info = table.page.info(),
paginationMarkup = '';
if (scrollHeight) {
$(table.context[0].nScrollBody).mCustomScrollbar({
scrollbarPosition: 'outside'
});
}
$($search).on('keyup', function() {
table.search(this.value).draw();
});
if(isColumnsSearch == true) {
table.columns().every(function () {
var that = this;
if(isColumnsSearchTheadAfter == true) {
$('.dataTables_scrollFoot').insertAfter('.dataTables_scrollHead');
}
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
$('select', this.footer()).on('change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
$($entries).on('change', function() {
var val = $(this).val();
table.page.len(val).draw();
// Pagination
if (isShowPaging == true) {
$self.pagination($pagination, table, paginationClasses, paginationItemsClasses, paginationLinksClasses, paginationNextClasses, paginationNextLinkClasses, paginationNextLinkMarkup, paginationPrevClasses, paginationPrevLinkClasses, paginationPrevLinkMarkup, val);
}
});
if(isSelectable == true) {
$($this).on('change', 'input', function() {
$(this).parents('tr').toggleClass('checked');
})
}
// Pagination
if (isShowPaging == true) {
$self.pagination($pagination, table, paginationClasses, paginationItemsClasses, paginationLinksClasses, paginationNextClasses, paginationNextLinkClasses, paginationNextLinkMarkup, paginationPrevClasses, paginationPrevLinkClasses, paginationPrevLinkMarkup, info.pages);
}
// Details
$self.details($this, $detailsInvoker, table);
//Actions
collection = collection.add($this);
});
},
pagination: function(target, table, pagiclasses, pagiitemclasses, pagilinksclasses, paginextclasses, paginextlinkclasses, paginextlinkmarkup, pagiprevclasses, pagiprevlinkclasses, pagiprevlinkmarkup, pages) {
var info = table.page.info(),
paginationMarkup = '';
for (var i = 0; i < info.recordsTotal; i++) {
if (i % info.length == 0) {
paginationMarkup += i / info.length == 0 ? '<li class="' + pagiitemclasses + '"><a id="datatablePaginationPage' + (i / info.length) + '" class="' + pagilinksclasses + ' active" href="#!" data-dt-page-to="' + (i / info.length) + '">' + ((i / info.length) + 1) + '</a></li>' : '<li class="' + pagiitemclasses + '"><a id="' + target + (i / info.length) + '" class="' + pagilinksclasses + '" href="#!" data-dt-page-to="' + (i / info.length) + '">' + ((i / info.length) + 1) + '</a></li>';
}
}
$('#' + target).html(
'<ul class="' + pagiclasses + '">\
<li class="' + pagiprevclasses + '">\
<a id="' + target + 'Prev" class="' + pagiprevlinkclasses + '" href="#!" aria-label="Previous">' + pagiprevlinkmarkup + '</a>\
</li>' +
paginationMarkup +
'<li class="' + paginextclasses + '">\
<a id="' + target + 'Next" class="' + paginextlinkclasses + '" href="#!" aria-label="Next">' + paginextlinkmarkup + '</a>\
</li>\
</ul>'
);
$('#' + target + ' [data-dt-page-to]').on('click', function() {
var $page = $(this).data('dt-page-to'),
info = table.page.info();
$('#' + target + ' [data-dt-page-to]').removeClass('active');
$(this).addClass('active');
table.page($page).draw('page');
});
$('#' + target + 'Next').on('click', function() {
var $currentPage = $('#' + target + ' [data-dt-page-to].active');
table.page('next').draw('page');
if ($currentPage.parent().next().find('[data-dt-page-to]').length) {
$('#' + target + ' [data-dt-page-to]').removeClass('active');
$currentPage.parent().next().find('[data-dt-page-to]').addClass('active');
} else {
return false;
}
});
$('#' + target + 'Prev').on('click', function() {
var $currentPage = $('#' + target + ' [data-dt-page-to].active');
table.page('previous').draw('page');
if ($currentPage.parent().prev().find('[data-dt-page-to]').length) {
$('#' + target + ' [data-dt-page-to]').removeClass('active');
$currentPage.parent().prev().find('[data-dt-page-to]').addClass('active');
} else {
return false;
}
});
},
format: function(value) {
return value;
},
details: function(el, invoker, table) {
if (!invoker) return;
//Variables
var $self = this;
$(el).on('click', invoker, function() {
var tr = $(this).closest('tr'),
row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('opened');
} else {
row.child($self.format(tr.data('details'))).show();
tr.addClass('opened');
}
});
}
};
})(jQuery);

Authentication Javascript with Spotify Web API

I need to authenticate in Spotify Web Api without dialog text for approved, or load in a complete page and after load a page with results.
My code:
function login(callback) {
var CLIENT_ID = 'ID CLIENT';
var REDIRECT_URI = 'REDIRECT URI';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'playlist-modify-public'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}

Bootstrap gallery template flickr images

i'm using this template for a personal project.
https://github.com/blueimp/Bootstrap-Image-Gallery
and there is this code here that gets photos from flickr. This code uses the method flickr.interestingness.getList which takes tags as an argument as seen here. http://www.flickr.com/services/api/flickr.interestingness.getList.html
I want to pass in tags as an argument, but I can't figure out the syntax for doing so in ajax or w/e the format being used in this code is.
// Load images via flickr for demonstration purposes:
$.ajax({
url: 'http://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: 'API_KEY_abc123'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (data) {
var gallery = $('#gallery'),
url;
$.each(data.photos.photo, function (index, photo) {
url = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
$('<a data-gallery="gallery"/>')
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)
.appendTo(gallery);
});

This seems like a better project:
http://petejank.github.io/js-flickr-gallery/

/*
* Bootstrap Image Gallery JS Demo 3.0.0
* https://github.com/blueimp/Bootstrap-Image-Gallery
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
* Plugin was modified by ravindu
*/
(function( $ ) {
$.fn.flickr = function(options) {
var url = 'http://api.flickr.com/services/rest/?jsoncallback=?';
var settings = $.extend( {
'api_key': 'YOUR API',
}, options);
function view_image(event) {
var target = $(event.target);
if(target.is('img')) {
var url = target.attr('data-url');
var cache = new Image();
cache.src = url;
var gallery = target.parents('.flickr-gallery:first').children('div.viewport');
var info = gallery.children('div.image-info');
var image = gallery.children('img');
image.fadeOut('slow', function () {
image.attr('src', url);
image.fadeIn('slow');
info.html(target.attr('data-title') + '<br />' + target.attr('data-tags'));
});
}
}
return this.each(function() {
var gallery = $(this);
gallery.addClass('flickr-gallery');
gallery.append('<h2></h2><h3></h3><div class="viewport"></div><div class="browser"><ul></ul></div><div class="clear"></div>');
$.getJSON(url, {
method: 'flickr.photosets.getInfo',
api_key: settings.api_key,
photoset_id: settings.photoset_id,
format: 'json'
}).success(function(state) {
gallery.children('h3').html(state.photoset.description._content);
gallery.find('.loader').addClass('activate');
$.getJSON(url, {
method: 'flickr.photosets.getPhotos',
api_key: settings.api_key,
media: 'photos',
photoset_id: settings.photoset_id,
format: 'json',
extras: 'url_sq,url_m,url_b,date_taken,tags'
}).success(function(state) {
$('.loader').removeClass('activate');
var list = gallery.find('ul:first');
list.html('');
list.on('click', view_image);
$.each(state.photoset.photo, function(index, photo){
baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
list.append('<a href="' + this.url_m + '" title="' + this.title + '" data-gallery="" > <img src="' + this.url_sq + '" title="' + this.title + '" ' +
'data-title="' + this.title + '" ' +
'data-url="' + this.url_m + '" ' +
( this.date_taken ? 'data-date="' + this.date_taken + '" ' : '' ) +
'data-tags="' + this.tags + '" ' +
'/></a>');
});
}).fail(function(state) {
alert("Unable to retrieve photo set");
});
}).fail(function(state) {
alert("Unable to retrieve photo set information");
});
});
};
})( jQuery );
$(document).on('ready', function(){
$('#photos-1').flickr({ photoset_id:'72157640241840746'});
$('#photos-2').flickr({ photoset_id:'72157640251299195'});
$('#photos-3').flickr({ photoset_id:'72157640241840746'});
$('#photos-4').flickr({ photoset_id:'72157640251299195'});
$('#photos-5').flickr({ photoset_id:'72157640241840746'});
});

Simple weather code using Yahoo API

I want to show the weather on my website. I have some javascript code like
$(function () {
// Specify the ZIP/location code and units (f or c)
//var loc = '10001'; // or e.g. SPXX0050
//var u = 'f';
var loc = 'TUXX0002';
//var loc = 'TUXX0014';
var u = 'c';
//var locA = 'TUXX0002';
//var locI = 'TUXX0015';
var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
window['wxCallback'] = function (data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
};
$.ajax({
url: url,
dataType: 'jsonp',
cache: true,
jsonpCallback: 'wxCallback'
});
});
For now it shows only one location. (with loc variable). I want to add a dropdown or something like a change location link. Than if user selects 'A' location it shows 'A location's weather' etc. I added a dropdown item. Here is the code.
<select id="wxCombo">
<option value="istanbul">istanbul</option>
<option value="ankara">ankara</option>
<option value="izmir">izmir</option>
</select>
Than I add some javascript code for change function, on the same javascript page.
var wxCombo = $("#wxCombo").val();
$("#wxCombo").change(function()
{
if (wxCombo == 'Ankara')
{
loc 'TUXX0002';
}
});
It didn't worked. I need some guide for fixing this issue.

Here's a few things I would change.
First off, declare a function that will update the weather information, based on location:
function updateWeather(loc, u)
{
var query = "SELECT item.condition \
FROM weather.forecast \
WHERE location='" + loc + "' AND u='" + u + "'",
url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';
$.ajax({
url: url,
dataType: 'jsonp', // this automatically disables cache too
success: function(data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
}
});
}
Then, hook this into the .change() handler:
$("#wxCombo").change(function() {
var country = $(this).val();
if (country == 'ankara') {
updateWeather('TUXX0002', 'C');
}
// etc.
});
Demo: http://jsfiddle.net/ZF3aW/

on first glance you are missing an = sign...
var wxCombo = $("#wxCombo").val();
$("#wxCombo").change(function()
{
if (wxCombo == 'Ankara')
{
loc **=** 'TUXX0002';
}
});

Cannot find syntax error, help me look

I get this: Uncaught SyntaxError: Unexpected end of input at the end of the tag so I am missing a bracket or something but where oh where?
here my javascript code:
<script type="text/javascript">
var boxWidth = 133;
var spaceBetween = 6;
var stopScrolling = false;
function addBoxToEnd() {
var lastBox = $("div.property-carousel-box:last");
var rightId = parseInt($(lastBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;
var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
$("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function (data) {
if (data != null) {
var lastBox = $("div.property-carousel-box:last");
$(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(lastBox).attr("propertyid", data.PropertyId);
$(lastBox).attr("pageindex", data.Page);
$(lastBox).click(function () {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
function addBoxToStart() {
var firstBox = $("div.property-carousel-box:first");
var leftId = parseInt($(firstBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;
var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
$("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function(data) {
if (data != null) {
firstBox = $("div.property-carousel-box:first");
$(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(firstBox).attr("propertyid", data.PropertyId);
$(firstBox).attr("pageindex", data.Page);
$(firstBox).click(function() {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
function scrollLeft() {
// Add new box at the start
addBoxToStart();
$("div.property-carousel-box").each(function() {
$(this).animate({ left: '+=' + (boxWidth + spaceBetween) }, 250);
});
// Now remove the box at the end
$("div.property-carousel-box:last").remove();
}
function scrollRight() {
// Add new box at the end
addBoxToEnd();
$("div.property-carousel-box").each(function() {
$(this).animate({ left: '-=' + (boxWidth + spaceBetween) }, 250);
});
// Now remove the box at the start
$("div.property-carousel-box:first").remove();
}
$(document).ready(function() {
$("a#property-scroll-left").addClass("property-scroll-left-link");
$("a#property-scroll-right").addClass("property-scroll-right-link");
$("div#property-carousel-box-container").removeClass("property-carousel-box-container").addClass("property-carousel-box-container-jquery");
$("div.property-carousel-box").addClass("property-carousel-box-jquery");
var i = 0;
$("div.property-carousel-box").each(function() {
$(this).css('left', function() {
var leftPos = (i * boxWidth) + (spaceBetween * (i + 1));
return leftPos + 'px';
});
var propId = parseInt($(this).attr('propertyid'), 10);
$(this).click(function() {
location.href = '<%= Url.Action("Details", "Properties") %>/' + propId;
});
i++;
});
// Add an extra box at the start and end to have some time to load the new images
// before they are moved into view.
addBoxToEnd();
addBoxToStart();
$("a#property-scroll-left").click(function() {
stopScrolling = true;
scrollLeft();
return false;
});
$("a#property-scroll-right").click(function() {
stopScrolling = true;
scrollRight();
return false;
});
// Start the timer that performs the automatic scrolling
$.timer(3000, function() {
if (!stopScrolling)
scrollRight();
else {
try {
timer.stop();
} catch (Error) {
// Do nothing here...not sure why, but the timer plugin is still
// calling the timer.stop() command after the timer has been set to null.
// Not our code, so can't fix it.
}
}
});
});
</script>
where am i missing a bracket?
thanks

Pay attention to your $.getJSON functions, they are missing } for the if (data != null) and }); for the $.getJSON, so
var boxWidth = 133;
var spaceBetween = 6;
var stopScrolling = false;
function addBoxToEnd() {
var lastBox = $("div.property-carousel-box:last");
var rightId = parseInt($(lastBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;
var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
$("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function (data) {
if (data != null) {
var lastBox = $("div.property-carousel-box:last");
$(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(lastBox).attr("propertyid", data.PropertyId);
$(lastBox).attr("pageindex", data.Page);
$(lastBox).click(function () {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
});
}
function addBoxToStart() {
var firstBox = $("div.property-carousel-box:first");
var leftId = parseInt($(firstBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;
var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
$("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function(data) {
if (data != null) {
firstBox = $("div.property-carousel-box:first");
$(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(firstBox).attr("propertyid", data.PropertyId);
$(firstBox).attr("pageindex", data.Page);
$(firstBox).click(function() {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
});
}
function scrollLeft() {
// Add new box at the start
addBoxToStart();
$("div.property-carousel-box").each(function() {
$(this).animate({ left: '+=' + (boxWidth + spaceBetween) }, 250);
});
// Now remove the box at the end
$("div.property-carousel-box:last").remove();
}
function scrollRight() {
// Add new box at the end
addBoxToEnd();
$("div.property-carousel-box").each(function() {
$(this).animate({ left: '-=' + (boxWidth + spaceBetween) }, 250);
});
// Now remove the box at the start
$("div.property-carousel-box:first").remove();
}
$(document).ready(function() {
$("a#property-scroll-left").addClass("property-scroll-left-link");
$("a#property-scroll-right").addClass("property-scroll-right-link");
$("div#property-carousel-box-container").removeClass("property-carousel-box-container").addClass("property-carousel-box-container-jquery");
$("div.property-carousel-box").addClass("property-carousel-box-jquery");
var i = 0;
$("div.property-carousel-box").each(function() {
$(this).css('left', function() {
var leftPos = (i * boxWidth) + (spaceBetween * (i + 1));
return leftPos + 'px';
});
var propId = parseInt($(this).attr('propertyid'), 10);
$(this).click(function() {
location.href = '<%= Url.Action("Details", "Properties") %>/' + propId;
});
i++;
});
// Add an extra box at the start and end to have some time to load the new images
// before they are moved into view.
addBoxToEnd();
addBoxToStart();
$("a#property-scroll-left").click(function() {
stopScrolling = true;
scrollLeft();
return false;
});
$("a#property-scroll-right").click(function() {
stopScrolling = true;
scrollRight();
return false;
});
// Start the timer that performs the automatic scrolling
$.timer(3000, function() {
if (!stopScrolling)
scrollRight();
else {
try {
timer.stop();
} catch (Error) {
// Do nothing here...not sure why, but the timer plugin is still
// calling the timer.stop() command after the timer has been set to null.
// Not our code, so can't fix it.
}
}
});
});

You are missing closing bracket } for if condition and closing bracket, closing parenthesis and semicolon }); for your $.getJSON function call.

In each of the first two functions there are two closing brackets missing. In such a case, use an editor like Notepad++ or an IDE which has syntax highlighting and shows you corresponding brackets when you mark one of the pair to find where one is missing. This should do it:
function addBoxToEnd() {
var lastBox = $("div.property-carousel-box:last");
var rightId = parseInt($(lastBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;
var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
$("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function (data) {
if (data != null) {
var lastBox = $("div.property-carousel-box:last");
$(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(lastBox).attr("propertyid", data.PropertyId);
$(lastBox).attr("pageindex", data.Page);
$(lastBox).click(function () {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
}
}
function addBoxToStart() {
var firstBox = $("div.property-carousel-box:first");
var leftId = parseInt($(firstBox).attr("pageindex"), 10);
var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;
var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
$("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");
$.getJSON(jsonUrl, function(data) {
if (data != null) {
firstBox = $("div.property-carousel-box:first");
$(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
$("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
$(firstBox).attr("propertyid", data.PropertyId);
$(firstBox).attr("pageindex", data.Page);
$(firstBox).click(function() {
location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
});
}
}
}

Develop Reference

JavaScript is the programming language of the Web.

Spotify follow playlist button? - javascript

Related

How to Add Export button in Jquery Custom Datatable

Authentication Javascript with Spotify Web API

Bootstrap gallery template flickr images

Simple weather code using Yahoo API

Cannot find syntax error, help me look

Categories

Resources