I am updating a variable with a splice of an existing array inside of an if statement which should then run my loop only on the updated array, however I keep getting a cannot read property 'replace' of undefined on my values array. I am only getting this error because I have to input the value plus one array index as I need the upper of the two value ranges. (values[i + 1].replace(',', ''). Any ideas why the + 1 is causing the replace to see values as undefined? Thanks in advance for any help possible!
dropDown = function (arg) {
if ($('select[name="est_property_value"]').length != 0) {
var values = ["0", "60,000", "85,000", "90,000", "95,000", "100,000", "105,000", "110,000", "115,000", "120,000", "125,000", "130,000", "135,000", "140,000", "145,000", "150,000", "155,000", "160,000", "165,000", "170,000", "175,000", "180,000", "185,000", "190,000", "195,000", "200,000", "210,000", "220,000", "230,000", "240,000", "250,000", "260,000", "270,000", "280,000", "290,000", "300,000", "310,000", "320,000", "330,000", "340,000", "350,000", "360,000", "370,000", "380,000", "390,000", "400,000", "420,000", "440,000", "460,000", "480,000", "500,000", "520,000", "540,000", "560,000", "580,000", "600,000", "620,000", "640,000", "660,000", "680,000", "700,000", "720,000", "740,000", "760,000", "780,000", "800,000", "820,000", "840,000", "860,000", "880,000", "900,000", "920,000", "940,000", "960,000", "980,000", "1,000,000", "1,500,000"],
anchor = $('select[name="est_property_value"]').val();
// default arg loads larger ltv on page load
if (arg === 'default') {
values = values.splice(0, 18);
}
console.log(values);
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + values[i + 1].replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + values[i + 1] + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}
}
return;
}
As you mentioned in question, i + 1 make that problem. because it does not exists in your array. You can use a condition in for loop so when the next element exists, Use that. And when You get to the last element of array, use 0 for example.
Change your for loop to this
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + (values[i + 1] ? values[i + 1] : '0').replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + (values[i + 1] ? values[i + 1] : '0') + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}
I am using angular-treeview directive. Here , It is taking some time to load the tree, so I want to show a spinner for that time. So, I want to define a variable in directive and that will be used in the view so that I can show a spinner.
**angular-treeview.js**
(function ( angular ) {
'use strict';
angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile) {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//node class
var nodeClass = attrs.nodeClass || 'type';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//search by label
var searchQuery = attrs.searchQuery || '';
//function for highlighting search text
var searchHighlightFunction = attrs.searchHighlightFunction ||
function (content, text) {
return content
};
//css class to be added for highlighting
var searchHighlightClassName = attrs.searchHighlightClassName || '';
//filter to be used with search query
var searchFilter = attrs.searchFilter || '';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '| ' + searchFilter + ':' + searchQuery + '" data-ng-init="node.collapsed=true">' +
'<i class="collapsed {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="expanded {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="normal {{node.' + nodeClass + '}}" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
'<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)" ' +
'ng-bind-html="' + searchHighlightFunction + '(node.' + nodeLabel + ', ' + searchQuery + ', \'' + searchHighlightClassName + '\', true)"></span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren +
'" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children="' + nodeChildren + '"' +
' data-node-class="' + nodeClass + '" data-search-query="' + searchQuery + '" data-search-highlight-function="' + searchHighlightFunction + '"' +
' data-search-highlight-class-name="' + searchHighlightClassName + '" data-search-filter="' + searchFilter + '"></div>' +
'</li>' +
'</ul>';
//check tree id, tree model
if( treeId && treeModel ) {
/*
* to expand or collapse nodes on search text changes
*/
scope.$watch(searchQuery, function (newVal, oldVal) {
var node = scope.node;
if (newVal) {
if (newVal.length > 0) {
if (node) {
if ((node[nodeChildren] && node[nodeChildren].length)
|| (node[nodeChildren] && node[nodeChildren].length)) {
node.collapsed = false;
}
}
}
} else {
if (node && ((node[nodeChildren] && node[nodeChildren].length)
|| (node[nodeChildren] && node[nodeChildren].length))) {
node.collapsed = (scope[treeId].expandedNodes.indexOf(node[nodeLabel]) < 0);
}
}
});
//root node
if( attrs.angularTreeview ) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//this is where we are storing nodes by user to distinguish between
// those expanded by user from those done for showing search results
scope[treeId].expandedNodes = [];
scope.$watch(treeModel, function(newVal, oldVal) {
if (newVal) {
scope[treeId].expandedNodes = [];
}
});
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){
var expandedNodesIndex;
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
expandedNodesIndex = scope[treeId].expandedNodes.indexOf(selectedNode[nodeLabel]);
if (expandedNodesIndex > -1) {
if (selectedNode.collapsed) {
scope[treeId].expandedNodes.splice(expandedNodesIndex, 1);
}
} else {
if (!selectedNode.collapsed) {
scope[treeId].expandedNodes.push(selectedNode[nodeLabel]);
}
}
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){
//remove highlight from previous node
if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append( $compile( template )( scope ) );
}
}
};
}]);
})( angular );
My html is -
<div data-angular-treeview="true" data-tree-id="Treevalue"
data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
</div>
So, How to define a variable in this directive and use it in the scope ?
Looking through the code, it may be as simple as adding HTML inside the div with data-tree-view on it. That HTML will be wiped as part of the tree view directive, so anything you add in there (like a spinner) will be displayed until the directive finishes.
Edit:
Add an image inside the tree view div. This HTML will be cleared, so it will only show while it's loading.
<div data-angular-treeview="true" data-tree-id="Treevalue"
data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
<img src="spinner.gif">
</div>
I am trying different ways to keep the table styling when I print a data table. I am well aware that data tables currently strips all table styling except the main table class. I have began trying a few different things and modifying the buttons.print.js file in order to achieve this.
var a = c.buttons.exportData(d.exportOptions),
k = function (b, a) {
for (var c = '<tr class="' + (this).className + '">', d = 0, e = b.length; d < e; d++) c += "<" + a + ">" + b[d] + "</" + a + ">";
return c + "</tr>"
},
This returns as undefined for the classes...has anyone had any luck out there...or have any tips or examples of what I am trying to achieve?
Also here is the link for the complete buttons.print.js file that I am working with: LINK
Myself and my colleague figured this out for anyone that would like to retain classes/styling for the tables when they are trying to print...
var a = c.buttons.exportData(d.exportOptions),
counter = [];
k = function (b, a) {
if(a != 'th') {
counter.push(a);
}
for (var c = "<tr class=" + $('tr:nth-child(' + counter.length + ')').attr('class') + ">", d = 0, e = b.length; d < e; d++) c += "<" + a + ">" + b[d] + "</" + a + ">";
return c + "</tr>"
},
One thing to note is that this will only work correctly if one data table is on the screen...still working out a way to support multiple tables correctly...