Develop Reference

how to toggle the row using angular8

i have multiple rows, if i open one row then i will not be able to toggle it, i mean it wont be closed unless the other row is clicked for viewing the inside data.
I must be able to toggle rows if i have not done anychanges to form, incase if i have made changes to that form, it must show me a confirmation message as it is showing currently.
DEMO:
DEMO
TS:
editEo(eo,index) {
if(this.eoInfoForm.dirty) {
this.confirmationDialogService.confirm('Please confirm..', 'Do you really want to save changes ?')
.then((confirmed) => {
let openedIndex = this.eoList.findIndex(obj => obj.OpenCloseStatus === true);
confirmed ? this.OpenCloseEvent(eo,openedIndex):this.OpenCloseEvent(eo,index);
if(confirmed){
console.log("works")
}
})
.catch(() => console.log('User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)'));
}else {
// this.eoDetailsList = previous;
eo.isCollapse = !eo.isCollapse
this.OpenCloseEvent(eo,index);
}
}
HTML:
+

Just replace the line:
this.eoList[objIndex]['OpenCloseStatus'] = true;
with:
this.eoList[objIndex]['OpenCloseStatus'] = !this.eoList[objIndex]['OpenCloseStatus'];

Having Button not run Function With Empty Input Field

So I have a button that whenever clicked appends whatever the user entered below the input field. I want to make it so when clicked with an empty field nothing appends (essentially the function does not run).
Here is my code:
var ingrCount = 0
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
var ingredientSpace = $("<p>");
ingredientSpace.attr("id", "ingredient-" + ingrCount);
ingredientSpace.append(" " + ingredientInput);
var ingrClose = $("<button>");
ingrClose.attr("data-ingr", ingrCount);
ingrClose.addClass("deleteBox");
ingrClose.append("✖︎");
// Append the button to the to do item
ingredientSpace = ingredientSpace.prepend(ingrClose);
// Add the button and ingredient to the div
$("#listOfIngr").append(ingredientSpace);
// Clear the textbox when done
$("#ingredients").val("");
// Add to the ingredient list
ingrCount++;
if (ingredientInput === "") {
}
});
So I wanted to create an if statement saying when the input is blank then the function does not run. I think I may need to move that out of the on click function though. For the if statement I added a disabled attribute and then removed it when the input box contains something. But that turns the button another color and is not the functionality I want. Any ideas I can test out would help. If you need any more information please ask.

If you're testing if ingredientInput is empty, can you just return from within the click event?
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if(ingredientInput === '') { return; }
// rest of code

Simply use :
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if (ingredientInput.length == 0) {
return false;
}
// ..... your code

Page should not refresh when I click on a checkbox in JavaScript

My page is refreshing every time I click on a check-box. I am using JavaScript as follows:
input.setOnkeypress("if (event.keyCode == 13) {document.getElementById('search_report_form:search_button').onclick(); return true}");
final class GroupsSelector extends BaseRenderablePanel<GroupsSelector> {
private GroupsSelector group(LabourInputReportCriteria.Level level) {
HtmlSelectBooleanCheckbox box = new HtmlSelectBooleanCheckbox();
boolean isSelected = selections.isGroupSelected(level);
box.setSelected(isSelected);
// box.setDisabled(isDaySelectedOnFirst(level));
box.setId("groupBy" + level.getClass().getSimpleName());
box.setOnclick("submit()");
box.addValueChangeListener(u.addExpressionValueChangeListener("#{reportSearchCriteriaModel.groupBy}"));
HtmlOutputText labelComponent = new HtmlOutputText();
labelComponent.setValue(getGroupSelectionValue(level));
tr().td();
html(box);
html(" ");
html(labelComponent);
endTd().endTr();
return this;
}
Is there any way to avoid refreshing of my page each-time I click on a check box?
Please help.
Thanks,
Shruthi

JavaScript confirm box...revert change on cancel

I have a drop down box as shown :
When I change the subject, the alert box shown below appears:
Code :
$("#createquiz_subject").bind("change", (function() {
if(quiz.length !== 0){
var r = confirm("The questions selected will be cleared");
if (r === true) {
$("#leftValues").empty();
} else {
}
}
}));
If I click on OK, then the topic and lesson changes. The same happens when I click on cancel.
When the user clicks on cancel, I want the subject to remain the same which was present before changing it.
How do I carry out this functionality.

You can work around this by first remembering the currently selected section and then manually reverting to it.
var subject = $('#creatquiz_subject');
var currentSubj = subject.val();
subject.bind("change", (function() {
if (!quiz.length) { return; } // Better to just short-circuit here?
if (confirm("The questions selected will be cleared")) {
$("#leftValues").empty();
currentSubj = subject.val(); // Update the current subject var
} else {
subject.val(currentSubj); // Reset to current subject
}
}));

Only one way . Pseudocode is :
<script>
var lastvalue = null;
</script>
<select .... onmousedown="lastvalue = this.index">
....
</select>
oncancel
select.index = lastvalue
tweak the code as per your implementation and jquery used(if used)

Phonegap - Determine exact element active

I need to change the back button functionality of my phonegap project, which I've succeeded in doing without any problem. The only issue now, is that I need to further change the functionality based on if the user has a certain field selected.
Basically, if the user has clicked in a field with the id of "date-selector1", I need to completely disable the back button.
I was attempting to use document.activeElement, but it only returns the type of the element (input in this case), but I still want the functionality to work when they are in a general input, but not when they are in an input of a specific id.
EDIT
I tried all of the suggestions below, and have ended up with the following code, but still no success.
function pluginDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
var sElement = document.activeElement;
var isBadElement = false;
var eList = ['procedure-date', 'immunization-date', 'lab-test-done', 'condition-onset', 'condition-resolution', 'medication-start-date', 'medication-stop-date', 'reaction-date'];
console.log("[[ACTIVE ELEMENT: --> " + document.activeElement + "]]");
for (var i = 0;i < eList.length - 1;i++) {
if (sElement == $(eList[i])[0]) {
isBadElement = true;
}
}
if (isBadElement) {
console.log('Back button not allowed here');
} else if ($.mobile.activePage.is('#main') || $.mobile.activePage.is('#family') || $.mobile.activePage.is('#login')) {
navigator.app.exitApp();
} else {
navigator.app.backHistory();
}
}

if you're listening for the back button you can add this if statement:
if (document.activeElement == $("#date-selector1")[0]) {
/*disable button here, return false etc...*/
}
or even better (Thanks to Jonathan Sampson)
if (document.activeElement.id === "date-selector1") {
/*disable button here, return false etc...*/
}

You can have a flag set when a user clicks on a field or you can have a click event (or any other type of event) when a user clicks on the field that should disable the back button.
From the documentation it looks like for the specific page that the backbuton is conditional on you can drop back-btn=true removing that back button.
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
If you need complex conditional functionality you can just create your own button in the header or footer, style it using jquery-mobile widgets and implement your own click functionality.