AngularJS -- RZSlider update stepsArray - javascript

I'm trying to edit the rz-slider's labels that appear below the ticks. I am able to obtain the values and everything but if I try to update the stepsArray to the rzslider, it is not being updated. I couldn't find anything on how to update the legend values like this. I feel like I need to reinitialize or refresh the slider in some way but the refresh slider code as shown in https://github.com/angular-slider/angularjs-slider did not work:
vm.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
The code that I am using is as follows. Currently the existing legend contains the word "Text" and I am just trying to check if I can update it to the numeric values just to check if it works but it isn't:
if(vm.legend != ""){
var stepCount = $("#stepCount").val();
vm.priceSlider.options.stepsArray = [];
for(var i = 1; i <= stepCount; i++){
vm.priceSlider.options.stepsArray.push({
value: i,
legend: i.toString()
});
}
vm.refreshSlider();
}
I am kinda new to angular and this is my first time working with the rzslider as well, so any help would be appreciated. Thank you.

Related

I have created a table in HTML by using JavaScript but 2 functions I have connected to two buttons stopped working

I have created a table in HTML with information in it by doing like this:
var tab = document.querySelector("table");
for (var obj of death_row) {
var row = `<tr><td>${obj.first_name}</td>
<td>${obj.last_name}</td>
<td>${obj.age_at_execution}</td>
<td>${obj.weight}</td>
<td>${obj.height}</td></tr>`;
tab.innerHTML += row;
}
I have created two buttons called "metric" and "imperial" and when the user clicks on them, the values in height and weight has to change to metric values (default table is showing imperial values). The code I have written for the metric button looks as so:
//Changes the height and weight values to metric values when clicking on "metric"-button.
document.getElementById("metric").onclick = function() {
var tab = document.querySelector("table");
for (var obj of death_row) {
var row = `<tr><td>${obj.first_name}</td>
<td>${obj.last_name}</td>
<td>${obj.age_at_execution}</td>
<td>${((obj.weight)/2.2046).toFixed(1)}</td>
<td>${(((Number(obj.height[0])*12*2.54) + (Number(obj.height[3])*2.54))/100).toFixed(2)}</td></tr>`;
tab.innerHTML += row;
}
};
//Changes the values back to imperial values when user clicks on the 'imperial' button
document.getElementById("imperial").onclick = function() {
var tab = document.querySelector("table");
for (var obj of death_row) {
var row = `<tr><td>${obj.first_name}</td>
<td>${obj.last_name}</td>
<td>${obj.age_at_execution}</td>
<td>${obj.weight}</td>
<td>${obj.height}</td></tr>`;
tab.innerHTML += row;
}
};
The code when clicking the imperial-button is the same as the first piece of code I posted above as the default values is imperial. The problem is that they wont work together. They work individually if I out-comment the others and I can't really seem to be able to identify the problem, so I was hoping one of you would be able to :) Also, when I Add these adjustments to the obj.height:
${(((Number(obj.height[0])*12*2.54) + (Number(obj.height[3])*2.54))/100).toFixed(2)}
I seem to lose a lot of data in the table, which I find very weird as I lose no data by adding the "/2.2046).toFixed(1)" adjustment to the weight object.. Maybe some of you have better luck at seeing through my mistakes:)
Thank you very much:)
The codepen helped immensely! I mentioned looking at the console output at one point. That's critically important because it's telling you what went wrong, so make sure you know how to see it. In codepen its at the bottom left as well, and there's a red exclamation mark in the JS showing that an error is present. When I hit the Metric button I see:
TypeError: obj.height is null
That's because some of your data has null for width or height instead of the value you're expecting, so it "crashes" and just stops at whatever row caused the problem. That's why some rows disappeared.
Two fixes I see:
Fix your data so that the values don't have null in them
Make the code more robust so it doesn't crash on invalid data (this is always preferable for any program).
For the second option, you can fix the code like this:
function MetricValues() {
var tab = document.querySelector("table");
tab.innerHTML = "";
for (var obj of death_row) {
var height = obj.height || "0' 0\"";
var row = `<tr><td>${obj.first_name}</td>
<td>${obj.last_name}</td>
<td>${obj.age_at_execution}</td>
<td>${((obj.weight)/2.2046).toFixed(1)}</td>
<td>${(((Number(height[0])*12*2.54) + (Number(height[3])*2.54))/100).toFixed(2)}</td></tr>`;
tab.innerHTML += row;
}
};
Using a temporary variable var height = obj.height || "0' 0\""; which defaults to 0' 0" fixes the crash.
BTW you definitely should read up on functions.

JQuery: Finding a way to name cloned input fields

