I am trying to create a custom checkbox using Svelte and compile it to a custom element (with customElement: true) but I don't know what way is the proper way of using attributes.
Looking at the generated code it looks like the attributeChangedCallback and observedAttributes are generated automatically depending on what variables you export in the .svelte file so that seems to work as expected though I haven't found any documentation for this.
Right now I have this hacky approach of creating the checked property manually and managing the different values of the checked attribute (to match native behavior) as seen here:
<script>
import { onMount } from 'svelte';
export let checked;
onMount(() => {
if (checked != null) {
checked = true;
} else {
checked = false;
}
});
</script>
I then simply set the checked attribute to the input element and add a change event to keep the property updated when checking/unchecking the input:
<input
on:change={(event) => {
checked = event.currentTarget.checked;
}}
type="checkbox"
{checked}
/>
Is this how you are meant to use attributes and managing property states with Svelte and custom elements?
While that works, Svelte allows you to simplify it quite a bit:
<svelte:options tag="my-checkbox"/>
<script>
// `checked` will be `false` by default, but a user may pass in a
// different value through the attribute/property with the same name.
export let checked = false;
// this next line isn't strictly necessary. if you want to guarantee
// `checked` is always a boolean even if the user passes a different
// value, you can use a reactive statement to consistently convert
// `checked` into a boolean. this will re-run automatically.
$: checked = (checked !== false);
</script>
<!--
`bind:checked` is a shorthand for `bind:checked={checked}`, which in
turn means the `checked` property of the input will have a two-way
binding to the `checked` property of this component. updating one will
automatically update the other.
-->
<input type="checkbox" bind:checked>
Svelte's reactivity system will ensure the component's checked property/variable is kept in sync with the custom element's checked property, and as you noted, changes to the custom element's attribute will also trigger an update to the component.
Do note that you won't see the changes in the component reflected in the element's attributes, so you'll have to do that manually if necessary. Usually the property access is enough, though.
Can't bind to 'disabled' since it isn't a known property of 'ngx-dropdown-treeview?
ngxDisabledOnSelector property has not working in my case
my code here :
<ngx-dropdown-treeview [config]="config" [items]="items" [buttonClass]="buttonClass"
(selectedChange)="values = $event" [disabled]="!dropdownEnabled"
[ngxDisabledOnSelector]="'button.dropdown-toggle'" (filterChange)="onFilterChange($event)">
"disabled", is basically a HTML attribute, but not necessary an Input param for you ngx treeview, so, in this case you have 2 options.
1.- Use disable as angular html attribute
[attr.disabled]="!dropdownEnabled"
2.- Use direct attribute
disabled="{{!dropdownEnabled}}"
lets try
I was trying to search for a way to override default behavior of TinyMCE when it applies same styles to new elements. For example, when we apply some style to a paragraph and hit enter for new paragraph, it inherits same styles. Is it possible to override this behavior?
Yes, it is.
You will have to register the keyup event and check for the ENTER key.
Then you check the actual node the caret is in and you may add/remove classes or whatever. Use the setup tinymce configuration parameter to add the handler:
setup:function(ed){
ed.on("keyup", function(e){
if(e.keyCode == 13){ // ENTER
var node = ed.selection.getNode();
// do your magic here
}
});
}
In Flex, how do I create a CheckBox that can't be un-checked? I run a function when the checkbox is clicked. If that function encounters an error, I want the state of the checkbox to remain the same. How do I do that?
You can use the enabled attribute to prevent the checkbox from being accessed once it's in the state you mentioned.
onFunctionError():void {
yourCheckbox.enabled = false;
}
I am trying to disable validators using jquery.
I have already looked
Disable ASP.NET validators with JavaScript
and couple of others doing the same.
It seems ot be working but its breaking.
My code:
$('.c_MyValdiators').each(function() {
var x = $(this).attr('id');
var y = document.getElementById(x);
ValidatorEnable(y[0], false);
});
I get Error:
val is undefined
[Break on this error] val.enabled = (enable != false);\r\n
Alternatively if I use
$('.c_MyValdiators').each(function() {
ValidatorEnable($(this), false); OR ValidatorEnable($(this[0]), false);
});
I get Error:
val.style is undefined
[Break on this error] val.style.visibility = val.isvalid ? "hidden" : "visible";\r\n
Any idea or suggestions?
I beleive that ValidatorEnable takes the ASP.net ID rather that the ClientID produced by ASP.net. You will also need to make the validation conditional in the CodeBehind.
here is an example:
Of particular use is to be able to enable or disable validators. If you have validation that you want active only in certain scenarios, you may need to change the activation on both server and client, or you will find that the user cannot submit the page.
Here is the previous example with a field that should only be validated when a check box is unchecked:
public class Conditional : Page {
public HtmlInputCheckBox chkSameAs;
public RequiredFieldValidator rfvalShipAddress;
public override void Validate() {
bool enableShip = !chkSameAs.Checked;
rfvalShipAddress.Enabled = enableShip;
base.Validate();
}
}
Here is the client-side equivalent:
<input type=checkbox runat=server id=chkSameAs
onclick="OnChangeSameAs();" >Same as Billing<br>
<script language=javascript>
function OnChangeSameAs() {
var enableShip = !event.srcElement.status;
ValidatorEnable(rfvalShipAddress, enableShip);
}
</script>
Reference: http://msdn.microsoft.com/en-us/library/aa479045.aspx
I just stumbled upon your Question [a year later].
I too wanted to disable all validators on a page using JQuery here is how I handled it.
$('span[evaluationfunction]').each(function(){ValidatorEnable(this,false);});
I look for each span on the page that has the evaluatefunction attribute then call ValidatorEnabled for each one of them.
I think the $('this') part of your code is what was causing the hickup.
ValidatorEnable(document.getElementById($(this).attr('id')), true);
I've got another solution, which is to use the 'enabled' property of the span tag for the validator. I had different divs on a form that would show or hide so I needed to disable the validation for the fields inside the hidden div. This solution turns off validation without firing them.
If you have a set of RequiredFieldvalidator controls that all contain a common string that you can use to grab them the jquery is this:
$("[id*='CommonString']").each(function() {
this.enabled = false; // Disable Validation
});
or
$("[id*='CommonString']").each(function() {
this.enabled = true; // Enable Validation
});
Hope this helps.
John
I'm just running into the same problem, thanks to the other answers, as it helped uncover the problem, but they haven't gone into detail why.
I believe it is due to that ValidatorEnable() expects a DOM object (i.e. the validation control object) opposed to an ID.
$(selector).each() sets "this" to the DOM element being currently iterated over i.e. quoted from the jquery documentation:
"More importantly, the callback is fired in the context of the current
DOM element, so the keyword this refers to the element." - http://api.jquery.com/each/
Therefore you do not need to do: document.getElementById($(this).attr('id')
And instead ValidatorEnable(this, true); is fine.
Interestingly, Russ's answer mentioned needing to disable server side validation as well, which does make sense - but I didn't need to do this (which is concerning!).
Scrap my previous comment, it is because I had my control disabled server-side previously.
The ValidatorEnable function takes an object as the 1st parameter and not a string of the id of the object.
Here is the simple way to handle this.
Add a new class to the Validation control.
Then look for that class with jquery and disable the control.
Example :
if (storageOnly == 1)
{
$('#tblAssignment tr.assdetails').addClass('hidden');
$('span[evaluationfunction]').each(function ()
{
if ($(this).hasClass('assdetail'))
{ ValidatorEnable(this, false); }
});
}
else
{
$('#tblAssignment tr.assdetails').removeClass('hidden');
}
* Works like a charm.
** For you imaginative types, assdetail == assignment detail.
Here depending on the if condition, I am either hiding the rows then disabling the validator , or removing hidden class from the rows..
Various ways to this depending on your needs. Some solutions in the following blog posts:
http://imjo.hn/2013/03/28/javascript-disable-hidden-net-validators/
http://codeclimber.net.nz/archive/2008/05/14/How-to-manage-ASP.NET-validation-from-Javascript-with-jQuery.aspx