Develop Reference

How to Improve performance of nested ng-repeat in Angulajs

I am trying to implement infinite scrolling in my AngularJs project and I am using nested ng-repeat and binding the data by JAVA API, the data return by service is huge so the performance is getting very low. I have Googled for the different solution nothing is working for me.
Use of Track Id
Controller Code
var developerController = ['$rootScope', '$scope', '$location', '$window',
'developerData', '$route', '$timeout', '$compile', '$routeParams',
function($rootScope, $scope, $location, $window, developerData, $route, $timeout, $compile, $routeParams) {
globalModel.showSpinner();
$scope.developerData = developerData.retData[0];
// $scope.homeData = homeData.retData;
$scope.perpages = 10;
$scope.hasReadMore = false;
$scope.windowScrolled = false;
var hasPageInUrl = $location.url().indexOf('page=') != -1;
$scope.pageParm = parseInt($routeParams.page);
$scope.hasPageInUrl = hasPageInUrl;
// alert($scope.hasPageInUrl);
setTimeout(function() {
$("#abtDeveloperContent").html($scope.developerData.abtDeveloper);
});
$scope.isMobileAppBanner = function(index) {
index = index + 1;
return ((index % 6) / 100 == 0);
};
if ($scope.hasPageInUrl == true && angular.isNumber($scope.pageParm) == true) {
$scope.currentPage = $scope.pageParm;
} else {
$scope.currentPage = 1;
}
$scope.totalPages = Math.ceil($scope.developerData.projects.length / $scope.perpages);
if ($scope.currentPage > $scope.totalPages) {
var newurl = $location.protocol() + "://" + $location.host() + $location.path();
window.location.href = newurl;
} else {
globalModel.showSpinner();
$scope.developerPaginatedData = $scope.developerData.projects;
$scope.developerPaginatedData.sort(function(a, b) {
return b.totalProjects - a.totalProjects
});
$scope.filteredProjects = [];
$scope.isMobile = $rootScope.isMobile;
$scope.maxSize = 5;
if ($scope.isMobile == true) {
$scope.maxSize = 3;
}
$scope.begin = 0;
$scope.end = 0;
$rootScope.approvedCities = appConfig.approvedCities;
$scope.numPages = function() {
return Math.ceil($scope.developerData.projects.length / $scope.perpages);
};
$scope.FlagshipImage = '';
/* Pagination Logic */
if ($scope.isMobile == true || $rootScope.isFragment == true || hasPageInUrl == true) {
$scope.$watch('currentPage + numPerPage', function() {
//$scope.panIndiaDataArr = globalModel.doPaging($scope.panIndiaData,4);
if ($scope.currentPage > $scope.totalPages || $scope.pageParm <= 1) {
var newurl = $location.protocol() + "://" + $location.host() + $location.path();
// window.location.href = newurl;
}
var begin = (($scope.currentPage - 1) * $scope.perpages),
end = begin + $scope.perpages;
$scope.filteredProjects = $scope.developerData.projects.slice(begin, end);
console.log($scope.filteredProjects);
$scope.developerDataArr = globalModel.doPaging($scope.filteredProjects, 6);
//console.log($scope.developerDataArr);
$timeout(function() {
$(".dev_ui_bootstarp_pagination").each(function(i, paginationlink) {
var pageno = $(this).attr("pageno");
var isdisabled = $(this).parent().hasClass("disabled");
if (isdisabled == false && pageno > 1 && parseInt($(this).text()) > 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + pageno);
}
if (pageno == 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path());
}
if ($(this).text() == "<<") {
var firstpageno = $(".panindia_pagination > ul > li:first").next().find("a").attr("pageno");
if (firstpageno > 1) {
var prevno = parseInt(firstpageno) - 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + prevno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
if ($(this).text() == ">>") {
var lastpageno = $(".panindia_pagination > ul > li:last").prev().find("a").attr("pageno");
if (lastpageno < $scope.totalPages) {
var nextno = parseInt(lastpageno) + 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + nextno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
});
});
});
}
}
if ($scope.isMobile == false && hasPageInUrl == false && $rootScope.isFragment == false) {
$scope.loadMore = function() {
// alert("load more called");
var offset = $('#dev_loadmore').offset().top - $(window).scrollTop();
if (offset <= window.innerHeight && ((parseInt($scope.currentPage) + 1) <= $scope.totalPages || $scope.currentPage == 1)) {
if ($scope.end > $scope.developerData.projects.length) {
return false;
}
$scope.begin = 0;
$scope.end = $scope.end + $scope.perpages;
$scope.windowScrolled = true;
$("#dev_loadmore").overlay();
$scope.filteredProjects = $scope.developerData.projects.slice($scope.begin, $scope.end);
$scope.developerDataArr = globalModel.doPaging($scope.filteredProjects, 6);
$("#dev_loadmore").overlayout();
$scope.windowScrolled = false;
}
$timeout(function() {
$(".dev_ui_bootstarp_pagination").each(function(i, paginationlink) {
var pageno = $(this).attr("pageno");
var isdisabled = $(this).parent().hasClass("disabled");
if (isdisabled == false && pageno > 1 && parseInt($(this).text()) > 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + pageno);
}
if (pageno == 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path());
}
if ($(this).text() == "<<") {
var firstpageno = $(".panindia_pagination > ul > li:first").next().find("a").attr("pageno");
if (firstpageno > 1) {
var prevno = parseInt(firstpageno) - 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + prevno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
if ($(this).text() == ">>") {
var lastpageno = $(".panindia_pagination > ul > li:last").prev().find("a").attr("pageno");
if (lastpageno < $scope.totalPages) {
var nextno = parseInt(lastpageno) + 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + nextno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
});
});
};
}
/* formation of previous and next url in html source ccode */
var prev_rel = "";
var next_rel = "";
if ($scope.currentPage == 1) {
next_rel = "<link rel='next' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage + 1) + "'>";
}
if ($scope.currentPage > 1 && $scope.currentPage <= $scope.totalPages) {
if ($scope.currentPage == 2) {
prev_rel = "<link rel='prev' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "'>";
} else {
prev_rel = "<link rel='prev' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage - 1) + "'>";
}
if ($scope.currentPage < $scope.totalPages) {
next_rel = "<link rel='next' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage + 1) + "'>";
}
}
$("head > link[rel='prev'],head > link[rel='next']").remove();
if ($scope.totalPages > 1) {
$("head").append(prev_rel);
$("head").append(next_rel);
}
//console.log($scope.developerData.abtDeveloper);
$timeout(function() {
$scope.$apply(function() {
developerUI.init();
$('html,body,.listingTilesBox').animate({
scrollTop: 0
}, 1000);
globalModel.hideSpinner("from developerController - line no 31");
});
});
$timeout(function() {
$scope.$apply(function() {
$rootScope.pagelevel = 'HOME';
$("#footerlink_container").html('');
angular.element(document.getElementById('footerlink_container')).append(
$compile("<footer-data></footer-data>")($rootScope));
$rootScope.global.setFooterData();
if ($rootScope.city == undefined) {
$rootScope.seopagelevel = 'PAN-INDIA-BUILDER';
}
$("#footerlink_seocontainer").html('');
angular.element(document.getElementById('footerlink_seocontainer')).append(
$compile("<seo-footer-data></seo-footer-data>")($rootScope));
$rootScope.global.setSeoFooterData();
developerUI.init();
var height = $('#abtDeveloperContent').height();
if (height > 200) {
$scope.hasReadMore = true;
setTimeout(function() {
$(".readmoreSection .readMoreBox").off("click");
$(".readmoreSection .readMoreBox").on("click", function() {
$(".readmoreSection").toggleClass("fullHeight");
});
});
}
$($("#abtDeveloperContent").find("ul li")).each(function(i, desc_li) {
var lihtml = $(this).html();
$(this).html("<i class='fa fa-circle fs-10' aria-hidden='true'></i> " + lihtml);
});
globalModel.hideSpinner("from developerController - line no 104");
});
});
}
];
Html for binding Data
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<div ng-repeat="projectPaginationData in developerDataArr" ng-init="rowIndex = $index" ng-if="(isMobile==false && isFragment==false && hasPageInUrl == false)">
<div ng-repeat="project in projectPaginationData" ng-if="$index >= begin && $index <= end">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<project-info ng-model="project" ng-init="project.type = 'INDIA'" show-units="true" />
</div>
<deal-app-banner ng-if="isMobileAppBanner($index)"></deal-app-banner>
<deal-lead-banner ng-if="$index == 1 && rowIndex == 1 "></deal-lead-banner>
</div>
</div>
<div ng-repeat="projectPaginationData in developerDataArr" ng-init="rowIndex = $index" ng-if="(isMobile==true || isFragment==true || hasPageInUrl == true)">
<div ng-repeat="project in projectPaginationData">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<project-info ng-model="project" ng-init="project.type = 'INDIA'" show-units="true" />
</div>
<deal-app-banner ng-if="isMobileAppBanner($index)"></deal-app-banner>
<deal-lead-banner ng-if="$index == 1 && currentPage == 2"></deal-lead-banner>
</div>
</div>
loadMore() function is for enabling infinite scrolling.
Please help me.

use limitTo filter. Here is doc Angular limitTo
ng-repeat="d in data | limitTo:numberOfItemsDisplayed"

InnerHTML Append Item instead of Replace

I'm trying to make a palindrome script and it's actually "working".
I want to make a improvement. I want the input value append on my "output" div.
here are my fiddle http://jsfiddle.net/vitorboccio/8yh1u0t7/
any hints ? I dont want to use Jquery ! Thanks!
(function () {
"use strict";
var output = document.getElementById("output"),
statusLine = document.getElementById("status"),
phrase = document.getElementById('phrase'),
testButton = document.getElementById("testButton"),
//palindromeText = document.getElementById("palindrome"),
characterCheck = document.getElementById("characterCheck"),
ignoreSpecialCharacters = false,
ignoreSpaces = false;
function setMessage(palindrome) {
if (palindrome) {
output.innerHTML = phrase.value + ' ' + "é palindroma";
} else {
output.innerHTML = phrase.value + ' ' + "não é a palindroma";
}
}
function checkForPalindrome(string) {
var palindrome = true,
right = string.length - 1,
left = 0;
if (!string || string.length < 1) {
// 0 characters
return false;
}
while (left < right && palindrome) {
palindrome = string.charAt(left) === string.charAt(right);
left++;
right--;
}
return palindrome;
}
function executeTest() {
var string = phrase.value,
cleanString;
cleanString = string;
if (ignoreSpaces) {
//ignores whitespaces only;
cleanString = string.replace(/\s+/g, '');
}
if (ignoreSpecialCharacters) {
//ignores punctuation and white space (controversial).
cleanString = string.replace(/[A-Z0-9]/ig, '');
}
if (checkForPalindrome(cleanString)) {
setMessage(true);
palindromeText.innerHTML = '"' + string + '"';
} else {
setMessage(false);
}
}
function executeOnEnter(e) {
if (e.keyCode === 13) {
executeTest();
// phrase.blur();
}
}
//resets the form to state 1
function resetForm() {
output.innerHTML = "";
//statusLine.innerHTML = "Waiting";
statusLine.style.color = "green";
phrase.value = "";
}
function charIgnoreChanged(e) {
ignoreSpecialCharacters = e.target.checked;
}
function spaceIgnoreChanged(e) {
ignoreSpaces = e.target.checked;
}
phrase.addEventListener('keydown', executeOnEnter);
testButton.addEventListener('click', executeTest);
characterCheck.addEventListener('change', charIgnoreChanged);
spaceCheck.addEventListener('change', spaceIgnoreChanged);
}());

You just need to modify setMessage
function setMessage(palindrome) {
if (palindrome) {
output.innerHTML += phrase.value + ' ' + "é palindroma<br />";
} else {
output.innerHTML += phrase.value + ' ' + "não é a palindroma<br />";
}
// for user convenience, clear the textbox and give it focus
phrase.value = '';
phrase.focus();
}
Fiddle

You can append to the div by keeping the original innerHTML like this:
output.innerHTML = output.innerHTML + "<br />" + phrase.value + ' ' + "é palindroma";
or shorter:
output.innerHTML += "<br />" + phrase.value + ' ' + "é palindroma";

Open Weather Map - add a form field function for city weather (Jquery)

The script I have works well, but I need an additional search field for city and I have some problems with this feature.
This is my code I have # this time.
jQuery code
$(function () { var DEG = 'c'; var weatherDiv = $('#weather'), scroller = $('#scroller'), location = $('div.location');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
} else {
showError("Your browser does not support Geolocation!");
}
function locationSuccess(position) {
try {
var cache = localStorage.weatherCache && JSON.parse(localStorage.weatherCache);
var d = new Date();
if (cache && cache.timestamp && cache.timestamp > d.getTime() - 30 * 60 * 1000) {
var offset = d.getTimezoneOffset() * 60 * 1000;
var city = cache.data.city.name;
var country = cache.data.city.country;
$.each(cache.data.list, function () {
var localTime = new Date(this.dt * 1000 - offset);
addWeather(
this.weather[0].icon,
moment(localTime).calendar() + ' Uhr',
this.weather[0].description,
'<span class="forecast-temp-blue">' + convertTemperature(this.main.temp_min) + '°' + DEG + '</span> | <span class="forecast-temp-red">' + convertTemperature(this.main.temp_max) + '°' + DEG + '</span>',
'<b>' + this.main.humidity + '%</b>',
'<b>' + miles2km(this.wind.speed) + '</b>',
'<b>' + convertDeg2Comp(this.wind.deg) + '</b>'
);
});
location.html(city + ', <b>' + country + '</b>');
weatherDiv.addClass('loaded');
showSlide(0);
} else {
var weatherAPI = 'http://api.openweathermap.org/data/2.5/forecast?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude + '&lang=de&callback=?';
$.getJSON(weatherAPI, function (response) {
localStorage.weatherCache = JSON.stringify({
timestamp: (new Date()).getTime(),
data: response
});
locationSuccess(position);
});
}
} catch (e) {
showError("We can't find information about your city!");
window.console && console.error(e);
}
}
function addWeather(icon, day, description, temperature, humidity, windspeed, winddeg) {
var markup = '<li>' +
'<div class="row-body">' +
'<div class="forecast-day">' + day + '</div>' +
'<div class="forecast-cond">' + description + '</div>' +
'<img src="assets/img/icons/' + icon + '.png" /><br>' +
'<div class="forecast-left-side">' +
'<div class="forecast-temp"><img src="assets/img/icons/temp.png" />' + temperature + '</div>' +
'<div class="humidity"><img src="assets/img/icons/drop.png" />' + humidity + '</div>' +
'</div>' +
'<div class="forecast-right-side">' +
'<div class="wind"><img src="assets/img/icons/wind.png" />' + windspeed + ' km/h</div>' +
'<div class="windr"><img src="assets/img/icons/windr.png" />' + winddeg + '</strong></div>' +
'</div></div></li>';
scroller.append(markup);
}
var currentSlide = 0;
weatherDiv.find('a.previous').click(function (e) {
e.preventDefault();
showSlide(currentSlide - 1);
});
weatherDiv.find('a.next').click(function (e) {
e.preventDefault();
showSlide(currentSlide + 1);
});
$(document).keydown(function (e) {
switch (e.keyCode) {
case 37:
weatherDiv.find('a.previous').click();
break;
case 39:
weatherDiv.find('a.next').click();
break;
}
});
function showSlide(i) {
var items = scroller.find('li');
if (i >= items.length || i < 0 || scroller.is(':animated')) {
return false;
}
weatherDiv.removeClass('first last');
if (i == 0) {
weatherDiv.addClass('first');
} else if (i == items.length - 1) {
weatherDiv.addClass('last');
}
scroller.animate({
left: (-i * 100) + '%'
}, function () {
currentSlide = i;
});
}
function locationError(error) {
switch (error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
function convertTemperature(kelvin) {
return Math.round(DEG == 'c' ? (kelvin - 273.15) : (kelvin * 9 / 5 - 459.67));
}
function convertDeg2Comp(num) {
val = Math.round((num - 22.5) / 45);
arr = ["N", "NO", "O", "SO", "S", "SW", "W", "NW"];
return arr[val % 8];
}
function miles2km(num) {
val = (num / 0.62137).toFixed(2);
return val;
}
function showError(msg) {
weatherDiv.addClass('error').html(msg);
}
});
and here is my html code
<div id="weather">
<div class="location"></div>
<ul id="scroller">
<!-- The forecast items will go here -->
</ul>
Previous Next
<form id="search">
<input id="getcity" name="q" type="text" size="40" placeholder="Stadtname" onclick="httpGetCity()"/>
</form>
<input id="gloc" type="submit" title="W3C Geolocation" value="" />
</div>
The user should have the possibility to enter a city name and the weather data should be displayed in the same widget for the entered city.
How can we achieve this?

JQuery click function not working after removing and adding back elements

this is my click function
$('.cal table tbody td').on('click', function () {
if($(this).hasClass('available'))
{
alert('asd');
}
});
the problem i am having is that after i have switched to the next or previous month, my clicking function on the calendar does not work.
For example in my JSFIDDLE, if u move to the previous month and then move back to the current month and do the click function, it wouldn't work anymore.
EDIT: I'm using an external library called date.js, check out my jsfiddle for a clearer idea of what is going on.
EDIT 2: updated jsfiddle link
jsfiddle

Use this
$(document).on('click','.cal table tbody td', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
instead of this
$('.cal table tbody td').on('click', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
Former is the correct replacement for delegate

one thing I notice immediately is that when you do things like:
$('#calendar tbody').append('<tr id = row'+i+'></tr>');
you need to remember that when you want to give an ID to an element the 'value' portion of the ID should be enclosed in quotations.
So you need to escape the string to include them so your browser can interpret the html properly.
ie
$('#calendar tbody').append('<tr id = \"row'+i+'\"></tr>');
that way your output looks like:
<tr id="rowx"></tr>
instead of:
<tr id=rowx></tr>

Your previous and next event handlers are recreating the DOM elements used for rendering the calendar. However, your click handler is only only attached to the elements that exist in the DOM at the time that handler is registered. The documentation of on() states:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on()
You'll probably need to re-register that click handler as part of your calendarInit() function after the new rows in the calendar - the new elements - have been rendered.

You may view a working version here. Or take a look at the updated jQuery below.
var firstday = new Date();
var lastday = new Date();
var calendarmonth = new Date();
var CCheck;
$(document).ready(function () {
Date.today();
firstday.setMonth(Date.today().getMonth(), 1);
lastday.setMonth(Date.today().getMonth() + 1, 0);
calendarmonth.setMonth(Date.today().getMonth());
calendarInit();
$('#calendar-prev').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(-1);
firstday.addMonths(-1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
$('#calendar-next').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(1);
firstday.addMonths(1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
addRemoveClickTrigger();
});
function calendarInit() {
CCheck = lastday.getDate() + firstday.getDay();
var i;
var colNo;
var a = 1;
var days = new Array();
$("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
}
/*alert(Date.today().getMonth());
alert(calendarmonth.getMonth());*/
if (Date.today().getMonth() == calendarmonth.getMonth() && Date.today().getFullYear() == calendarmonth.getFullYear()) {
for (i = 1; i <= lastday.getDate(); i++) //Date highlight
{
if (Date.today().getDate() == i) //highlight today's date
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("today");
} else if (Date.today().getDate() > i) //highlight unavailable dates
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
} else if (Date.today().getDate() < i) {
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
}
}
} else if (Date.today() > calendarmonth) {
for (i = 1; i <= lastday.getDate(); i++) //Highlight dates before today to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
} else {
for (i = 1; i <= lastday.getDate(); i++) //Condition highlighting
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
if (days[i].getDay() == 0 || days[i].getDay() == 6) // set weekends to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).removeClass("available");
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
}
}
addRemoveClickTrigger();
} //calendarInit()
function addRemoveClickTrigger()
{
$('.cal table tbody td').off();
$('.cal table tbody td').on({
'click':
function ()
{
alert(jQuery(this).prop('class'));
if ($(this).hasClass('available'))
{
alert('asd');
}
}
});
} //addRemoveClickTrigger()
I hope this helps.

Issue editing class style properties using js - issue is with IE

I have a function to edit the style properties of a class
Unfortunately IE does not seem to like it but it does not give me an error.
Does anyone know what the issue is?
Thanks in advance
function myRemoveElement(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
function boolyChangeFoo(width1, width2, width3, width4) {
if(typeof style == 'undefined') {
var append = true;
myStyle = document.createElement('style');
} else {
while (myStyle.hasChildNodes()) {
myStyle.removeChild(myStyle.firstChild);
}
}
if (document.getElementById('my_custom_styles'))
{
myRemoveElement('my_custom_styles');
}
var head = document.getElementById('myltd_popup_1');
var rules = document.createTextNode('.my_price_comp_inner { width: ' + width1 + '}' +
'.merch_coupons_summary { width: ' + width2 + '}' +
'.merch_coupons_data { width: ' + width3 + '}' +
'.my_coupon_prod_item { width: ' + width4 + '}'
);
myStyle.setAttribute('type','text/css');
myStyle.setAttribute('id', 'my_custom_styles');
if(myStyle.styleSheet) {
myStyle.styleSheet.cssText = rules.nodeValue;
} else {
myStyle.appendChild(rules);
}
//alert(myStyle);
if(append === true) head.appendChild(myStyle);
}

#Pointy - I didn't really need the top part
function myRemoveElement(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
function boolyChangeFoo(width1, width2, width3, width4) {
var append = true;
myStyle = document.createElement('style');
if (document.getElementById('my_custom_styles'))
{
myRemoveElement('my_custom_styles');
}
var head = document.getElementById('myltd_popup_1');
var rules = document.createTextNode('.my_price_comp_inner { width: ' + width1 + '}' +
'.merch_coupons_summary { width: ' + width2 + '}' +
'.merch_coupons_data { width: ' + width3 + '}' +
'.my_coupon_prod_item { width: ' + width4 + '}'
);
myStyle.setAttribute('type','text/css');
myStyle.setAttribute('id', 'my_custom_styles');
if(myStyle.styleSheet) {
myStyle.styleSheet.cssText = rules.nodeValue;
} else {
myStyle.appendChild(rules);
}
//alert(myStyle);
if(append === true) head.appendChild(myStyle);
}