JavaScript in LiveCycle - Presence of Objects - javascript

JavaScript Geniuses,
The desired result is for "recommend" and "authorization" to show if either of the two checkboxes are checked.
/*For Checkbox1: Fund1 */
if (this.rawValue == "1") {
this.resolveNode("fund1").presence = "visible";
this.resolveNode("recommend").presence = "visible";
this.resolveNode("authorization").presence = "visible";
} else {
this.resolveNode("fund1").presence = "hidden";
this.resolveNode("recommend").presence = "hidden";
this.resolveNode("authorization").presence = "hidden";
}
/*For Checkbox2 - Fund2: */
if (this.rawValue == "1") {
this.resolveNode("fund2").presence = "visible";
this.resolveNode("recommend").presence = "visible";
this.resolveNode("authorization").presence = "visible";
} else {
this.resolveNode("fund2").presence = "hidden";
this.resolveNode("recommend").presence = "hidden";
this.resolveNode("authorization").presence = "hidden";
}
If I check one checkbox, the required "recommend" and "authorization" objects are visible. If I check both checkboxes then uncheck one, the "recommend" and "authorization" objects hide. There are checkboxes for other funds that have a different approval requirement on the form.
What causes the issue? What resolves it? What is a cleaner way to write the code? All guidance is appreciated.

Create Script Object to store all your util functions and give it a concrate name.
There you should create functions for making an object visible and invisible. This is not mandatory, but such structure will reduce the number of stupid mistakes (like missing some letters in the word "visible" and so on):
function setVisible(field){
if (field === null) {
//do what ever you want with an error
}
if (field === undefined) {
//do what ever you want with an error
}
if (field instanceof Array) {
//do what ever you want with an error
}
field.presence = "visible";
}
function setInvisible(field){
if (field === null) {
//do what ever you want with an error
}
if (field === undefined) {
//do what ever you want with an error
}
if (field instanceof Array) {
//do what ever you want with an error
}
field.presence = "invisible";
}
Create fucntions for setting needed states for authorization and recomended objects:
function setStateAuth(){
if(Page1.CheckBox1.rawValue == "1" || Page1.CheckBox2.rawValue == "1"){
setVisible(Page1.Authorization);
}else{
setInvisible(Page1.Authorization);
}
}
function setStateRec(){
if(Page1.CheckBox1.rawValue == "1" || Page1.CheckBox2.rawValue == "1"){
setVisible(Page1.Recommend);
}else{
setInvisible(Page1.Recommend);
}
}
In the click event of your CheckBox1 call methods for setting auth. and rec. state. And also set visibility for Fund1 object.
Lib.setStateAuth();
Lib.setStateRec();
if(this.rawValue == "1"){
Lib.setVisible(Fund1);
}else{
Lib.setInvisible(Fund1);
}
In the click event of your CheckBox2 call methods for setting auth. and rec. state. And also set visibility for Fund2 object.
Lib.setStateAuth();
Lib.setStateRec();
if(this.rawValue == "1"){
Lib.setVisible(Fund2);
}else{
Lib.setInvisible(Fund2);
}
Note, that working with objects using "resolveNode" method is not recommended (due to the performance issues). So, if you have a concrate, not dynamic number of pages, it is better to name then all and refer to them using their names. Like it is done in a sample, i've made
Here you can get a sample PDF

Related

Is there anything that I am missing?

