I've attached event listener with onClick property like this:
<a href="#" onClick={function (event) {
console.log(arguments.length); // prints 2
// arguments[0] = SyntheticEvent - it's ok
// arguments[1] = undefined - what is this???
}}>Click me</a>
The event listener called with 2 arguments: synthetic event and strange undefined value.
I think, normal behavior is when handler called with a single param - event object.
Windows 10. Chrome 53. React version - 15.2.0.
The second argument is the key which react gives to elements when you didn't provided your key.
React will automatically use an increasing integer number for the key.
React will determine whether it is the same component or not based on that key.
Here is more info.
In this jsfiddle you can see if you click on first link that key is 0.0 and if you click on the second one that key is 0.2 because <br/> has a key of 0.1.
Related
When I entered a value in the input box and submitted it, the mandatory item verification failed, and the system displayed a message indicating that a parameter was empty and instructed me to enter a value. The code for obtaining the input value is as follows:
(see the solution in column C)
can you give me some advice about it?
The possible cause is that the method for obtaining the value is incorrect. As a result, the value in the input box cannot be obtained.
Use the onchange event to assign a value to the model and obtain the value of the input box. The method is as follows:
Initialize the model.
data:{
accountValue:''
}
Bind an event to the input box.
<input #change="getAccountValue" value="{{accountValue}}"></input>
Assign a value.
getAccountValue: function(e) {
this.accountValue = e.value // Here, e.value instead of e.target.attr.value is used.
}
Refer to the official document instead of generating a JavaScript object for coding. A JavaScript object may lead to compatibility issues.
Currently, the data binding mode of the quick app is unidirectional.
The value entered in the input box does not change the value of accountValue in data.
If the value of the input box is changed by setting this.accountValue to xxx, the onchange event of the input will not be triggered.
In this.accountValue = xxx format, if the value of accountValue before and after the change is the same, the page will not be re-rendered.
I've a text box in my html file and I want to detect whenever a user changes the value of it and determine its updated value also. html code for text box is :
<input type="text" name="amount" id="amount" value="0" onchange="Demo().change(id,value)">
and in my scala file, I've implemented a function 'change' as :
#JSExport
def change(id:String):Unit={
appendPar(document.body,"Text Box value is changed and the new value is : "+document.getElementById(id).getAttribute("value"))
}
But it is not working in my case. What am I doing wrong here ?
Any suggestions ?
UPDATE : It is firing the event only when I press enter after altering the value in text box. Further, it is showing updated value as "0". How can I make it fetch from the text box instead of my pre defined value ?
You can use input event instead of change if you can ignore IE<=9.
The DOM input event is fired synchronously when the value of an or element is changed
From MDN.
Note that for non-text/textarea inputs (e.g. checkboxes, radio buttons, etc.) there are additional browser compatibility caveats, but you can just use change event on those. See http://caniuse.com/#search=input for details.
I also don't see where the variable id is coming from in your code. You should pass the string "amount" instead of id if that's what you want, like this: Demo().change("amount"). That would be quite unreusable, but it should at least work.
If you want the method to be more generic, note that javascript passes an Event object to all event handlers, and it has a target key which contains the HTML element on which the event happened (in this case that would be your textarea). You can get then easily get the value of that target.
If this is confusing, I suggest you try to implement this in JS first, and then translate this into Scala. You don't want to be fighting on both fronts at the same time.
You'll need to use one of the onkey handlers. For example:
Note that IIRC, this will also trigger if the user moves around with the arrow keys. So if you really want to only be called if it changes, you'll need to introduce a variable and check:
var lastValue: String = ""
#JSExport
def change(id:String): Unit = {
val newValue = document.getElementById(id).getAttribute("value")
if (lastValue != newValue) {
appendPar(document.body,
"Text Box value is changed and the new value is : " + newValue)
lastValue = newValue
}
}
I'm working on a client's ecommerce website where, when somebody signs up successfully to the site, a success message () is displayed within an unordered list element ().
I would like to create a Google Tag Manager Rule which fires when this success message has loaded on the page, but can't figure out how - and would love your help if you can spare a min!
Based on my readying (primarily Simo Ahava - http://www.simoahava.com/analytics/macro-guide-google-tag-manager/) I've tried creating a DOM Element macro where the ElementID is "success-msg", and then using that to create the following rule:
{{url}} - ends with - /artistsignup/index/index
{{success message}} - greater than - 0
{{event}}} - equals - gtm.load
However this doesn't seem to be working.
Any advice would be very much appreciated, thank you so much!
<div class="col-main">
<ul class="messages">
<li class="success-msg">
<ul>
<li>
<span>Thank you for signing up.</span>
</li>
</ul>
Alex
I have to do this a lot for my clients and the following seems to work for me. NOTICE: This solution utilizes jQuery.
The idea is that you want to run a script that checks to see if the success message is visible, when it becomes visible, push a dataLayer event to the GTM (Google Tag Manager).
Step One, create a custom HTML tag in the GTM console that fires a dataLayer event when the success message becomes visible:
<script type="text/javascript">
(function(){
try{
// Set a variable to the setInterval method so it can be cleared.
var checkSuccess = setInterval(function(){
// Check if the success message exists.
if($('span:contains(Thank you for signing up)').length !== 0){
// Check if the success message is visible.
if($('span:contains(Thank you for signing up)').is(':visible')){
// Push the success event to the GTM's dataLayer.
dataLayer.push({'event' : 'signUpSuccess'});
// Terminate the interval upon success.
clearInterval(checkSuccess);
}
}
},500);
}catch(e){
// Uncomment to view errors.
// console.log('GTM Error: ' + e);
}
})();
</script>
Notice that I didn't use document ready. That's because this tag should only fire upon event = gtm.load in GTM, which will serve the same purpose. Specifically, the following firing rule should be appropriate
{{url}} - ends with - /artistsignup/index/index
{{event}}} - equals - gtm.load
Finally, any tracking tags that you want to fire when the success message appears should have the following rule:
{{event}} - equals - signUpSuccess
Final note, if you can't use jQuery for this, then just replace the jQuery selectors with a pure JavaScript selector.
Thanks
I'm trying to process all select elements with a specific data- attribute set.
I've got the loop working to pick up the element, but whenever I try to find the value of its other data- attributes I get undefined error messages.
Here is the loop:
$('select[data-hm-observed="1"]').each(function(idx, sel) {
alert(sel.getAttribute('data-hm-url'));
alert(sel.data('hmUrl'));
});
In the loop the first alert works, but the second produces:
TypeError: 'undefined' is not a function (evaluating
'sel.data('hmUrl')')
If I use the Safari console I can get the select object, put it in a variable, and interrogate its data- attributes without issue.
It seems that the .each() is having an effect on the sel variable contents - but I can't understand what.
Using JQuery 1.7.1
UPDATE:
Just discovered that if I change the loop so that it explicitly gets the element again, it all works:
$('select[data-hm-observed="1"]').each(function(idx, sel) {
xx = $(sel);
alert(sel.getAttribute('data-hm-url'));
alert(xx.data('hmUrl'));
});
Is this the correct solution?
Can I infer from this that the element passed into the loop by .each hasn't been 'processed' by jquery, and that I have to pull it myself via $(...) so that jquery does its stuff to it - this doesn't feel right - but its working.
sel is a DOM Object here, not equipped with the abilities of a jQuery Object. First, you should turn this DOM Object into a jQuery Object like this:
alert( $(sel).data('hmUrl') );
Alternatively, you can also use $(this).data('hmUrl'), because this will refer to sel (the current DOM element in the iteration).
See also .each() 2nd Example
I've made some pretty checkboxes using some pretty simple jQuery
HTML
<span class="iconElement checkBox" id="update_Check"></span>
<input type="text" id="update" name="update" value="0" class="hidden savedData" />
JS
$('.checkBox').live('click', function (e) {
if ($(this).hasClass('disabled') != true) {
$(this).toggleClass('checked')
var thisValue = parseInt($(this).next().val());
var newValue = (thisValue - 1) * (-1); // enusures the output is either 1 or 0, [ (1-1)*-1=0 and (0-1)*-1 =1 ]
$(this).next().val(newValue);
};
});
This is simply a span with a nice CSS background sprite, which when clicked changes toggles it's "checked" class, adjusting the CSS sprite from a "Tick" to an empty box. At the same time it also changes the content of a text field (hidden by CSS class 'hidden') to a 1 or a 0 to indicate whether the box is checked.
It has to have this 1 or 0 as when the data is passed to the next stage I have to have a value, an unchecked checkbox sends no value.
This all works fine!
BUT... I also need to be able to detect the "change" event of the hidden text field.
This is to be controlled by the "savedData" class.
$('.savedData').live('change', function () {
// do stuff now we know this has been changed
});
I could of course include this within the "click" event in the code above, but that's not practical for the application.
It seems that the "change" even is only trigger by elements which are changed by the keyboard or mouse, anything changed by jQuery is not being flagged.
Initially I was using hidden input type and thought that was the issue, but have changed them all to text type now and the problem is still there!
Any tips?!
It seems that the "change" even is only trigger by elements which are changed by the keyboard or mouse, anything changed by jQuery is not being flagged.
Yes, that is correct. That is precisely how this works. Only changes made by the user trigger event handlers: programmatic changes do not. The only way to trigger them is to do so yourself:
$(this).next().val(newValue).change();
The .change() triggers a change event on the element, so the handler will be called.