I'm not the best at using jQuery, but I do require it to be able to make my website user-friendly.
I have several tables involved in my website, and for each the user should be able to add/delete rows. I created a jquery function, with help from stackoverflow, and it successfully added/deleted rows. Now the only problem with this is the names for those input fields is slightly messed up. I would like each input field to be an array: so like name[0] for the first row, name[1] for the second row, etc. I have a bunch of tables all with different inputs, so how would I make jQuery adjust the names accordingly?
My function, doesn't work completely, but I do not know how to go about changing it.
My Jquery function looks like:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
clone.find('select').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount = $(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
I also created a jsFiddle here: https://jsfiddle.net/tareenmj/err73gLL/.
Any help is greatly appreciated.
UPDATE - Partial Working Solution
After help from a lot of users, I was able to create a function which does this:
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function() {
var msg=$(this).attr('name');
var x=parseInt(msg.split('[').pop().split(']').shift());
var test=msg.substr(0,msg.indexOf('['))+"[";
x++;
x=x.toString();
test=test+x+"]";
$(this).attr('name', test);
});
clone.find('select').each(function() {
var msg1=$(this).attr('name');
var x1=parseInt(msg1.split('[').pop().split(']').shift());
var test1=msg1.substr(0,msg1.indexOf('['))+"[";
x1++;
x1=x1.toString();
test1=test1+x1+"]";
$(this).attr('name', test1);
});
tr.after(clone);
});
A working jsFiddle is here: https://jsfiddle.net/tareenmj/amojyjjn/2/
The only problem is that if I do not select any of the options in the select inputs, it doesn't provide me with a value of null, whereas it should. Any tips on fixing this issue?
I think I understand your problem. See if this fiddle works for you...
This is what I did, inside each of the clone.find() functions, I added the following logic...
clone.find('input').each(function(i) {
// extract the number part of the name
number = parseInt($(this).attr('name').substr($(this).attr('name').indexOf("_") + 1));
// increment the number
number += 1;
// extract the name itself (without the row index)
name = $(this).attr('name').substr(0, $(this).attr('name').indexOf('_'));
// add the row index to the string
$(this).attr('name', name + "_" + number);
});
In essence, I separate the name into 2 parts based on the _, the string and the row index. I increment the row index every time the add_row is called.
So each row will have something like the following structure when a row is added...
// row 1
sectionTB1_1
presentationTB1_1
percentageTB1_1
courseTB1_1
sessionTB1_1
reqElecTB1_1
// row 2
sectionTB1_2
presentationTB1_2
percentageTB1_2
courseTB1_2
sessionTB1_2
reqElecTB1_2
// etc.
Let me know if this is what you were looking for.
Full Working Solution for Anyone Who needs it
So after doing loads and loads of research, I found a very simple way on how to do this. Instead of manually adjusting the name of the array, I realised that the clone method will do it automatically for you if you supply an array as the name. So something like name="name[]" will end up working. The brackets without any text has to be there. Explanation can't possible describe the code fully, so here is the JQuery code required for this behaviour to work:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount =
$(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
A fully working JSfiddle is provided here: https://jsfiddle.net/tareenmj/amojyjjn/5/
Just a tip, that you have to be remove the disabled select since this will not pass a value of null.

Creating Dependent Chechboxradio Buttons - jQuery Mobile

I am trying to create several checkboxradio buttons groups in jQuery mobile that depend on a limit checkboxradio button group value. For example if a limit of 6 is selected I want to only allow the user to be able to select up to a total of 6 children based on all of the other checkboxradio button group selected values and disable everything else. When the limit changes I want to update the UI accordingly.
I have the following code in my change event handler whenever any of the checkboxradio buttons are clicks:
function updateUI(element) {
var limit = parseInt($('input[name="Limit_Total"]:checked').val(), 10);
// Children
var childCount = parseInt($('input[name="Child_Total"]:checked').val(), 10);
var secondChildCount = parseInt($('input[name="Second_Child_Total"]:checked').val(), 10);
var thirdChildCount = parseInt($('input[name="Third_Child_Total"]:checked').val(), 10);
var fourthChildCount = parseInt($('input[name="Fourth_Child_Total"]:checked').val(), 10);
var fifthChildCount = parseInt($('input[name="Fifth_Child_Total"]:checked').val(), 10);
// Totals
var totalChildern = childCount + secondChildCount + thirdChildCount + fourthChildCount + fifthChildCount;
// Enable the correct combination of children
$('input[name*="Child_Total"]').not(element).checkboxradio('disable').checkboxradio('refresh');
for (var i = 0; i <= 6; i++) {
if (i <= (limit - totalChildren)) {
$('input[id$="Child_Total_' + i + '"]').not(element).checkboxradio('enable').checkboxradio('refresh');
} else {
$('input[id$="Child_Total_' + i + '"]').not(element).attr('checked', false).checkboxradio('refresh');
}
}
}
I basically want to simulate the behavior illustrated in the image below:
The problem is it doesn't quite give me the behavior I want. It deselects all but the button I select within the group. I am trying to figure out the most efficient way to do this but I am having a hard time. Any suggestions or help would be greatly appreciated!
I have setup the following jsfiddle to demonstrate the UI: http://jsfiddle.net/X8swt/29/
I managed to solve my problem with the following function:
$('div fieldset').each(function() {
// Disable all none checked inputs
$(this).find('input:not(:checked)').checkboxradio().checkboxradio("disable").checkboxradio("refresh");
// Grab the selected input
var selectedElement = $(this).find('input:checked');
// Calculate the remaining children that can be selected
var remaining = (limit - totalChildern);
// Enable all inputs less than the selected input
$.each($(selectedElement).parent().prevAll().find('input'), function() {
$(this).checkboxradio().checkboxradio("enable").checkboxradio("refresh");
});
// Enable up to the remaining boxes past the selected input
$.each($(selectedElement).parent().nextAll().slice(0,remaining).find('input'), function() {
$(this).checkboxradio().checkboxradio("enable").checkboxradio("refresh");
});
});
Please feel free to comment or critique my solution.

PivotTable.js conditionally change color on text

So I'm working with PivotTable.js which has been a great help at work.
Right now though, I'm trying to get a filter going to change the color of cells or font within the cell depending on the value.
For example, if I have an array of dates in my dataset
dates = ["N/A", "4/12/2016", "7/9/2024", "7/9/2024", "4/1/2013"]
I want to make it so any dates before 6/1/2016 to change colors.
I have my data being passed in locally as a variable 'data' if that makes any difference
$(function(){
var derivers = $.pivotUtilities.derivers;
var renderes = $.extend($.pivoUtilities.renderers, $.pivotUtilities.export_renderers);
$("#pivot_table").pivotUI(data, {
derivedAttributes: function(data){
// not sure how to access the css of the element from here
}
rows: [],
cols: ["Name", "Date", "Organization", "Cost"],
renderers: renderers,
rendererName: "Table"
});
});
I've tried going into derivedAttributes, but everything I tried wasn't working.
Any help or brainstorming would be much appreciated on this
So...I actually solved it on my own haha...
One of the great things about PivotTable.js is the flexibility in options and sorting. So I used the onRefresh attribute and fed it this function
onRefresh: function() {
var $labels = $('.pvtRowLabel')
var today = new Date();
var d = today.getDate();
var m = today.getMonth()+1;
var y = today.getFullYear();
var date;
var dateReg = /^\d{1,2}[\/]\d{1,2}[\/]\d{4}$/;
// Goes through each cell with the class '.pvtRowLabel'
for (var i=0; i<$labels.length; i++) {
if ($labels[i].innerHTML.match(dateReg)) {
date = $labels[i].innerHTML.split('/');
if (Number(date[2]) == y) {
if (Number(date[0]) == m) {
if (Number(date[1]) <= d) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
} else if (Number(date[0]) < m) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
} else if (Number(date[2]) < y) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
}
};
},
After that, just use a css selecter to specify the color you want to use
.expired { background-color: #F08080 !important; }
The problem with my solution is that it adds more strain on the browser since it's checking the DOM and adding classes every time the table is refreshed. I'm not sure if there's a way to accomplish this when it's first rendered, so those cells are always going to be labeled as expired when generated.
Here's one solution I found to change the font color of a single row in the table, say row no. 5:
$("#pivot-table").pivotUI(data, {
...
onRefresh: function (config) {
// Show row no.5 as red
$("#pivot-table").find('.pvtVal.row5').css('color', 'red');
},
...
});
I did custom coloring by editing the pivot.min.js file.
You may have to tweak the loop to segregate the data and add required css style in the js file.

DHTMLX Grid filter initialize delay after reset

Strange one, not sure if other code in my application is causing this issue, but here goes.
When I fill a grid with data for the first time, it allows me to use the filters straight away. When I click on my reset button (with text in the filters) to clear the grid and prepare it for the next load, the filters do not work straight away, it seems I have to wait about 5 seconds before the filters will adjust the data. Here's my code, bear in mind, this code runs for both reset button and a search button, meaning that in some scenarios it may run twice before the grid being filled with new data.
Reset Code (called in service):
clearAll: function (ref) {
var gridObj = dhtmlxObjectArray[ref];
if(gridObj){
gridObj.clearAll();
if (gridObj.hdr.rows[1].cells[0].getElementsByTagName("INPUT")[0]) {
gridObj.hdr.rows[1].cells[0].getElementsByTagName("INPUT")[0].checked = 0;
}
$rootScope.$broadcast("cvsGridService_toggleExport_" + ref, true);
for (var i = 0; i < gridObj.getColumnsNum(); i++) {
if (gridObj.getFilterElement(i) != null) {
var filterObj = gridObj.getFilterElement(i);
filterObj.value = "";
}
}
$scope.$evalAsync();
}
$rootScope.$broadcast("cvsGridService_updateGridCount_" + ref);
$rootScope.$broadcast("cvsGridService_updateFilteredCount_" + ref, 0);
}
The for loop is where the filters get set to blank. So I wonder if it has anything to so with that? Any other ideas?
Maybe you aren't clearing the filters properly? This is how I do it and it works fine:
for (var i=0; i<grid.filters.length; i++){
grid.filters[i][0].value="";
grid.filters[i][0].old_value="";
}
grid.filterByAll();

Categories