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";
}
});
}
Related
I have an api 'rest/latest/testruns/16543558' the id is test run ids. I want to update a call with different ids in one shot . I have tried with $promise.all(). Its working fine if I give an individual ID but if I give more than one id its giving error
With single ID Working FINE :
var ids = ['16611544']; //'16611345','16611347'
$scope.updateTestRun = function(data) {
data.showedit = true;
$scope.label = 'Save';
var updateform = {};
var updateArr = [];
for (var i = 0; i < data.length; i++) {
var testrunid = data[i].data.data.id;
var updatedata = data[i].data.data.fields;
updateform['fields'] = data[i].data.data.fields;
updateform.fields['duration'] = 1000;
delete updateform.fields['executionDate'];
for (var j = 0; j < data[i].data.data.fields.testRunSteps.length; j++) {
data[i].data.data.fields.testRunSteps[j].status = data[i].data.data.fields.testRunStatus;
}
updateArr.push($http.put("rest/latest/testruns/" + testrunid, updateform))
j = 0;
$scope.loader = true;
}
}
u can use $q.all to send multiple request on one shot
var fullArray = [];
for (var i = 0; i < data.length; i++) {
var testrunid = data[i].data.data.id;
var updatedata = data[i].data.data.fields;
updateform['fields'] = data[i].data.data.fields;
updateform.fields['duration'] = 1000;
delete updateform.fields['executionDate'];
for (var j = 0; j < data[i].data.data.fields.testRunSteps.length; j++) {
data[i].data.data.fields.testRunSteps[j].status = data[i].data.data.fields.testRunStatus;
}
j = 0;
$scope.loader = true;
// push all request to array
fullArray.push($http.put("rest/latest/testruns/" + testrunid, updateform))
}
$q.all(fullArray).then(function(values) {
//resoponse
});
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);
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.
I've 3 movieclip on stage which is mc1,mc2,mc3
at first they are alpha=0
What I want is when i click on revealBtn, 1 of them will show up as alpha=1.
But with my code below, sometimes I need to click about 5 times or more only can make all those mc show up.
Is there any solution for what I wanted? I've try splice but it's still not working well.
var mcArray:Array = [mc1,mc2,mc3];
for (var j:int = 0; j < mcArray.length; j++)
{
mcArray[j].alpha = 0;
}
revealBtn.buttonMode = true;
revealBtn.useHandCursor = false;
revealBtn.addEventListener(MouseEvent.CLICK, revealClick);
function revealClick(event:MouseEvent):void
{
var i:Number = Math.floor(Math.random() * mcArray.length);
var movieClipToEdit:MovieClip = mcArray[i] as MovieClip;
movieClipToEdit.alpha = 1;
}
Here's one of the many possible solutions. It destroys the initial array though. If you don't want to change the initial array, the rest depends on what you actually want to achieve.
var invisibleList:Array = [mc1,mc2,mc3];
for (var j:int = 0; j < invisibleList.length; j++)
{
invisibleList[j].alpha = 0;
}
revealBtn.buttonMode = true;
revealBtn.useHandCursor = false;
revealBtn.addEventListener(MouseEvent.CLICK, revealClick);
function revealClick(event:MouseEvent):void
{
if (invisibleList.length == 0) {
return;
}
var i:Number = Math.floor(Math.random() * invisibleList.length);
var movieClipToEdit:MovieClip = invisibleList[i] as MovieClip;
invisibleList.splice(i, 1);
movieClipToEdit.alpha = 1;
}
Make a second array to use as your selection source. Every time you pick an item, Splice it from the second array. Also, since all your items are MovieClips you should use a Vector instead.
var mcVector:Vector.<MovieClip> = [mc1,mc2,mc3];
var vector2:Vector.<MovieClip> = mcVector.Slice(0); // This just copies the Vector
for (var j:int = 0; j < mcVector.length; j++)
{
mcVector[j].alpha = 0;
}
revealBtn.buttonMode = true;
revealBtn.useHandCursor = false;
revealBtn.addEventListener(MouseEvent.CLICK, revealClick);
function revealClick(event:MouseEvent):void
{
var i:Number = Math.floor(Math.random() * mcVector.length);
// Retrieves and deletes the item in one step:
var movieClipToEdit:MovieClip = vector2.Splice(i, 1);
movieClipToEdit.alpha = 1;
}