With (Vue) Element UI I'm trying to disable a Dialog element from closing on click.
In the docs it say there is a close-on-click-modal attribute, but it's default is true and I have no idea on how to set it to false.
close-on-click-modal="false" gives this error: "closeOnClickModal". Expected Boolean, got String.
Is there a way to disable this setting?
Please try it by changing close-on-click-modal="false" to :close-on-click-modal="false"
If you use the double dot, the content of the attribute is evaluated as Javascript. If you don't, it's a string.
Related
How do I set a data attribute without adding a value in jQuery? I want this:
<body data-body>
I tried:
$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything
Everything else seems to add the second arguments as a string. Is it possible to just set an attribute without value?
The attr() function is also a setter function. You can just pass it an empty string.
$('body').attr('data-body','');
An empty string will simply create the attribute with no value.
<body data-body>
Reference - http://api.jquery.com/attr/#attr-attributeName-value
attr( attributeName , value )
Perhaps try:
var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
The accepted answer doesn't create a name-only attribute anymore (as of September 2017).
You should use JQuery prop() method to create name-only attributes.
$(body).prop('data-body', true)
You can do it without jQuery!
Example:
document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.
From MDN Element.setAttribute()
Not sure if this is really beneficial or why I prefer this style but what I do (in vanilla js) is:
document.querySelector('#selector').toggleAttribute('data-something');
This will add the attribute in all lowercase without a value or remove it if it already exists on the element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
simply try this, it will definately work....
document.querySelector("audio").setAttribute("autoplay", "");
this will showed like below code;-
<audio autoplay>
</audio>
if you wrote like,
$("audio").attr("autoplay", "");
then, this will showed like below code;-
<audio autoplay="autoplay">
</audio>
We have a lot of good answers here.
But, you have to see that inside Firefox it gives you data-body="" and inside Chrome it gives you data-body only.
I am trying to use RSelenium to navigate with Firefox. I need to change an option button in about:config page for parameter browser.helperApps.neverAsk.saveToDisk. With RSelenium I am able to find the element I need to modify, but then I cannot find a way to update the value.
This is my HTML string to find
<tr class=""><th scope="row">browser.<wbr>helperApps.<wbr>neverAsk.<wbr>saveToDisk</th><td class="cell-value"><form id="form-edit"><input type="text"></form></td><td class="cell-edit"><button data-l10n-id="about-config-pref-save-button" class="primary button-save" title="Salva" form="form-edit"></button></td><td class="cell-reset"></td></tr>
I am using
go4 = rsc$findElement(using = "xpath", value = "//th[substring-after(normalize-space(string(.)),': ')=browser.helperApps.neverAsk.saveToDisk']")
but the error I get is
Summary: NoSuchElement
Detail: An element could not be located on the page using the given search parameters.```
How can I find the element and change the default value?
Thank you
I have some simple html code as shown here:
<div class="container card" hidden=false>
<canvas id="myChart"></canvas>
</div>
As you can see the hidden tag is included and set to false. Not the string 'false' just the boolean false. Yet when run the div is still completely hidden and when I check the CSS code for why it shows that the hidden tag is giving it:
display: none !important; But that shouldn't be the case when hidden is set to false right?
Instead of hidden use [style.display]="hideElement?'none':'inherit'"
Where in .ts you would set whether hideElement is true or false;
Alternatively create a class .display-hide{ display:none;} and then toggle it using
[class.display-hide]="hideElement"
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can’t be used until the login process has been completed. Browsers won’t render elements with the hidden attribute set.
I used this link for reference:
Because hidden doesn't need a value: it either is hidden, or it isn't. The boolean you're sending is ignored. So, basically only add hidden if it should be hidden and add nothing if it should show.
ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
The hidden attribute in HTML is an attribute which can't be set to any value.
For more info about the syntax, visit the MDN docs.
just use property binding on hidden
[hidden]=" some expression"
I have a paper-textarea inside of a drawer. When I go to the page the paper-textarea autofocuses, which opens the drawer. I've tried to get rid of the focus by trying autofocus="false" and autofocus="off", but neither have worked for me. Any help would be appreciated.
<paper-textarea id="descriptionInput" label="Description" invalid="{{descriptionError}}" error-message="please enter a valid description" value="{{description}}" autofocus="false"></paper-textarea>
Update: Another way to go about this might be to remove the focus programatically, but I've tried this.$.descriptionInput.blur() inside of the attached function, and it's not working either.
This is due to iron-autogrow-textarea's autofocus property default value being set to "off". The autofocus attribute is active if it exists, the only way to disable it is to remove it all together (ie, autofocus="disabled" or autofocus="off" will still autofocus the tag).
I've created a pull request and this will hopefully be fixed in future versions.
For the time being, you can create a disabled input tag before the textarea with an autofocus attribute and visibility set to hidden and this will prevent the textarea from gaining focus.
<input disabled autofocus style="visibilty: hidden">
I ran into an issue with the answer by Kevin Ashcraft, on Safari it was not working.
Here is another option, since the issue it due to the presence of the autofocus attribute, you need to remove that attribute. So I have polymer element and in there I have the following
ready:function(){
var list = Polymer.dom(this.root).querySelectorAll('iron-autogrow-textarea');
list.forEach(function (e) {
e.textarea.removeAttribute("autofocus")
});
}
This scans my dialog, finds all iron-autogrow-textarea and removes the attribute from them... you can change the selector to get only the ones you need.
Update this has been fixed as of latest version Should mention this has been fixed in latest version of https://github.com/PolymerElements/iron-autogrow-textarea/releases/tag/v1.0.8
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.