I dont understand how the promptValue is stored.
I have the following function and I want to pass the promptValue to the callback function "this.rename". I dont know how to get this value. The example published by the react native people is doing some mysterious stuff to get this value. Can anyone explain?
renamePrompt: function(line) {
AlertIOS.prompt(
'Rename',
line.name,
this.rename
);
},
AlertIOS.prompt accepts a couple of parameters. Let's take a look at them:
AlertIOS.prompt(
'Title', 'Default Value',
[{text: 'Button One', onPress: this.firstButtonPress.bind(this)},
{text: 'Button Two', onPress: this.secondButtonPress.bind(this)}]
)
The first parameter that AlertIOS.prompt accepts is the title -- what gets displayed to the user. It's a required propType.
The next parameter is a value, which is what gets pre-filled into the text box for your user. This is an optional propType.
After that, the array you see maps to the buttons that your user gets to tap on. These buttons are represented as objects, with some key/value pairs. The first is text, which will display the button text. The second is onPress, which is a method that you specify to handle that specific button being pressed.
In order to retrieve the value of the button, you need to bind this (in this case, it's the prompt) to your onPress method. If you do this, you can have your onPress handler access the typed in value as such:
firstButtonPress(value) {
console.log(value)
}
This button array is conditionally optional. If you choose not to give a list of buttons, AlertIOS will expect you to pass in a callback function as a parameter for AlertIOS.prompt (but not both a set of buttons and a callback).
Related
I have an Ionic React app that uses react-router 5 to display various pages.
The app defaults to a login form, but if users go to the support page, there is a contact form.
I'm trying to test the contact form in Playwright with code like this:
await page.fill('input[name=mail]', 'playwright#example.com');
However, I'm getting an error:
=========================== logs ===========================
waiting for selector "input[name=mail]"
selector resolved to 2 elements. Proceeding with the first one.
selector resolved to hidden <input name="mail" type="email" placeholder="" autocorr…/>
elementHandle.fill("playwright#example.com")
waiting for element to be visible, enabled and editable
element is not visible - waiting...
The problem is that Playwright is seeing the first email address input on the login form, which is not visible, and then trying to fill that in instead of the visible email address input on the contact page.
Obviously, I never want to fill in an element that isn't visible, so how can I force playwright to only try to fill in visible elements?
You can use page.locator to check for visibility first and then fill in the value.
await page.locator('input[name=mail] >> visible=true').fill('playwright#example.com');
To make tests easier to write, wrap this in a helper function:
async fillFormElement(
inputType: 'input' | 'textarea',
name: string,
value: string,
) {
await this.page
.locator(`${inputType}[name=${name}] >> visible=true`)
.fill(value);
}
It can be done in this way, if you are trying to check is element visible. Even you have two same elements with one selector one hidden one visible.
const element = await page.waitForSelector(selector, {state:visible});
await element.fill(yourString);
Following the JavaFX Tutorial here: http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm, trying to make it run in Clojure. For now I'm just doing lein run after setting up :aot :all and stuff with (:gen-class) etc. It took a few days of figuring out, but now it seems to be mostly working.
In src/jfxtwo/ClojureExampleController.clj:
(defn -handleSubmitButtonAction [^ActionEvent event]
(let [actiontarget (Text.)]
(println "event button pressed")
(println "Event instance:" event)
(println "Event class:" (class event))
(.setText actiontarget "Sign in button pressed...")))
In resources/fxml_example.fxml:
<GridPane fx:controller= "jfxtwo.ClojureExampleController"
xmlns:fx= "http://javafx.com/fxml"
alignment= "center" hgap= "10" vgap= "10"
styleClass= "root" >
...
<Button text= "Sign In"
onAction= "#handleSubmitButtonAction" />
...
<Text fx:id= "actiontarget"
GridPane.columnIndex= "1" GridPane.rowIndex= "6" />
...
I have my clojure code able to read the fxml and css file to generate the proper GUI. When I press the button I can see the event handler being called, but I don't know how to access the Text I want to change, or the ActionEvent instance that is associated with the button press. I tried (println event) and (println (class event)) expecting to see something about an ActionEvent instance, but this only results in showing me that for whatever reason the callback function thinks the event is a ClojureExampleController, even though the type hint says it should be an ActionEvent:
event button pressed
Event instance: #<ClojureExampleController jfxtwo.ClojureExampleController#3e61061d>
Event class: jfxtwo.ClojureExampleController
The Java code to do this looks like this:
public class JFXAppSampleController {
#FXML private Text actiontarget;
#FXML protected void handleSubmitButtonAction(ActionEvent event) {
actiontarget.setText("Sign in button pressed");
}
}
Clearle the #FXML annotation is doing the magic here. What's going on, and how do I make this work in Clojure?
Also, is there a way to bind the button press to the text change directly in the FXML so I don't really have to handle a gui->gui change in the code-behind, and instead only deal with the logic associated with the button press? I'm guessing yes, but I haven't gotten to that point in the tutorial.
thanks!
You need an explicit this argument in your handler:
(defn -handleSubmitButtonAction [this ^ActionEvent event]
...)
Perhaps a more accurate way of putting this is that event is the this argument in your handler as exhibited in the question text and you need to add a second argument to accept the event in and move the type hint to it (and probably rename the first argument to this for readability).
Given the fact that your code gets called at all, it would seem that JavaFX is happy to call a handler without passing it the event at all if it doesn't care about it (as evidenced by not having a formal parameter corresponding to it).
The type hint's only purpose is to allow the Clojure compiler to avoid emitting reflective code when ActionEvent methods are called on event. This will not prevent passing an object of a different type to the function.
I have multiple HTML fragments that are inserted into my DOM as the result of AJAX call-backs.
Each of these fragments will contain a text box whose class is "quantity".
What I want to do is to create an "on change" event handler that fires whenever one of these textbox's text value is changed. However, when that event is fired/handled, I need to know WHICH specific textbox was updated.
Okay, using jQuery, I have the following that fires in my "Lists.initHandlers" method:
$(document).on('change', $('#divABC').find(".quantity"), List.quantityChanged);
And my "List.quantityChanged" event handler happily fires when I update the quanity.
The problem is that when I reference "this" within the event handler, I get the whole document, and not the element that triggered the event.
I have tried to capture the element using syntax similar to:
$(document).on('change', $('#divABC').find(".quantity"), {ctrl: this}, List.quantityChanged);
but when I attempt this, the handler is never fired (even when I change the signature to expect an argument).
Any guidance here would be most appreciated.
Thanks
Griff
Try this:
$('.quantity').live('change', function(){
alert('New value: ' + $(this).val());
});
Pass this to your function:
$(document).on('change', $('#divABC').find(".quantity"), function () {
List.quantityChanged(this);
});
I was wondering if there is a way to get the current value of a on the keydown or the keypress event. To define "current value" in a better way, I mean, by this, the value of the textarea, including the "just inserted" character. By default on these events the value does not change. If this is not possible i would like to know if there is a cross browser way to get the just inserted value of the key that I pressed (I don't need the keycode, because e.g. this does not define, supposing that I enter a characterm if the character entered is Uppercase or Lowercase).
You'll have to wait for the keyup event to fire before the actual value changes.
Otherwise, for keydown or keypress, you have to map the character code on the event (and this is different per browser unless you use some JS library like jQuery which standardizes it) and determine the cursor position and modify the value that way. This can get a little tricky especially around browser support unless you use a JS library to do this.
I wrote a module that translates keypress, keydown, and keyup events into characters and keys respectively. https://github.com/fresheneesz/keysight
Example:
textarea.addEventListener("keydown", function(event) {
var character = keysight(event).char
if(character === 'w') {
console.log("got lower case w")
} else if(character === 'W') {
console.log("got upper case w")
}
})
I have two g:textfields
in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.
The first one is named 'shipper' and the other 'shipperName'
Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.
Thanks in advance!
Examples:
If I write the number 12 it should return USPS
http://i53.tinypic.com/2i90mc.jpg
And every number should have a different 'shipperName'
Thanks again!
That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).
For example:
$("#shipper").blur(function() {
$("#shipperName").load(
"${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
$("#shipper").val()
);
});
The $(this).val() at the end is the value of the input field the user just left.
And the "ShipperController.resolveShipper" action would look something like this:
def resolveShipper = {
render text: Shipper.get(params.id).name, contentType: "text/plain"
}
There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)
To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;
$('#input1').bind('keyup',function() {
var map = {
"1":"One",
"2":"Fish",
"3":"Bar"
};
$('#input2').val(map[$(this).val()]);
});
You can see this in action here: http://www.jsfiddle.net/dCy6f/
If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".