I have the following logic question. I have 3 cascading dropdowns, ddl1, ddl2, ddl3, which call their functions on change events respectively.
When I select ddl1 manually, it sets ddl2, ddl3 and calls ddl1, dd2, dd3 functions on change event.
When I select ddl2 manually it sets ddl3, ddl Automatically and calls dd2,dd3 functions on change events.
Can I use some kind of logic to differentiate that ddl2 was selected manually? Or it is auto selected due to autochange event of ddl1?
I am not able to find answer for this kind of logic.
You can simply use a flag to check this.
Set a flag = false initially. On setting ddl1 set flag = true .
Now ddl2 change event you can check the value of the flag , if it's false it has been selected manually , else by ddl1.
You might need to use multiple flags to do the same for all drop downs.
Do not know if this is the most efficient way , but it can certainly work.
Here is a pseudo code
flag= false
ddl1click()
{
flag = true
do something
}
ddl2change()
{
if(flag)
do things when triggered by ddl1
flag = false
else
do things when in case of manual selection
}
Related
Here, I've three radio group in a single page. But in the entire page I want to select only one radio option. Like if I'm selecting Monday then Tuesday selection should be unchecked automatically. How can I proceed with the logic, below logic is not working as expected.
sample JSON :
{
report:[
{
day:'Monday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Tuesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Wednesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
}
]}
JS code
for(var I=0; I<reports.length; I++){
var radios = document.getElementsByTagName('input')
if(radios[I].type === 'radio' && radios[I].checked){
document.getElementById(radios[I].id).checked = false
}
If you're able to create radio buttons in SurveyJS, you should be able to give the button group a name, so there would be no need for any additional JavaScript. Check out their documentation for an example.
Looks like the sort of nested structure you have for the buttons could be achieved with something like a dynamic panel or cascading conditions in SurveyJS. You should be able to render the available time slots dynamically with "visibleIf" based on the selected day.
I would definitely dig around the documentation of SurveyJS to find a solution there rather than hacking your way around it. But solely as an exercise, the problem in your current code could be that you're selecting a button by ID, which will not work correctly if you have tried to give the same ID to multiple buttons. After all, you already have the target button as radios[I], so you could just use radios[I].checked = false. Or the issue could be that you're unchecking the selected button AFTER the new selection has been made, which might actually uncheck the button you just clicked. Hard to say without additional information, but in any case, looping your inputs based on a value that might be something else than the actual number of inputs (you're using reports.length) is probably not the best idea, since that value might be different from the number of inputs in your form, which would mean that not all of them are included in the loop. Here are a couple of examples of what you could do instead:
// Get all radio buttons
const radioButtons = document.querySelectorAll('input[type="radio"]')
// If you need to uncheck the previously selected one (don't do this if you can avoid it!)
radioButtons.forEach(radioButton => {
// Use a mousedown event instead of click
// This gives you time to uncheck the previous one before the new one gets checked
radioButton.addEventListener('mousedown', () => {
// Get the currently selected button and uncheck it
const currentlySelected = document.querySelector('input[type="radio"]:checked')
if (currentlySelected) currentlySelected.checked = false
})
})
// You can add further options to the querySelector, such as [name]
// This gets the currently selected button in the specified group
const checkedRadioButton = document.querySelector('input[type="radio"][name="group-name"]:checked')
Here's a fiddle demonstrating this sort of "fake" radio button functionality (without a "name" attribute).
You can give all these radio buttons the same name, then one radio only will be checked.
I am using Dojo labels and checkboxes in one of my app inside smarty file. I want to add a certain behavior to uncheck a checkbox, if any other checkbox is checked. I also check if that checkbox is originally checked, it will uncheck the same. (I do not want to use radio button)
Here is my code for one CheckBox:
<input id="form.cs"
data-dojo-type='dijit.form.CheckBox'
type="checkbox"
data-dojo-props="value:'true', type:'checkbox', name:'cs', style:'vertical-align: top'"
onChange="if(dijit.byId('form.cs"').checked)
dijit.byId('form.cs"').set('checked', false);
else
dijit.byId(' form.nl"').set('checked', false);"
/>
The problem with code is when i add curly braces, this is not rendered by smarty engine and throws error.
For example :
onChange="if(dijit.byId('form.cs"').checked) {
dijit.byId('form.cs"').set('checked', false); }
else {
dijit.byId(' form.nl"').set('checked', false);"}
The above code snippet will create a breakdown in the smarty.
I recommend writing your event handler in JavaScript. If you're going to write all your event handlers as attributes you're going to have a lot of problems like code validation, ... .
You could write a loop that actually loops over all checkboxes, setting the value to the opposite of the changed value (so if one checkbox becomes true, the other ones must become false).
To do this you could write a simple function like this:
var toggleCheckboxes = function(myNode, value) {
query("input[type=checkbox]").forEach(function(node) {
if (node !== myNode) {
registry.getEnclosingWidget(node).set("value", !value, false);
}
});
};
The dojo/query module allows you to get a list of all nodes matching the given selector. With the dijit/registry module you can retrieve the actual widget behind the DOM node and then you just set the value using:
registry.getEnclosingWidget(node).set("value", !value, false);
The third parameter (set to false) is actually very important. This parameter will prevent further event invocations. If you don't put that parameter there it will actually trigger another onChange, causing an infinite loop.
Now the only thing you need to do is bind an onChange event handler to each checkbox that calls this function, you can also to that with the dojo/query and dijit/registry module, for example:
query("input[type=checkbox]").forEach(function(node) {
registry.getEnclosingWidget(node).on("change", function(value) {
toggleCheckboxes(node, value);
});
});
A complete example can be found on JSFiddle.
But I still recommend using a radiobutton. I think you can actually say this is a bad UI design, a checkbox and a radiobutton have different goals, use them for what they're meant to.
Basically what I'm trying to do is self-explanatory in the title. Here's a snippet of code which enables the dropdown/select so it can be changed via client, but it will not disable after change:
function setLocVals(passedVal) {
$('#DropDownList1').removeAttr("disabled");
$('#DropDownList1').val(passedVal);
$('#DropDownList1'').attr("disabled", "disabled");
}
Is this even possible? Or am I looking at this completely the wrong way?
I could change to a textbox, but this is a dropdown containing US states. If there's a record for the user then the selection is restricted for the user, if no record exists, then they can select.
Just put a condition when you have to disable. See this fiddle
Use this approach.
First set the value in option.
Then retrieve the current value of the option and check if it is set to the one than you have passed then put the condition to disable else not
function setLocVals(passedVal) {
$('#DropDownList1').val(passedVal);
var value = $('#DropDownList1').val();
if(value == passedVal){
$('#DropDownList1').attr("disabled", "disabled");
}
}
i am trying to bind an event when user selected an item from <select>
not necessary changed from the default.
$(select).change(); only works if the item was changed.
i wonder if there is something that works by selecting one of the options even if its the same default option.
$('#page_body').on('select', '.pop_pin_select', function() {
});
This is what i try so far but it wont work.
There is a way around this; making the option at index 0 the default selected, dynamic and not manually selectable (i.e. disabled) and listen for onchange as normal, except when changing to index 0. Then onchange, set .options[0] to chosen label and value and change selection to it. Here is an example.
Relevant JavaScript from example
document.getElementById('sel')
.addEventListener('change', function () {
if (this.selectedIndex === 0) return;
this.options[0].value = this.value;
this.options[0].textContent = this.options[this.selectedIndex].textContent;
this.selectedIndex = 0;
}, false);
onchange will fire when a user makes the same selection because the index is changing even though the value isn't.
Can you set the defaultSelected value of a select field programmaticlly with javascript. My problem is that when checking for values changed by the user I am getting true for the if condition below, when our developers programmaticlly change the selected option. I want them to also update the defaultSelected.
if (thisElement.options[j].selected !=
thisElement.options[j].defaultSelected)
{
dirty = true;
}
Whenever they make
select_element.value = 'someValue';
to select a value in drop down, make them also set the defaultSelected attribute of the option inside:
select_element.children[/*selected index*/].defaultSelected = true
Edit. In Jquery:
$('#select_element').val('someValue');
$('#select_element option:selected').attr('defaultSelected','true')