I created a checkbox and apply these attributes
let box = document.createElement('input');
box.setAttribute("type","checkbox");
box.setAttribute("id","box");
box.setAttribute("onclick","checkBox(this)");
This is the function
function checkBox(para2){
let condition = box.checked;
if (condition === true) {
para2.parentNode.style.opacity = '0.5'
para2.parentNode.style.textDecoration = "line-through"
}
if (condition === false) {
para2.parentNode.style.opacity = "1";
para2.parentNode.style.textDecoration = "none";
}
}
When I click on first checkbox, style works. But when I click on other children it doesn't work.
In your checkBox function,
let condition = box.checked;
This line specifically checks whether the checkbox "box" is checked. Since you are having multiple checkboxes, I believe you may have box2, box3, etc.
As a solution, you can introduce a "name" attribute to your checkboxes and use a query selector to identify which ones are checked.
let condition = document.querySelectorAll('input[name="color"]');
condition.forEach((cb) => {
if (cb.checked === true) {
// your code
} else {
// your code
}
});
Note: there might be many other possible ways to do this. This is the one that came to my mind right now

CSS style not reverting using JavaScript

I am trying to set a CSS property back and forth using JavaScript depending on its value.
The class name menu is set to be hidden on page load. When I call the function to set it to visible it is successful. However, when I call it again to change it back it doesn't set it to hidden. It is seen as always set to visible.
let menu = document.querySelector('.menu');
if (menu.style.visibility = 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility = 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}
I am confused as to why it can do the first but not the second. I have tried using a else if condition:
else if (menu.style.visibility = 'visible')
I also tried using the setAttribute method but it's always the same outcome.
I need to be able to switch back and forth.
In JavaScript by using = you assign a value to something BUT if you use == you are checking if something is equal to something else.
let menu = document.querySelector('.menu');
if (menu.style.visibility == 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility = 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}
Kindly use below condition
if (menu.style.visibility == 'hidden') //change ==
Your conditional isn't valid. You're actually setting the value in the if statement.
if (menu.style.visibility = 'hidden') // this sets the value
It should be this:
if (menu.style.visibility == 'hidden') // this compares the value
This code will toggle the visibility of a div on your page.
function togglediv() {
var div = document.getElementById("menu");
div.style.display = div.style.display == "none" ? "block" : "none";
}
<button onclick="togglediv('menu')">Toggle div</button>
<div id="menu">div</div>
The error is in your if statement. So if you change the single equality to a double equal sign: ==, your code should work:
like:
if (menu.style.visibility == 'hidden')
Your syntax for comparing is wrong you need to use == while comparing any field in javascript so just do :
if (menu.style.visibility == 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility == 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}

How to specify whether event listeners can be called or not depending on a variable?

I have a variable which is assigned a value dependent on a value in a table in a db. How can I use this variable to specify whether certain event listeners are active and to specify whether particular links are shown.
For instance I have tried but did not successfully work:
var accessLevel = 0;
var userLoggedIn = "<?php Print($userLoggedIn); ?>";
var userlevel = "<?php Print($userLevel); ?>";
function map_initialize()
{
////CONCERNING THIS PART#########///
if (accessLevel >= 2){ //WHEN LOADED THIS IS NOT REGISTERING ANY RIGHT CLICK EVEN WHEN accessLevel is over 2!
google.maps.event.addListener(map, 'rightclick', function(event) {
//Some function that I don't want to run if accessLevel is <2
});
}
}
////THIS WORKS FINE BELOW JUST PROVIDING IT
if (userLoggedIn == true) {
if (userlevel == "0") {
accessLevel = 0;
console.log(accessLevel);
}
else if (userlevel == "1") {
accessLevel = 1;
console.log(accessLevel);
}
else if (userlevel == "2"){
accessLevel = 2;
console.log(accessLevel);
}
else if (userlevel == "3"){
accessLevel = 3;
console.log(accessLevel);
}
else if (userlevel == "4"){
accessLevel = 4;
console.log(accessLevel);
}
}
I don't know if this will make sense, but basically I want to be able filter certain available functions depending on what accessLevel's value is. Is this possible (specifically to use with google maps elements as well), and how can I do it.
You should change )}; to }); in the thirteenth line of the sample code.
Also change userLoggedIn == true to something like:
userLoggedIn.toLowerCase().trim() === "true"
Assuming possible values of $userLevel are TRUE, FALSE, true, false.
Solved it, All I had to do was swap the location of the if statement so that it was within the click event listener as so.
function map_initialize()
{
google.maps.event.addListener(map, 'rightclick', function(event) {
if (accessLevel >= 2){
//Some function that I don't want to run if accessLevel is <2
}
});
}

