Develop Reference

Svelte: Change classes of checked checkbox (without creating variable for checkbox)

I am kind of new to Svelte and trying to solve this (seemingly trivial) problem with my UI:
I would like to change the classes of a checkbox and/or its parent element when the checkbox is checked. The Svelte docs tell me to create a boolean var for every checkbox and bind activation the classes to it: https://svelte.dev/tutorial/class-shorthand
but I have a random amount of checkboxes and many different types of checkboxes with different behaviour in styling and I don't want to create (or generate) a variable for every single checkbox.
Is there any elegant way in Svelte for changing the classes of checkboxes when they are indivually checked? (vanilla javascript instead if jquery if possible :) )
Cheers
Some Svelte noob

Based on what you have said, I would create a subcomponent to wrap the checkbox.
Lets Call it ToggleCheck. And if you want a div around each checkbox, then the div would live inside of of the ToggleCheck component
Then each instance of ToggleCheck would have its own var.
Your parent component could then have one or many instances of , even within a loop.

For something like this I would use... use, or actions. You can add/remove the class/classes using vanilla JS.
Since the class doesn't actually exist in the component you'll get an error if you define the class in your component unless you use :global()and even when doing that if you've set a property of CSS you'll need to make sure the specificity of the global selector is higher than the class generated by Svelte (i.e. :global(div.class))
Here's a REPL showing it in action with a few checkboxes and no need for variables or id's.

Trigger Dynamic Actions from a JavaScript Animation in Oracle APEX

Hello fellow developers.
I am working with Oracle APEX. I have found a pretty beautiful JavaScript library about animation and I would like to use it in order to make my application more beautiful and to show the user the path in order to make some configurations in the database.
The library that I have found is called JIT (https://philogb.github.io/jit/demos.html) and I would like to use this instance: https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html.
After I implement the animation in APEX I would like to add some dynamic actions. For example every time one node is being clicked, a different region underneath the animation is being displayed and the other sub-regions are being hid.
Until now I have uploaded the JIT library and the JavaScript code that contains the Events and the functions about the animated tree in the shared components of my application. Also I have managed to display the animation in the Oracle APEX page, through an HTML code. I caught the Event that is happening whenever one node is being clicked. I have created also one dynamic action on a Region, and with this dynamic action I would like to show this Region. And every time, one different node is being clicked this Region is getting hidden. The dynamic action I have created has the existing attributes:
*Event ='Change'
*Selection Type = JQuery Selector
*JQuery Selector = $("#P5_NAME").val('INAS006E ');
,where P5_NAME is a field that I store in the JavaScript code the name of the node that is being clicked and 'INAS006E' is the name of one specific node.
*Action = Show
*Selection Type = Region
*Region = Test JS
, the name of the region that I want to display.
The biggest problem that I don't know how to overcome is, to pass the variable in the JavaScript code, node.name, in the Oracle APEX in order to trigger the dynamic actions.
Here is the Event that is being triggered where one node is clicked and where I store the node.name.
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$("#P5_NAME").val(node.name);
},
In conclusion, I want after one node is being clicked, one region is getting showed after I click one the next node, the previous node is being hid and another one is coming up. But in order to do that, I have to pass the variable from JavaScript code into Oracle APEX.

I have managed to solve this problem after a lot of testing and searching.
The truth is that the answer is simpler than I expected. All I had to do, is to change a little bit the code of the function, that is being triggered. The correct function is:
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$s("P5_NAME",node.name);
},
The $s("P5_NAME",node.name) sets the value of textfield P5_NAME with the name of the node.

Two way binding for checkbox inside an accordion not workiing

In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon

We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!

Set focus of codemirror instance based on container

I have multiple instances of codemirror running on my page. Some are hidden and you can move between them using tabs. What I would like to do is be able to set the focus based on the container.
At some point the instance was initiated like this:
var cmInstance = CodeMirror(target, options());
So I would either like to be able to get the instance that was initiated on that container by using the container, something like:
cm = target.getCodeMirror();
or perhaps set the focus based on the container, something like:
target.setFocus();
Is anything like this possible or should I rather keep a record of individual instances in an array or something?

Okay so I opted to track my instances of codemirror in an array and address them based on an ID that I keep track of and link to the target. Once I have my instance I can just set focus using the codemirror method cmInstance.focus();
Currently I feel this is the best solution.

Dynamicaly input values into webdatagrid rowadding

I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you

Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.