As the title suggest, im currently looking for a way to do this on component level, ive tried onKeyPress, onKeyDown, and making function for it and calling it in button tag properties still doesnt work also.
i need to run a certain function when enter is clicked in NextJs components without changing using the form={submit}, any ideas?
Related
When user presses either create entity button or edit entity button, there's the same modal window in an iframe that is build by js dynamically. So what I'm trying to do is to wait until it's fully rendered and then execute my custom js code. So is there a proper way to do that? Some sort of event like RenderFinished shooting or something? Don't want to use timeout since I understand that it's not a good way to do that.
What I tried so far is that I've added jquery to the page programmatically, since it's not used currently at that particular page for some reason (probably because iframe is built dynamically without jquery and I needed to add it myself).
After that I tried to access iframe via jquery selector and then on iframe.ready access element inside in the same manner (selector and even ready for that element). But iframe is accessed and element inside it is not. Console log inside ready function just outputs no elements found. When I placed breakpoint inside I saw that there's no modal window built yet and my code is executed synchronously before it. So there's nothing to find yet at that moment.
Oh and I tried to put it all inside $(document).ready, of course. But it didn't change the situation neither...
Any ideas about how to do that properly?
The final goal why am I doing all this complicated dancing: I'm trying to add validation that UrlKey for entity is unique. So I want to bind my js function to UrlKey input's onchange event and call backend api to do the validation and return new UrlKey if it wasn't unique and edit the UrlKey input accordingly. The problem that I stumbled upon is to execute my code after modal iframe window is rendered.
Any tips are highly appreciated.
You are in luck :)
2sxc added a Formula feature which will help you with this. There are videos and tutorials and more. See http://r.2sxc.org/formulas
I have a React app and I used the following link to build cards in my app
https://codepen.io/marlenesco/pen/NqOozj
I'm using the JavaScript as written, and my cards work fine in localhost. However, the flip button on the cards does not work in the deployed app. I noticed that some functions have a strikethrough, especially the click event that I specifically need.
Any ideas behind this?
those shothand's functions (the click , blur, etc...) are deprecated, you need to replace then with on function , take a look here : https://api.jquery.com/on/
I'm building a Chrome extension that layers over a 3rd party react website. I am attempting to update the value of a textarea within that app using the following code:
$('textarea').val("Text to go in textarea.");
The code successfully updates the textarea however once the user clicks on the textarea, the DOM seems to regenerate and the value becomes blank.
What is the best way to update the value within the textarea so that it remains even once the user clicks and DOM regenerates? I am not a react expert however my guess is that the textarea is tied to the state. Is there any way to update that from my own jquery within my chrome extension?
Just to be clear, the textarea belongs to a 3rd party website/react app that I have no control over. I'm trying to manipulate it from my own google chrome extension. I thought the easiest way would be to somehow simulate actual typing in order to make the react app think the user typed my input however I searched around and could not find a way to do that.
Expanding on #Panther's suggestion, you can set the value as you have done above and then trigger the onChange or keypress event etc to save the changes in either state or props. Now since React uses synthetic events , you need to trigger then as shown.
$('textarea').val("Text to go in textarea.");
$.each(document.getElementsByTagName("textarea"),(index,Element)=>{
let event = new Event("change"); // repeat for keypressup,down,input etc.
Element.dispatchEvent(event);
});
Try to use set value of DOM Html element:
document.getElementById("textarea").value = "Johnny Bravo";
I have a form in Angular2 with several input types: text, file, checkbox, and textarea. When you click on the text and textareas, they focus as expected. However, when I click on the checkbox or file elements, nothing happens. The checkbox doesn't check, the "select a file" dialog doesn't open. I've tried this with and without [ngModel] and it doesn't seem to make a difference.
At first I thought this might be because of some issue with z-index, but I've tried removing all instances of z-index and that doesn't make a difference.
Another thought I've had from researching this is that some method is getting called somewhere for these elements onclick that counteracts the natural behavior of the elements, but I can't find any instances of where this might be happening in my own code.
I am a beginner in Angular2 so apologies beforehand if it's some simple answer I haven't thought of.
TYIA!
While trying to simplify my app for plunkr, I found my problem. I have a directive "clickOutside" with a host listener on document:click to check if any a click is outside of an element or not. I have it used in a couple of places on the page. Turns out that if there is anything more than a simple method call inside it (e.g. (clickOutside)="runMethod(); otherValue = true;" as opposed to (clickOutside)="runMethod() it makes the file and checkbox tags not work correctly. I don't know why it does this, but it makes for an easy fix!
i wrote a function in javascript for pdf and added it as a button to my menu
the function adds a annotation to the pdf, but i want to be able to determine where the annotation will be placed. i want to use the mouse for that.
i cant find a way for connectiong a mouse click to the function i wrote,
according to what i saw in the java api documantion there is no way to bind a click event to the function.
i tried doing something which is pure java script like this.addEventListener with no success
also tried adding to my code some js libraries like KeyboardJS but also no success.
id rather have a way to bind my function to a mouse click, but a way to bind it to a specific key could also be very useful.
thank you