I have a piece of code to select/deselect all Dojo checkboxes using a single master checkbox (which acts as a toggle) that works fine on firefox but doesn't on IE8. I tried hard to find the issue but was clueless, can anybody help. Im attaching the code below:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.ready(function() {
var checkboxes = [];
dojo.query('#waferCheck_cb input[type=checkbox]').forEach(function(node, index, arr){
checkboxes.push(arr[index].id);
var handle = dojo.connect(dijit.byId(arr[index].id), "onchange", function(evt){
var cbClicked = evt.target.id;
var cbStatus = dijit.byId(cbClicked).get("checked");
setCBSelection(checkboxes,cbClicked,cbStatus );
dojo.disconnect(handle);
});
});
});
function setCBSelection(checkboxes,cb_Clicked, cb_Status) {
var len = checkboxes.length;
if(len > 0) {
// get index of the checkbox clicked
var cb_pos = 0;
for(var i = 0; i < len; i++) {
if(cb_Clicked == checkboxes[i]) {
cb_pos = i;
break;
}
}
// If Select All checkbox clicked, set the other checboxes accordingly
if(cb_pos == 0) {
for(var i = 1; i < len; i++) {
dijit.byId(checkboxes[i]).set("checked", cb_Status);
}
} else {
// If any other checkbox is clicked, set the Select All accordingly
var allCBSameStatus = true;
for(var i = 1; i < len; i++) {
var curCBStatus = dijit.byId(checkboxes[i]).get("checked");
if(curCBStatus != cb_Status) {
allCBSameStatus = false;
break;
};
}
if(allCBSameStatus){
dijit.byId(checkboxes[0]).set("checked", cb_Status)
}else{
if(cb_Status == false) {
dijit.byId(checkboxes[0]).set("checked", cb_Status)
}
}
}
}
}
</script>
I believe IE8 doesn't like missing semicolons. I see 2 lines that are missing semicolons.
dijit.byId(checkboxes[0]).set("checked", cb_Status)
Have you tried to define function setCBSelection(...) before dojo.ready(..) (see below)? Maybe this helps as it is used before it was defined? If that doesn't help, it may be useful if you post some kind of error-message IE might throw...
dojo.require("dojo.parser");
function setCBSelection(checkboxes,cb_Clicked, cb_Status) {
var len = checkboxes.length;
if(len > 0) {
// get index of the checkbox clicked
var cb_pos = 0;
for(var i = 0; i < len; i++) {
if(cb_Clicked == checkboxes[i]) {
cb_pos = i;
break;
}
}
// If Select All checkbox clicked, set the other checboxes accordingly
if(cb_pos === 0) {
for(i = 1; i < len; i++) {
dijit.byId(checkboxes[i]).set("checked", cb_Status);
}
} else {
// If any other checkbox is clicked, set the Select All accordingly
var allCBSameStatus = true;
for(i = 1; i < len; i++) {
var curCBStatus = dijit.byId(checkboxes[i]).get("checked");
if(curCBStatus != cb_Status) {
allCBSameStatus = false;
break;
}
}
if(allCBSameStatus){
dijit.byId(checkboxes[0]).set("checked", cb_Status);
}else{
if(cb_Status === false) {
dijit.byId(checkboxes[0]).set("checked", cb_Status);
}
}
}
}
}
dojo.ready(function() {
var checkboxes = [];
dojo.query('#waferCheck_cb input[type=checkbox]').forEach(function(node, index, arr){
checkboxes.push(arr[index].id);
var handle = dojo.connect(dijit.byId(arr[index].id), "onchange", function(evt){
var cbClicked = evt.target.id;
var cbStatus = dijit.byId(cbClicked).get("checked");
setCBSelection(checkboxes,cbClicked,cbStatus );
dojo.disconnect(handle);
});
});
});
Btw: you should always use === to compare with 0 or false... You can use jsFiddle to let JSLint check your code which detacts many issues one doesn't see in the first place. Hope i could help you.
Related
I'm making a web editor application using CefSharp WinForms library, but I couldn't find a way to replace text from CefSharp API.
There is a find method in WebBrowserExtensions but no replace method.
Question 1:
Does anyone know where replacing text method is in CefSharp?
Or there is no way to replace text in CefSharp? If yes, I need to find a detour for it.
Question 2:
There are yellow blocks marked found words when I try Find method, but those blocks are not a part of selection range of window object in HTML. Are those blocks made by native not web browser?
Answer:
I made "find and replace" function by myself using javascript, so if someone tries to do something like me then you can use below codes:
var lastsearchedNodeIndex = -1;
var lastSearchedTextIndex = -1;
var lastRange = null;
function getTextLengthFromStartTo(targetNodeIndex) {
var childNodes = editor.childNodes;
var textLength = 0;
if (targetNodeIndex >= childNodes.length) {
return editor.textContent.length;
}
for (var i = 0; i < targetNodeIndex; i++) {
if (childNodes[i].textContent != null) {
textLength += childNodes[i].textContent.length;
}
}
return textLength;
}
function getCurrentCaretIndex() {
var currentCaretIndex = 0;
var doc = editor.ownerDocument || editor.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(editor);
preCaretRange.setEnd(range.endContainer, range.endOffset);
currentCaretIndex = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(editor);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
currentCaretIndex = preCaretTextRange.text.length;
}
return currentCaretIndex;
}
function getCurrentNodeIndexAtCaret(caretIndex) {
if (caretIndex == 0) {
return 0;
}
var currentNodeIndex = -1;
for (var i = 0; i < editor.childNodes.length; i++) {
var frontTextLength = getTextLengthFromStartTo(i);
var backTextLength = getTextLengthFromStartTo(i + 1);
if (caretIndex > frontTextLength && caretIndex <= backTextLength) {
currentNodeIndex = i;
break;
}
}
return currentNodeIndex;
}
function getCurrentTextIndexInNodexAtCaret(nodeIndex, caretIndex) {
var textLength = getTextLengthFromStartTo(nodeIndex);
var textIndex = caretIndex - textLength;
return (textIndex < 0) ? 0 : textIndex;
}
function clearSelection() {
if (window.getSelection().rangeCount > 0) {
if (lastRange != null) {
window.getSelection().removeAllRanges();
lastRange.collapse(true);
window.getSelection().addRange(lastRange);
}
}
}
function getTextNodesIn(node) {
var textNodes = [];
if (node.nodeType == 3) {
textNodes.push(node);
} else {
var children = node.childNodes;
for (var i = 0, len = children.length; i < len; ++i) {
textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
}
}
return textNodes;
}
function setSelectionRange(el, start, end) {
if (document.createRange && window.getSelection) {
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = getTextNodesIn(el);
var foundStart = false;
var charCount = 0, endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++]; ) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i <= textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
lastRange = range;
sel.anchorNode.parentElement.scrollIntoView();
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
}
}
function findText(text, caseSensitive) {
var currentCaretIndex = getCurrentCaretIndex();
clearSelection();
var regex;
if (caseSensitive) {
regex = text;
} else {
regex = new RegExp(text, "gi");
}
var childNodes = editor.childNodes;
var startNodeIndex = getCurrentNodeIndexAtCaret(currentCaretIndex);
var endNodeIndex = childNodes.length;
var startTextIndex = 0;
if (window.getSelection().focusOffset == 1) {
startTextIndex = lastSearchedTextIndex + 1;
} else {
startTextIndex = getCurrentTextIndexInNodexAtCaret(startNodeIndex, currentCaretIndex);
}
var searchedTextIndex = -1;
var searchedNodeIndex = 0;
var searchTargetSentence = null;
var searchLoopCount = 0;
if (currentCaretIndex == editor.textContent.length) {
startNodeIndex = 0;
startTextIndex = 0;
}
do
{
for (var i = startNodeIndex; i < endNodeIndex; i++) {
if (typeof (childNodes[i].textContent) == undefined || childNodes[i].textContent == null) {
startTextIndex = 0;
continue;
}
if (startTextIndex == childNodes[i].textContent.length) {
startTextIndex = 0;
continue;
}
if (startTextIndex > 0) {
searchTargetSentence = childNodes[i].textContent.substring(startTextIndex, childNodes[i].textContent.length);
} else {
searchTargetSentence = childNodes[i].textContent;
}
searchedTextIndex = searchTargetSentence.search(regex);
if (searchedTextIndex > -1) {
searchedTextIndex += startTextIndex;
searchedNodeIndex = i;
break;
}
startTextIndex = 0;
}
if (searchedTextIndex == -1) {
endNodeIndex = startNodeIndex + 1;
startNodeIndex = 0;
searchLoopCount++;
}
} while (searchLoopCount < 2 && searchedTextIndex == -1);
lastsearchedNodeIndex = searchedNodeIndex;
lastSearchedTextIndex = searchedTextIndex;
if (searchedNodeIndex > -1 && searchedTextIndex > -1) {
var textStartIndex = getTextLengthFromStartTo(searchedNodeIndex) + searchedTextIndex;
setSelectionRange(editor, textStartIndex, textStartIndex + text.length);
return true;
} else {
return false;
}
}
function replaceText(textToFind, textToReplace, caseSensitive) {
if (findText(textToFind, caseSensitive) == true) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(textToReplace));
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = textToReplace;
}
return true;
} else {
return false;
}
}
There are no replace text method in CefSharp.
I think you have two options
Implement in javascript/html in the browser (DIY or something
like Tiny)
Manipulating the html from C# using GetSourceAsync and LoadHtml (Documentation)
Second question - I think you may be able to at least read the hits using the FindHandler. Have not tested this myself.
I know there are a few of these questions already on here but I've tried and none of them work unfortunately.
Any help would be much appreciated! All I want is to be able to collapse the other panels when another is opened.
Here is my current js script:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active1");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Without more details I cannot be sure that this would work, but including a loop through all your accordions and doing the opposite of how you open them should do the trick. If you want more help, an example of the CSS and HTML would be necessary.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
for (i = 0; i < acc.length; i++) {
acc[i].classList.remove('active1');
var panel = acc[i].nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
panel.style.maxHeight = null;
}
}
this.classList.add("active1");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
I have this filter, and I have error filtered[i].splice is not a function
.filter('tsFilter', function() {
return function(model, filter) {
var filtered = [];
if (model != null) {
for (var i = 0; i < model.length; i++) {
filtered[i] = model[i];
}
}
for (i = 0; i < filtered.length; i++) {
if (filtered[i].List.length == 0)
filtered[i].splice(i, 1);
}
return filtered;
};
})
Why I have this error? how to solve that?
Here you have to update
for (i = 0; i < filtered.length; i++) {
if (filtered[i].List.length == 0)
filtered.splice(i, 1); //updated
}
Hope this will help you out.
It looks like you want to use:
for (i = 0; i < filtered.length; i++) {
if (filtered[i].List.length == 0)
filtered.splice(i, 1);
}
Although it is not a good idea to remove elements from the array that you are iterating over.
I am trying to search text on table using angular ..I am able to search text in table .But my search works when I press enter or “search button” .Example when I write “Active” it not show the result but when I press enter or press search button it show the output .can we do the like search like autocomplete .Example when I press “a’ it show all item which start from “a” .Then if user write “ac” then show “ac” value ..same like that .when user write “active “ it show rows which have “active” without using search button or enter .can we make add filter so that it works properly ?
here is my code
$scope.searchInvoices = function(evt, queryval) {
$scope.haveNorecordFound = true;
if (typeof queryval != "undefined" && queryval.length === 0 || evt.keyCode === 13 || evt.type === 'click') {
if (typeof queryval == "undefined" || queryval.length === 0) {
console.log("if===")
isfilterOccured = false;
$scope.tasklist_records = $scope.total_tasklist_records;
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
} else {
console.log("esle===")
var recordset = $scope.serachObject;
results = [];
var recordsetLength = recordset.length;
var searchVal = queryval.toLowerCase();
var i, j;
for (i = 0; i < recordsetLength; i++) {
var record = recordset[i].columns;
for (j = 0; j < record.length; j++) {
if (record[j].value != null) {
var invoice = record[j].value.toLowerCase();
if (invoice.indexOf(searchVal) >= 0) {
results.push(recordset[i]);
}
}
}
}
var nameOrPathValues = results.map(function(o) {
var result = {};
o.columns.forEach(function(c) {
result[c.fieldNameOrPath] = c.value;
});
return result;
});
console.log("serach");
console.log(nameOrPathValues);
var objectarray = nameOrPathValues.map(function(o) {
var result = {};
collectNameOrPath.forEach(function(name) {
result[name] = o[name];
});
return result;
});
isfilterOccured = true;
$scope.tasklist_records = objectarray;
if ($scope.tasklist_records.length == 0) {
$scope.haveNorecordFound = false;
} else {
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
}
}
}
};
After debugging in code, I found that you're biding function on either enter button press or search click. That's why it was not working on ng-keyup. Please replace your function from below code.
$scope.searchInvoices = function(evt, queryval) {
console.log(queryval)
$scope.haveNorecordFound = true;
var recordset = $scope.serachObject;
results = [];
var recordsetLength = recordset.length;
var searchVal = queryval.toLowerCase();
var i, j;
for (i = 0; i < recordsetLength; i++) {
var record = recordset[i].columns;
for (j = 0; j < record.length; j++) {
if (record[j].value != null) {
var invoice = record[j].value.toLowerCase();
if (invoice.indexOf(searchVal) >= 0) {
results.push(recordset[i]);
}
}
}
}
var nameOrPathValues = results.map(function(o) {
var result = {};
o.columns.forEach(function(c) {
result[c.fieldNameOrPath] = c.value;
});
return result;
});
console.log("serach");
console.log(nameOrPathValues);
var objectarray = nameOrPathValues.map(function(o) {
var result = {};
collectNameOrPath.forEach(function(name) {
result[name] = o[name];
});
return result;
});
isfilterOccured = true;
$scope.tasklist_records = objectarray;
if ($scope.tasklist_records.length == 0) {
$scope.haveNorecordFound = false;
} else {
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
}
};
Can we call watch expliciltly in the controller?
Requirements:
Currently there are two angular tree structured checkboxes. one is carriergorup and another one is modes. I'm retrieving mode values based on carriergroup list. whenever the carrier group list is updated automatically modes list is updated for this i used watch.
current functionality is like.
Whenever the carriergroup list is updated then only modes list is updated. Suppose there is no change in the carrier group list, but I want to make a call for watch explicitly. Is this possible?
$scope.$watch(
'carrierGroups',
function(carrierGroups) {
alert("in carrier List");
$scope.selectedCarrierList = [];
$scope.isAllChecked = true;
for (var i = 0; i < $scope.carrierGroups.length; i++) {
/*if($scope.carrierGroups[i].checked){
cntGroupChecked = cntGroupChecked + 1;
}*/
for (var j = 0; j < $scope.carrierGroups[i].categories.length; j++) {
if ($scope.carrierGroups[i].categories[j].checked) {
$scope.selectedCarrierList
.push($scope.carrierGroups[i].categories[j]);
}else{
$scope.carrierGroups[i].checked = false;
$scope.isAllChecked = false;
}
}
}
alert("$scope.isModesWatch"+$scope.isModesWatch);
if($scope.isModesWatch){
$scope.modesList = DashboardsDataService.getModesData($scope.selectedCarrierList);
}else{
alert("$scope.filterModesList-->"+JSON.stringify($scope.filterModesList));
$scope.modesList = $scope.filterModesList;
$scope.isModesWatch = true;
}
},
true);
Like below, you can do this..
var myCustomFun = function(carrierGroups) {
alert("in carrier List");
$scope.selectedCarrierList = [];
$scope.isAllChecked = true;
for (var i = 0; i < $scope.carrierGroups.length; i++) {
/*if($scope.carrierGroups[i].checked){
cntGroupChecked = cntGroupChecked + 1;
}*/
for (var j = 0; j < $scope.carrierGroups[i].categories.length; j++) {
if ($scope.carrierGroups[i].categories[j].checked) {
$scope.selectedCarrierList
.push($scope.carrierGroups[i].categories[j]);
}else{
$scope.carrierGroups[i].checked = false;
$scope.isAllChecked = false;
}
}
}
alert("$scope.isModesWatch"+$scope.isModesWatch);
if($scope.isModesWatch){
$scope.modesList = DashboardsDataService.getModesData($scope.selectedCarrierList);
}else{
alert("$scope.filterModesList-->"+JSON.stringify($scope.filterModesList));
$scope.modesList = $scope.filterModesList;
$scope.isModesWatch = true;
}
}
$scope.$watch('carrierGroups',myCustomFun,true);
Now where you want to call custom watch function, you can simply call your function.
myCustomFun(param);