Checkbox is still showing true when unchecked jQuery

Ok, so I'm currently having an issue with the $.prop('checked') functionality. When unchecking some of my boxes, and using this function to read the checkboxes, all of them are still showing up as true when some of them should be showing up as unchecked. The part of the function that checks this is below, but some background: I'm using a table with input values in each td element and due to the way it's written, I'm having to gather all the info / validate / and check by using a td.each() function.
$("td", ele).each(function(idx){
var before = $('.e_content', this),
b_name = $('input:last[type!="hidden"], textarea:last, checkbox:last, select:last', this).attr('name'),
b_val = $('input[name="'+b_name+'"], select:last, textarea[name="'+b_name+'"]', this).val(),
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
after = function(){
before.hide();
$(ele).css("background", color);
$('td.edit', ele).show();
$('td.save', ele).hide();
$('span', this)
// WORKING ON TAKING THE VALUE OF THE .e_content FORM AND REPLACING THE SPAN WITH IT
.html(function(){
console.log(b_name+' : '+b_chx);
if(b_val != undefined && b_val != ''){
if(b_name == 'StageType'){
if(b_val == 1){ return 'Voice'; }
if(b_val == 2){ return 'Text'; }
if(b_val == 3){ return 'Email'; }
}
else if(b_name == 'qtrhour') {
return $('select', before).find(':selected').text();
}
else if(b_chx == true) { return '&check;'; }
else if(b_chx == false) { return '&cross;'; }
else {
if(before.find('input:last').prop('type') != 'checkbox')
return b_val.replace(/\n\r?/g, '<br />');
}
}
})
.show();
};
$(this).html(after);
});
The problem is with this line:
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
It's coming up always as true even when the checkbox has been unchecked before the save button is hit. This function fires on the .save click event. Hopefully this is enough to determine what might be going wrong.
You can try the following,
$('input:checkbox[name="'+b_name+'"]', this).is(':checked');
To avoid issues regarding to checking or unchecking checkboxes, I normally use jQuery.attr()
$(...).attr('checked')
$(...).attr('checked','checked')
$(...).removeAttr('checked')
Also sometimes I check or uncheck them binding or triggering a .click() function.

Javascript identifying enabled drop down select type

I have a form with multiple types of entry fields with some complicated validation that disables/enables various input types based on what the user enters or selects. I am using JS to check the different enabled input types and if they are empty it keeps a running total. Everytime an enabled input is modified the CheckForm function runs.
However, the problem that I am having is identifying which drop down select types are enabled, and if empty then they need to be counted in the alt_count variable. If you look at the code below please note that check boxes and normal text entry types are working fine, it is only a problem with the select-one type.
Code:
function CheckForm() {
var alt_count = 0;
var field_list = '';
$('tr#BaseTab td input:not(:button):not(:disabled), tr#BaseTab td select:not(:disabled)').each(function () {
if ($(this).attr('type') === 'checkbox') {
var temp_obj = $(this);
var temp_name = $(this).attr('name');
if ($('input[name=' + temp_name + ']:checked').length === 0) {
alt_count += 1;
}
} else if ($(this).attr('type') === 'select-one') {
if ($(this).attr("selectedIndex") === 0) {
alt_count += 1;
}
} else {
if ($(this).val() === '') {
alt_count += 1;
}
}
});
Thanks for any help offered.
The select element will not actually have the attribute type="select-one". However, the DOM element will have a .type property that allows you to check if you are dealing with a select-one or a select-multiple. So, instead of checking the 'type' attribute, check the property like this:
else if ($(this)[0].type === 'select-one') {

Categories

Resources