I have this script:
<aui:script use="aui-node,aui-io-request,aui-base,event">
AUI().use('event', 'aui-node', 'aui-base', function (A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost').on('keyup', function (event) {
alert("Hi you have performed On change Event and Thank You");
});
})
</aui:script>
Why doesn't the alert ever appear?
Your code has multiple issues:
You do not need to specify an AUI().use(//... if you are using <aui:script> with the use attribute.
You only need to specify the aui-node module as an argument to the use attribute.
You most likely do not want to set inputObject equal to the return value of the on method. Instead it seems that you would want to do var inputObject = A.one('#id');.
A change event is not the same as a keyup event, so either your .on('change', function(event) { //... or your alert message which claims that it is an onchange event is incorrect.
You may have an issue with your A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost') failing to find the element (check the browser logs to find out if this is true). If it is, your element may have a partially generated prefix which can be obtained using <portlet:namespace />.
If you put all that together:
<aui:script use="aui-node">
// possibly change the A.one() argument to '#<portlet:namespace />_Tend_ApplicationMain_WAR_ETenderportlet_vrednost'.
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
</aui:script>
Here's a runnable example:
YUI().use('aui-node', function(A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<input id="_Tend_ApplicationMain_WAR_ETenderportlet_vrednost" />
Related
I am using JSignature and am trying to figure out how to get events to fire when the signature gets focus and when it loses focus.
Binding to the change event works but focus, mousedown etc does not fire.
Would appreciate any guidance if anybody knows how to do this please
$('.jsig').jSignature({format:"image/jpeg"}) // inits the jSignature widget.
$(".jsig").jSignature.bind('mousedown', function(e) {
alert("mousedown");
});
$(".jsig").jSignature.bind('focus', function(e) {
alert("focus");
});
var j=$(".jsig").jSignature;
$(".jsig").bind('change', function(e) {
var d = $(e.target).jSignature("getData", "native");
document.getElementById('st').value=d.length+'.'+d[0].x.length;
});
If it helps anyone else, the answer appears to be add an onmouseenter to the div JSignature attaches to
<div id="jsig" class="jsig" onmouseenter="dosomething();"></div>
<script>
function dosomething(){
alert("Here");
}
Can then use the bind change to see if there is a signature or onmouseleave.
I read somewhere, the DOM is updated every time an event occurs and there is changes in data which are bound to DOM. So I wished to learn more about it. I tried the code below but the DOM is not updated when data in textarea changes but its updated whenever I click or press tab key.
var app = {
controller: function () {
var self = this;
this.model = {};
this.model.errors = [];
this.break_data = function (value) {
self.model.errors = value.split(' ');
m.redraw();
}
},
view: function (ctrl) {
return m('.content', [
m('textarea', {onchange: m.withAttr('value', ctrl.break_data)}),
ctrl.model.errors.map(function (error) {
return m('.error', error);
})
]);
}
}
m.mount(document.getElementById('app'), app);
I even tried m.startComputaion(), m.stopComputation() and m.redraw() non of them works.
The redrawing timing is described here: https://stackoverflow.com/a/30728976/70894
As for your example, the problem is not Mithril but the event. You need to use oninput instead of onchange to look for immediate changes. As the Mozilla docs for the "change" event states:
The change event is fired for input, select, and textarea
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
Here's a fiddle with your code that uses oninput: http://jsfiddle.net/ciscoheat/LuLcra77/
Note that you don't need m.redraw in the event handler anymore now when the correct event is used, since Mithril redraws automatically after every event defined in a call to m().
Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
console.info("Anchor clicked!");
event.preventDefault();
return false;
}).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});
where visiblecities is the id of the UL element and cities is a collection on which the loop iterates.
Any idea why the click event is not working?
Use event delegation to set up a single event handler that will react to all <a> elements, even if they're added after the code executes:
$('#visibleCities').on('click', 'a', function(event) {
console.info('Anchor clicked!');
event.preventDefault();
return false;
});
Though, as gdoron mentioned in the comments, your <a> elements don't currently have any content so they won't actually be clickable.
use .on.
$('a').on('click',function(){
//code here
});
Try
$('li a').on('click',function()
{
//code here
});
$.each($.MyProject.cities, function (index, city)
{
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});
use live method instead of click
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
});
Given the code below, is there a better way to register an event handler on the resize plugin? Thanks!
var target = Y.Node.create('<div class="rich-text-container"></div>');
// ...
target.plug(Y.Plugin.Resize,{
wrap : true
});
target[Y.Plugin.Resize.NS].on('resize:end',function (e) {
debugger;
// This runs, but is there a better way?
});
target.resize.on('resize:end',function (e) {
alert('this is correct');
});
Y.Plugin.Resize.NS points to the string 'resize' and indicates where on the plugin host the plugin instance will be stored. Derp.
dojo newbie - giving it a shot.
After submitting a form, If an error is returned from the server I would like to show that message on the dijit.form.ValidationTextBox
var user_email = dijit.byId("login_user_email");
user_email.set("invalidMessage", data["result"]["user_email"]);
//need to force show the tooltip but how???
Any help much appreciated.
See it in action at jsFiddle.
Just show tooltip:
var textBox = bijit.byId("validationTextBox");
dijit.showTooltip(
textBox.get("invalidMessage"),
textBox.domNode,
textBox.get("tooltipPosition"),
!textBox.isLeftToRight()
);
Temporarily switch textBox validator, force validation, restore the original validator:
var originalValidator = textBox.validator;
textBox.validator = function() {return false;}
textBox.validate();
textBox.validator = originalValidator;
Or do both at once.
I think you can show the tooltip via myVTB.displayMessage('this is coming from back end validation'); method
you need to do the validation in the validator-method. like here http://docs.dojocampus.org/dijit/form/ValidationTextBox-tricks
you also need to focus the widget to show up the message! dijit.byId("whatever").focus()
#arber solution is the best when using the new dojo. Just remember to set the focus to the TextBox before calling the "displayMessage" method.
I am using dojo 1.10 which works create as follows:
function showCustomMessage(textBox, message){
textBox.focus();
textBox.set("state", "Error");
textBox.displayMessage(message);
}
Dojo reference guid for ValidationTextBox: https://dojotoolkit.org/reference-guide/1.10/dijit/form/ValidationTextBox.html
I know this question is ancient, but hopefully this'll help someone. Yes, you should use validators, but if you have a reason not to, this will display the message and invalidate the field:
function(textbox, state /*"Error", "Incomplete", ""*/, message) {
textbox.focus();
textbox.set("state", state);
textbox.set("message", message);
}
You can call directly the "private" function:
textBox._set('state', 'Error');
You get the same result as #phusick suggested but with less code and arguably in a more direct and clean way.
Notes:
_set is available to ValidationTextBox as declared on its base class dijit/_WidgetBase.
Live demo:
http://jsfiddle.net/gibbok/kas7aopq/
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.Tooltip");
dojo.ready(function() {
var textBox = dijit.byId("validationTextBox");
dojo.connect(dijit.byId("tooltipBtn"), "onClick", function() {
dijit.showTooltip(
textBox.get('invalidMessage'),
textBox.domNode,
textBox.get('tooltipPosition'), !textBox.isLeftToRight()
);
});
dojo.connect(dijit.byId("validatorBtn"), "onClick", function() {
// call the internal function which set the widget as in error state
textBox._set('state', 'Error');
/*
code not necessary
var originalValidator = textBox.validator;
textBox.validator = function() {return false;}
textBox.validate();
textBox.validator = originalValidator;
*/
});
});