I tried to write a program to communicate between JavaFx and JavaScript/JQuery. I want my program to work like following,
A character(e.g. 'a') is passed to JavaFx by user input, then this character 'a' is passed to JavaScript. In JavaScript/JQuery, there five buttons, whose labels have one different characters. For example, button A has label 'a'; button B has label 'b', etc. Then JavaScript/JQuery finds that 'a' are matched, then button A is clicked.
I am stuck on
1. how do I pass variable from JavaFx to JavaScript. I know how to pass variable from JavaScript to JavaFx.
2 how do make the button triggered when there is a match. Normally, user clicked the button to trigger the action. In the code, there will be something like click(this).
Any suggestion will be appreciated.
You need to use trigger Event Trigger
$(document).ready(function(){
$('#input').on('keyup',function(){
var textInput = $(this).val().trim().toLowerCase();
if(textInput=="a"){
$('#a').trigger('click');
}
if(textInput=="b"){
$('#b').trigger('click');
}
if(textInput=="c"){
$('#c').trigger('click');
}
if(textInput=="d"){
$('#d').trigger('click');
}
if(textInput=="e"){
$('#e').trigger('click');
}
})
$('#a').on('click',function(){
alert("a");
});
$('#b').on('click',function(){
alert("b");
})
$('#c').on('click',function(){
alert("c");
})
$('#d').on('click',function(){
alert("d");
})
$('#e').on('click',function(){
alert("e");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input"><br><br>
<button id="a">A</button><button id="b">B</button><button id="c">C</button><button id="d">D</button><button id="e">E</button>
If you want to click a button by code then just do this:
$("#myButtonId").click();
This code will click your button with id myButtonId
Related
I'm trying to make a button onClick add its value to a text form. I don't really understand the "this" keyword but I tried using this:
function typing(){
document.getElementById('searchbar').value+=this.value
}
For the onClick, nothing happens and there are no errors in console either. Any help would be appreciated.
You can simply bind to click event of the button and add it's value to your text box using this:
$('#button1').click(function(){
$('#searchbar').val($(this).val());
});
Or if you just want to use plain js, you can pass the value inside the click handler like this:
<input type="button" value="A" onclick="doAction(this.value)">
And then:
function doAction(value) {
var searchbar = document.getElementById('searchbar');
searchbar.value = value;
}
Here is a plunkr:
https://plnkr.co/edit/AGR29w1g4TzW4udfazMv?p=preview
I call a function when press the textbox. this is the code for that
onclick="GetColorBack()"
but only when click on the textbox. but if I move with TAB it wont call GetColorBack function.
how can I do that?
PS: not the CSS focus type
For "vanilla"-javascript use onclick="GetColorBack()" onfocus="GetColorBack()"
I think onfocus="GetColorBack()" will be enough, cause clicking lead to focus-event
You can use focus on the textbox. This will work with clicks and tab overs.
Example:
$( "#btnTest" ).focus(function() {
//code
});
I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.
I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:
<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('It worked');
}
}
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>
I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/
If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.
But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.
I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.
I've tried the simple stuff, like calling
searchBox.onchange();
searchBox.focus();
searchBox.click();
And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.
Any help would be appreciated.
Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.
My implementation of Dorian's answer
https://jsfiddle.net/josephfedor42/zaakd3dj/
My implementation of Alsciende's answer
https://jsfiddle.net/josephfedor42/xhs6L6u2/
emphasize mine
According to the mdn page about the change event,
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
and to whatwg specs :
When the input and change events apply (which is the case for all
input controls other than buttons and those with the type attribute in
the Hidden state), the events are fired to indicate that the user has
interacted with the control.
Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.
So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.
Something like this should work:
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
//fire the event
if (document.createEvent) {
searchBox.dispatchEvent('change');
} else {
searchBox.fireEvent("onchange");
}
}
Here is the code I needed to add to my function addTextCallListener:
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);
I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/
Replace onchange with change in this part:
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
I have an input text box and a button on a page.
have an onchange event on the text box and an onclick on the button. Each event triggers a totally separate unrelated method.
The problem is as follows:
if the user makes changes to the text box, then right away goes to click on the button - the onchange is triggered but I lose the onclick.
can I avoid this? I need both events to happen.
Thanks
Updated:
I tried a very simple test locally:
<input type="text" onchange="alert1();"/>
<input type="button" onclick="alert2();"/>
where the js is :
<script type="text/javascript">
function alert1()
{
alert("1");
}
function alert2()
{
alert("2");
}
</script>
changing the text and right away clicking on the button only triggers the first event. Is there a way to force the second event to happen?
An alert (along with other modal dialogs) is a bit of a special case, since it suspends execution of the remainder of the script until the user clicks OK. This is why your second handler falls through the cracks.
If you did something like document.write('foo') in your handlers instead, you wouldn't have this problem.
Try this,
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}
It buffers the execution of each function so that the button's onclick can be triggered.
In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.
A new area is highlighted when the button, 'minibutton' is clicked.
I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.
I have tried this, Why won't it work?
if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
$('.minibutton').click(true);
} else {
$('.minibutton').click(false);
}
Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.
Depending on what .minibutton is, you could do something like:
var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);
If it's not a type that can be disabled, you might consider something like this:
$('.minibutton').toggleClass('disabled', !valid);
And bind the click listener like so:
$(document).on('click', '.minibutton:not(.disabled)', function() {
// click action here
});
As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.
You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/