So I have the js-hint on my file, as well as the foldFunction
I don't want it to be an extra key set, I'd rather have it in my options panel to turn them on or off. Which brings to me to the js-hint part I want it to run all the time, instead of only when it turns on for one word.
Has anyone who has experience with this had luck on doing this? I already get how I'm going to get the foldFunction I believe:
extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); },"Ctrl-Space": "autocomplete" }
Turning that to this:
var a= document.getElementById('checkmark');
if(a.checked === true){
CodeMirror.defineOptions...
}
I'm not sure how to further this as I'm not positive that defining the Option foldGutter to false will work as its altered after the page has load.
Does anyone have any suggestions?
After code mirror is instantiated you can enable or disable foldGutter using the codemirror setOption method. The following codemirror event handler will fire whenever new input is read from the hidden text field. If the checkbox is checked and the autocomplete menu is not already open, the execCommand method will be fired opening the autocomplete menu. This will result in hints as you type. I've added this to my implementation of codemirror and will test it out.
<label><input type="checkbox" id="AutoCompleteEnabled" /> Enable Autocomplete </label>
<label><input type="checkbox" id="FoldGutterEnabled" /> Enable Code Folding </label>
<script>
$(function(){
$("#FoldGutterEnabled").on("click", function(){
CM.setOption("foldGutter", this.checked);
});
CM.on("inputRead", function(cm){
// Show the autocomplete menu when input is changed if the Enable Auto Hint checkbox is checked and the autocomplete menu is not already open.
if($("#AutocompleteEnabled:checked").length==1 && $(".CodeMirror-hints").length==0) CM.execCommand("autocomplete");
});
});
</script>
Let me know if you were looking for something different.
Related
Here is my issue. I am unable to trigger the checkbox select on firing an event/Function when ever the function is called. The input has to be selected like below
TS code:
check(){
this.selectAll = true;
let elements = this.hostElement.nativeElement.querySelectorAll('deltha');
for(var i=0;i<elements.length;i++){
elements[i].selected= this.selectAll;
}
}
HTML code:
<input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
Whenever the function is called, it has to trigger and this check box has to be checked here. I am not using and reactive/template form approach as this has to be a unique one. When I am trying the above function code, it's not working and it is not giving any error as well...
I'm not really sure what's the issue here. You'll need to provide more code so we could try to reproduce your problem.
From what i see here when you change this.selectAll to true then the checkbox is selected (you don't need to do this by applying anything to the element) - you can see this in the stackbliz demo - https://stackblitz.com/edit/checkbox-selection-1?file=src/app/app.component.ts
please add more information to your question.
I have got chart in container and checkbox for dragging function, enable and disable works, but if i click for second time enable checkbox it doesn't work. I don't know where is mistake. Below is jiddle url and IF statement function Thanks for suggests
http://jsfiddle.net/dmmqwr6d/
function EnableDrag(checkboxvalue) {
if (checkboxvalue == true) {
$("#chartdiv").draggable("enable");
} else {
$("#chartdiv").draggable("disable");
}
}
You are simply providing the wrong argument to the EnableDrag() function. The value of the checkbox never changes, it is the checked state (or property) of the element that changes.
Simply change the html where you define the checkbox from
<input type="checkbox" onClick="EnableDrag(this.value);" checked>Chart drag
to
<input type="checkbox" onClick="EnableDrag(this.checked);" checked>Chart drag
I've updated your jsfiddle here to reflect that: http://jsfiddle.net/dmmqwr6d/1/
For some reason, I can't seem to figure this out.
I have some radio buttons in my html which toggles categories:
<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category
The user can select whichever he/she wants, but when an certain event triggers, I want to set 1234 to be set checked radio button, because this is the default checked radio button.
I have tried versions of this (with and without jQuery):
document.getElementById('#_1234').checked = true;
But it doesn't seem to update. I need it to visibly update so the user can see it.
Can anybody help?
EDIT: I'm just tired and overlooked the #, thanks for pointing it out, that and $.prop().
Do not mix CSS/JQuery syntax (# for identifier) with native JS.
Native JS solution:
document.getElementById("_1234").checked = true;
JQuery solution:
$("#_1234").prop("checked", true);
If you want to set the "1234" button, you need to use its "id":
document.getElementById("_1234").checked = true;
When you're using the browser API ("getElementById"), you don't use selector syntax; you just pass the actual "id" value you're looking for. You use selector syntax with jQuery or .querySelector() and .querySelectorAll().
Today, in the year 2016, it is safe to use document.querySelector without knowing the ID (especially if you have more than 2 radio buttons):
document.querySelector("input[name=main-categories]:checked").value
Easiest way would probably be with jQuery, as follows:
$(document).ready(function(){
$("#_1234").attr("checked","checked");
})
This adds a new attribute "checked" (which in HTML does not need a value).
Just remember to include the jQuery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
By using document.getElementById() function you don't have to pass # before element's id.
Code:
document.getElementById('_1234').checked = true;
Demo:
JSFiddle
I was able to select (check) a radio input button by using this Javascript code in Firefox 72, within a Web Extension option page to LOAD the value:
var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
if (response["reload_mode"] == "Periodic") {
document.querySelector('input[name=reload_mode][value="Periodic"]').click();
} else if (response["reload_mode"] == "Page Bottom") {
document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
} else {
document.querySelector('input[name=reload_mode][value="Both"]').click();
}
});
Where the associated code to SAVE the value was:
reload_mode: document.querySelector('input[name=reload_mode]:checked').value
Given HTML like the following:
<input type="radio" id="periodic" name="reload_mode" value="Periodic">
<label for="periodic">Periodic</label><br>
<input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
<label for="bottom">Page Bottom</label><br>
<input type="radio" id="both" name="reload_mode" value="Both">
<label for="both">Both</label></br></br>
It seems the item.checked property of a HTML radio button cannot be changed with JavaScript in Internet Explorer, or in some older browsers.
I also tried setting the "checked" attribute, using:
item.setAttribute("checked", ""); I know the property can be set by default,
but I need just to change the checked attribute at runtime.
As a workarround, I found another method, which could be working. I had called the item.click(); method of a radio button. And the control has been selected. But the control must be already added to the HTML document, in order to receive the click event.
I have an issue where I have the following markup:
<input type="checkbox" id="foo" />
<label for="foo">
<a href="http://www.google.com">
Checkbox text
</a>
</label>
The label has a nested anchor in case the user doesn't have javascript enabled, and in which case they will follow the link when clicking the label.
I have the following javascript/jQuery to prevent the link click and to show an alert when the checkbox state has changed:
$(function(){
$("label a").click(function(e){
e.preventDefault();
});
$("#foo").change(function(){
alert("checkbox changed");
});
});
-- See Example --
However when clicking the label the checkbox checked state isn't changed.
I'm aware I could hack the code and try and emulate the native browser functionality by adding code to set the checked status, however I would prefer to use the native functionality than emulate it.
How can I get the checkbox to change state without following the link, and without setting the checked state using javascript?
bit confused here and without setting the checked state using javascript?...
but i think you are talking about trigger()...
$("label a").click(function(e){
var $foo = $("#foo");
$foo.attr("checked", !$foo.attr("checked"));
$foo.trigger('change');
return false;
});
fiddle
I have a form setup with dojo 1.5. I am using a dijit.form.ComboBox and a dijit.form.TextBox
The Combobox has values like "car","bike","motorcycle" and the textbox is meant to be an adjective to the Combobox.
So it doesn't matter what is in the Combobox but if the ComboBox does have a value then something MUST be filled in the TextBox. Optionally, if nothing is in the ComboBox, then nothing can be in the TextBox and that is just fine. In fact if something isn't in the Combobox then nothing MUST be in the text box.
In regular coding I would just use an onBlur event on the text box to go to a function that checks to see if the ComboBox has a value. I see in dojo that this doesn't work... Code example is below...
Vehicle:
<input dojoType="dijit.form.ComboBox"
store="xvarStore"
value=""
searchAttr="name"
name="vehicle_1"
id="vehicle_1"
/>
Descriptor:
<input type="text"
dojoType="dijit.form.TextBox"
value=""
class=lighttext
style="width:350px;height:19px"
id="filter_value_1"
name="filter_value_1"
/>
My initial attempt was to add an onBlur within the Descriptor's <input> tag but discovered that that doesn't work.
How does Dojo handle this? Is it via a dojo.connect parameter? Even though in the example above the combobox has an id of "vehicle_1" and the text box has an id of "filter_value_1", there can be numerous comboboxes and textboxes numbering sequentially upward. (vehicle_2, vehicle_3, etc)
Any advice or links to resources would be greatly appreciated.
To add the onBlur event you should use dojo.connect():
dojo.connect(dojo.byId("vehicle_1"), "onBlur", function() { /* do something */ });
If you have multiple inputs that you need to connect this to, consider adding a custom class for those that need to blur and using dojo.query to connect to all of them:
Vehicle:
<input dojoType="dijit.form.ComboBox"
store="xvarStore"
class="blurEvent"
value=""
searchAttr="name"
name="vehicle_1"
id="vehicle_1"
/>
dojo.query(".blurEvent").forEach(function(node, index, arr) {
dojo.connect(node, "onBlur", function() { /* do something */ });
});
In the function that is passed to dojo.connect you could add in some code to strip out the number on the end and use it to reference each filter_value_* input for validation.
dojo.connect()
Combobox documention
onBlur seems to work just fine for me, even in the HTML-declared widgets. Here's a very rudimentary example:
http://jsfiddle.net/kfranqueiro/BWT4U/
(Have firebug/webkit inspector/IE8 dev tools open to see console.log messages.)
However, for a more ideal solution to this, you might also be interested in some other widgets...
http://dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html
http://dojotoolkit.org/reference-guide/dijit/form/Form.html
Hopefully this can get you started.