Develop Reference

How to use Jquery to update textarea value in react app

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";

Material Design Lite + React - Issues with Tooltips

Recently, I have been integrating Material Design Lite into my React web application. For the most part, everything has worked out just fine, but currently I am having some issues with React's event handling, which doesn't seem to play nice with some MDL components.
In particular, I have a DOM element with an onClick handler, which works perfectly fine, until a MDL Tooltip is added, which causes the onClick to no longer fire. I've tried pretty much every variation possible (put the tooltip somewhere else in the DOM, attach the onClick handler to a container div which has the tooltip as a child, etc), and I just can't seem to get it to work.
Here's a JSBin that demonstrates the issue (I've also included an example that uses jQuery to bind a click handler to the element after the component mounts, which actually DOES work):
http://jsbin.com/sewimi/3/edit?js,output
I have some theories as to why this isn't working, but I don't know enough about either React or MDL to verify any of them.
I believe it has something to do with the way React handles events, and for some reason, MDL seems to be clashing with it. From the documentation:
React doesn't actually attach event handlers to the nodes themselves.
When React starts up, it starts listening for all events at the top
level using a single event listener. When a component is mounted or
unmounted, the event handlers are simply added or removed from an
internal mapping. When an event occurs, React knows how to dispatch it
using this mapping. When there are no event handlers left in the
mapping, React's event handlers are simple no-ops
This makes it seem like MDL might be messing with React's internal mapping of events, which causes my click on the element to become a no-op. But again, this is just a complete guess.
Does anyone have any ideas about this? I would prefer not to have to manually bind an event listener in componentDidMount for each of my components that use MDL Tooltips (like I did in the example JSBin I provided), but that's the solution I'm going with for now.
Also, since I was not sure if this was an MDL specific bug, I opted to post this question here instead of on their issues page. If anyone thinks I should post it there as well, let me know, and I can do that.
Thanks!

I faced this same issue too. I was trying to capture event clicks on a mdl-menu__item. And you are right in that React's synthetic event system is clashing.
What happens is that if an event happens inside your React component, your component will be the last to hear of the event. My work around was circumvent reacts event and use a react component which helps to attach native events react-native-listener.
<NativeListener onClickCapture={this.onListClick}>
<li className='mdl-menu__item' >
{...}
</li>
</NativeListener>
// This will be called by the native event system not react,
// this is in order to catch mdl-menu events and stop the menu from closing
// allowing multiple fields to be clicked
onListClick(field, event) {
event.stopImmediatePropagation();
// console.log('click');
}
My solution was for the mdl-menu but I'm sure it applies to the tooltip too.

A little late but
componentHandler.upgradeAllRegistered();
gets dynamically loaded elements working.
Note: that if you move the target element via CSS position the tooltip does not render to the new position automagically, you will need to id it and position it too.

Prevent automatic triggering of a click event on client side using the console window

Clicks on any HTML element can be triggered merely by using the jQuery function .trigger("click") on any selected element. Automating this click triggering can cause a problem when time taken to perform the click matters, for ex: Time based game.
How do I stop the automatic triggering of the click event that can be done using the developers tools (the console window)?
Alternatively,
How do I differentiate between a click made by a user and a click triggered from the console window?
Thanks for the help.

If the person simulating the click does it carefully enough, you can't.
If they just use $(/*...*/).click(), it's easy: A real click event will have properties for the mouse position (pageX and pageY), one created using $(/*...*/).click() won't.
But it's fairly easy to create an event that has those properties, so that would only weed out incompetent cheaters rather than all of them.

Using emit to trigger an EnhancedGrid event

It seems there is a bug in the dojox.grid.EnhancedGrid. The "onApplyCellEdit" is not triggered on editing a cell and then clicking Ok button in IE browser. Here is a jsfiddle,
http://jsfiddle.net/eZVkA/3/
As you can see, when you edit the cells in second column and then click on the button (without pressing enter or clicking on the grid), the "onApplyCellEdit" is triggered in all the browsers except IE. I presume this is a bug.
I am trying to resolve this by using emit function but not sure how to use it properly. I wish to use emit on click event of the button and trigger the "onApplyCellEdit" of the EnhancedGrid.
Any solutions?

You do not need emit but it is a good function to learn though.
http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
by calling grid.edit.apply(); it will trigger the event. Grid is referring to the widget itself.

Event to detect change of an HTML5 number control in Webkit/Chrome?

HTML5 gives us some new input elements to play with, such as <input type=number>. This renders (in Chrome) as a textbox with two cycle buttons inside the textbox, for incrementing and decrementing the numeric value inside the box.
For a personal hobby project, I'm using this control. However, I'm stuck with one issue:
Is there a way to detect the value being changed using a javascript event? I had expected the onChange event to fire, but no such luck. Also, onClick only triggers when the textbox content is clicked, not when the cycle buttons are clicked.
Any ideas? (apart from: hey, it's HTML5 Forms, don't expect anything to work yet!)
Edit: As mikerobi points out below, the onChange event does fire as soon as the element loses focus. Still not quite what I'm looking for, so other comments and suggestions are welcome!

Result of the bugreport: Won't Fix, because the input event is fired when those buttons are pressed. It's part of the HTML5 spec. So problem solved, thanks to mikerobi's sugestion to file the report.

The onChange event gets fired when when the box loses focus, but you probably already know that.
The HTML5 specifies that a number input should be a text box or spinner control, but the spec does not appear to have any guidelines for how a spinner should look or behave, leaving those decisions up to the browser vendors.
It appears that in the Mac Safari, the spin buttons do respond to click events, you might want to file a Chrome bug report, I suspect it was just an oversight.

$.click() works fine. If you click and hold, it doesn't until you release.