FAQ Database Discussion Community


Add payload to vanilla JavaScript Event

javascript,jquery,javascript-events
Is there a way to add payload to vanilla JavaScript event like you can do in jQuery? // jQuery $(document).trigger('event', payload); // Vanilla JS window.dispatchEvent(new Event('event', ??? I guess I have to use my own Event Bus of some kind?...

EventTarget.addEventListener()'s useCapture argument use?

javascript,javascript-events
I am studying the vanilla JavaScript and I have some trouble understanding what is the use of this useCapture argument in the EventTarget.addEventListener() function. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener useCapture Optional If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched...

Invoke marshalled COM interface multiple times

javascript,javascript-events,com,event-handling,activex
I am writing a COM object for JavaScript consumption. JavaScript code is turn runs in an hosted WebBrowserControl. I need to fire some events from COM object to JavaScript, the excellent guide to which at Dr. Dobbs e.g. I have following in my *.idl IJSCallback { void Listen(IDispatch* pJSMethod); }...

jQuery Text Editor (jqte), using change event

javascript,jquery,javascript-events,jqte
I am trying to write some code for change() event using jQuery Text Editor (jqte), I have two functions which give jqte functionality to textarea's One for editors loaded with Javascript, when clicking some elements in a page function onLoadEditor(){ jQuery(".comment-editor").jqte({ // some jqte params, such as fsize: false,indent: false......

How can fetch the text from html tag in meteor template event?

jquery,templates,javascript-events,meteor,meteor-helper
How can I get "option 1" from below code: <template name="MyTemplate"> <div class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false"> <button type="button" class="btn btn-sm btn-primary">Add</button> </a> <div class="dropdown-menu dropdown-alerts"> <form method="post" id="some-form" data-remote="true" accept-charset="UTF-8"> <div class="form-group"> <label>Select Option</label> <div class="input-group">...

Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

javascript,d3.js,javascript-events,mouseover,treemap
I am working on putting together a zoomable treemap using D3. I'm starting with basic code at https://gist.github.com/vibster/3257874. I'm including the git for the whole code, but will include the relevant section below. To the cell variable, I am adding a mouse over function from this previous answer: Zoomable treemap...

Using javascript or jquery to auto populate the current time

javascript,jquery,html5,javascript-events
I am trying to use javascript and/or jquery to auto populate the time in an type time field; not the date. It auto populates fine. However, i am trying to have it auto populate the current time rather than a specified time. (e.g."17:40:11") How do I get the current time...

What WheelEvent.deltaZ refers to?

javascript,javascript-events,mousewheel
While I was working on JavaScript events, I found a troubling element on the wheel event: the deltaZ member. I understood what was deltaX as horizontal scroll (available with some devices like a touchpad) and deltaY as vertical scroll (that is what any standard wheel do) but for deltaZ, the...

http.createserver vs net.createserver in node.js

node.js,asynchronous,express,javascript-events,tcp
I am having trouble understanding the difference between net.createserver and http.createserver in node.js. I have read the documentation for both methods located at these two urls https://nodejs.org/api/net.html#/net_net,https://nodejs.org/api/http.html#/http_class_http_server. I understand that http.createserver creates an http server, however the documentation says that net.createserver creates a tcp server. I understand that tcp is...

onended audio event firing without playing the audio

javascript,html5,audio,javascript-events
I have multiple audio files that i need to be played. and only when all audio has been played completely the next section is supposed to show. the code that i've written fires automatically without playing any audio. how should i do it? here's my code <!DOCTYPE html> <html> <body>...

Conditionally include script for browsers

javascript,jquery,javascript-events,reference,conditional-statements
I have such kind of script code setTimeout(function () { $('.grayscale .inactive img').each(function () { $(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({ 'position': 'absolute', 'opacity': 0 }).insertBefore(this); this.src = grayscale(this.src); }).animate({opacity: 1}, 500); $(".grayscale li").hover(function () { $(this).find('.gotcolors').stop().animate({opacity: 1}, 200); }, function () {...

Can't Add Up Radio Button Values with jQuery

javascript,jquery,html5,jquery-mobile,javascript-events
I'm trying to add up all the values of the radio buttons selected on Submit button press. It sometimes changes the 0 to a 200, but it isn't adding correctly. I'm not quite sure what is going on with this one, since the total amount sometimes changes, but isn't accurate....

Move a button created dynamically JavaScript

javascript,javascript-events
I am a very beginner! I've dynamically created a random number of buttons. After creation, I want them to automatically start moving. From some reason or another, my code creates the buttons, but doesn't make them move. Thanks a lot! javascript.js function myFunction() { for (i = 1; i<=Math.random() *...

Avoid Adding Event Multiple Times

javascript,javascript-events,mootools
I am dynamically adding events using addEvent("keydown", function() {}); to an element. My problem is that there are times when this code get's run on the same element twice or more. The behavior becomes clunky as the function registered for that event runs a couple of times. Is there a...

How is the “e” parameter assigned to the event?

javascript,javascript-events
I can see a few threads around the e parameter but there is one thing I can't fully understand, though I'm sure it's an obvious answer. When the e parameter is passed into a function that's called from addEventListener() the e looks to be assigned to the event object. What...

What is the most elegant, reliable and efficient way to get the grandparent's first child in JQuery?

javascript,jquery,html,algorithm,javascript-events
So I have a piece of HTML like <form action="/AssetBundle/DownloadFile" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#masterLinkHolder" id="form0" method="post"></form> <table> <tr> <td>someimage.png</td> <td><img src="imageicon.png"></td> <td><button type="button">Click to Download</button></td> </tr> <tr> <td>somedocument.docx</td> <td><img src="docicon.png"></td>...

JQuery on(“change”…) method not working in Plunker

jquery,javascript-events,onchange,plunker,plunkr
I created this Plunk to demonstrate and discuss a shopping cart I'm developing that is in action here (while it lasts). In the "real" one, selecting a species fills the Variety drop-down. However, it's not working in the Plunk. In fact, $('#species-select').on('change', ... is never firing. Must be some peculiarity...

Keydown and keypress events gives different keyCode

javascript,javascript-events,keypress,keydown,keycode
I've read through related answers and articles on SO, but still doesn't get it : On chrome console if I add two listeners to output keyCode on keypress and keydown events I get different keycode when the key is lowercase. When uppercase however, the keyCode appears to be the same...

ext.net button click direct events

asp.net,extjs,javascript-events,ext.net,gridpanel
I have a big form with many fieldsets and gridpanels and I need to submit all data with one confirm button. Actually I'm using this: <ext:Button runat="server" Text="Finalizar" Width="150" ID="Button1" Disabled="true"> <DirectEvents> <Click OnEvent="SalvarDados" After="#{StoreVerifLimpeza}.sync();"> <Confirmation ConfirmRequest="true" Title="Confirmação" Message="Confirm?" /> <EventMask ShowMask="true" Msg="Salvando..." /> </Click> </DirectEvents> </ext:Button> But apparently the...

Handling Alt + Enter key press in JavaScript

javascript,javascript-events,keypress,keyboard-events
I'm trying to get some pure JavaScript code to handle Alt + Enter key press event in a text area but am failing miserably. What is wrong? Html <textarea id="ta" style="width:100%;height:500px"> </textarea> JavaScript var ta = document.getElementById('ta'); ta.onkeypress = function(e) { if (e.charCode == 10 && e.altKey){ alert( "Key Pressed:...

Avoid onRowClick event when outputLink is clicked inside of RichFaces datatable

javascript,javascript-events,datatable,richfaces
How to avoid the call to onRowClick on the datatable on the column that has the outputlink (target to a new window)? <rich:dataTable id="dt" value="#{bean.cars} var="_car"> <a:support event="onRowClick" action="#{action.navigateToCarDetails(_car.id)}"/> <rich:column> <f:facet name="header">Select</f:facet> <a:commandLink onclick="Event.stop(event)" action="#{bean.toggleSelectedCar(_car.id)}" reRender="dt" ajaxSingle="true" limitToList="true"> <h:graphicImage...

How to make a react component that can be rendered with no data and later rendered with data?

javascript,javascript-events,reactjs
I have a situation that I'm sure is common and I just haven't learned the react way for accomplishing it. Let's say I have this: var appView = new React.createClass({ render: function() { return ( <div> <SomeSubview/> </div> ) } }); React.render( React.createElement(appView), $('#app').get(0) ); My question is how should...

Constantly check the length of an element and perform an action if it is ever 1

javascript,jquery,events,javascript-events,google-chrome-extension
I have an element on a page that I am constantly monitoring. If at any time that length is equal to 1, it means it exists on the page (the user has logged out) and I want to prompt them with a popup to login. So at the moment I...

Node.js EventEmitter events no longer triggered on node 12.1+

node.js,events,javascript-events,eventemitter
I have stripped the problem back to the following code: var EventEmitter = require("events").EventEmitter, util = require('util'); function Foo() { EventEmitter.call(this); } util.inherits(Foo, EventEmitter); Foo.prototype.on('hello', function() { console.log("World"); }); Foo.prototype.start = function() { console.log('Hello'); this.emit('hello'); } var foo = new Foo(); foo.start(); Using Node v0.10.36 this code outputs: Hello World...

Send an event using $emit from directive to controller

javascript,angularjs,javascript-events
I'm trying to send an event when an item gets selected, from directive to controller using $emit. I've two update functions for organizations and another for people. My directive should specify which event should emit. Here is my update functions // For organization $scope.updateOrgs = function(selectedVal) { } // For...

How to get a button's ID when clicked in Windows 8 apps?

javascript,html,javascript-events,click,windows-8.1
I'm trying to get the ID of the button I clicked but I can't do it. I tried everything but it doesn't work. How can I do this? ...

what does onclick='mycheck(“+i+”)' do?

javascript,javascript-events
Im fairly new to javascript and would appreciate your explaination on this code. i was provided with the below code as an example and needed to make some changes too it but im unsure what onclick='mycheck("+i+")' is meant to do. i know its calling the function mycheck() but not sure...

Why am I getting an uncaught type error with the following code?

javascript,javascript-events
The purpose of this code is to have 3 divs that change color when clicked and when the two colors in divs on the left make up the one on the right the user receives a positive message either on the console or the DOM. I thought I had this...

tinymce - update plugin property after editor initialization

javascript,javascript-events,tinymce,tinymce-4
I need to update the colors list after init (or even on init), the plugins is textcolor. I'm using tinyMCE 4.1.9. How can I do that?

How can get custom attribute value in meteor?

javascript,checkbox,meteor,javascript-events
How can get the value of "key" attribute which is checked??? Html Code: <input type="checkbox" class="each-tab-1" key="some1" value="456"> <input type="checkbox" class="each-tab-1" key="some1" value="789"> <input type="checkbox" class="each-tab-1" key="some2" value="890"> <input type="checkbox" class="each-tab-1" key="some2" value="901"> <input type="checkbox" class="each-tab-1" key="some1" value="012"> JS code: 'click .action' : function(event, template){ $("input[class^=each]:checked").each(function(){...

Make function work synchroniously (wait local events to get fired)

javascript,javascript-events,synchronous
I'm having problems with JavaScript logic. When we have a function that needs data from event-handler to generate result, is it possible to get that data back to function? For example, if we call Image() object or FileReader() inside and wait for its load event to get fired in order...

Using values from a Datalist to populate a input field

javascript,javascript-events
I am trying to populate an input field based off of a datalist selection. So if a person chooses the name jimmy.johns, the input field should populate with 5555555555. Here's my code. <html> <head> <title>Countdown</title> <input name="customer" list="customer" /> <datalist id="customer"> </datalist> <br> <br> <input id = "phone" name ="phone"...

Google maps event listener dragend

javascript,google-maps,google-maps-api-3,javascript-events,google-maps-markers
I am adding a event listener to my marker, the function for the marker is function setupMarkerWaypoint(){ console.log('setting waypoint marker'); waypointMarker = new google.maps.Marker({ position: default_latlng, map: mapBooking, icon:"http://maps.google.com/mapfiles/ms/micons/blue.png" }); waypointMarker.setVisible(true); function geocodePosition(pos) { geocoder.geocode({ 'latLng': pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else...

Why is 'event' available globally in Chrome but not FF?

javascript,jquery,javascript-events,event-handling,global
While working on an answer for another question, a strange bug came up related to the event object being available in an anonymous function without being passed in. In Chrome the below works fine, but FF throws an error. $(document).ready(function() { $("#uspsSideboxTrackingClose").click(function() { event.preventDefault(); console.log(event); }); }); Chrome: FireFox: ReferenceError:...

JavaScript events and bubbling

javascript,javascript-events,event-bubbling
I have the following (simplified) markup code: <div id="container"> <div data-value="1"> <span>Click me 1</span> </div> <div data-value="2"> <span>Click me 2</span> </div> </div> <div id="messages"></div> I want to take advantage of bubbling by attaching an event listener only on the #container, and get the clicked children's data-value. document.getElementById('container').addEventListener('click', function(e){ document.getElementById('messages').innerHTML =...

Why is my Java script code not running? (Form Validation)

javascript,html,javascript-events
This is my HTML: <html> <head> <title>Article</title> <link rel="stylesheet" href="pop.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript" src="validator.js"></script> <div id="comment_form"> <form method="POST"> Name: <input type="text" name="name" id="name1" onblur="checkname()"> <br/> Email: <input type="text" name="email" id="email1"...

When should I use multiple event names vs different event emitters?

javascript,node.js,javascript-events
Which is the better way to use events? A) var doorBell = new events.EventEmitter() var light = new events.EventEmitter() doorBell.emit('open') light.emit('on') doorBell.on('open', function(){ console.log('The door is open!'); }); light.on('on', function(){ console.log('The lights are on'); }); B) var house = new events.EventEmitter() house.emit('doorOpen') house.emit('lightOn') house.on('doorOpen', function(){ console.log('The door is open!'); });...

Track Links Using Events - Race Conditions

javascript,angularjs,javascript-events,google-analytics,adobe-analytics
I am building AngularJS applications which have common header with links to each of the application: <a href="https://app1.company.com">App1</a> <a href="https://app2.company.com">App2</a> Each application is running on its own subdomain and when user clicks a link on the header - page redirects to that application. I have to track user actions with...

onClick on img works but cannot dynamically attach the same even in javascript, what is wrong?

javascript,javascript-events,onclick
The following code creates two objects, one statically defined in html, with an event that works, and one defined in javascript that does not. Obviously this can be done in javascript, so what is wrong? <!DOCTYPE html> <html> <head> <script> function build() { var img = document.createElement("img"); img.src = "cat.jpg";...

Why is sortable event target null

javascript,javascript-events,sortable
Using RubaXa Sortable, I'm doing a pretty standard (given it's an example on the library's site) drag of an item from one a group to another. I need to store the original and target group ids as variables. All works well except the target is always NULL. The example on...

Change the functionality of a button

javascript,jquery,html,javascript-events
Currently I have a display where I have a button START, on click of this button the timer starts and it gets replaced by 2 buttons. these 2 buttons are submit and walkaway. on the submit of each of these buttons a script is run. on the click of submit...

How is Facebook able to autoplay videos on mobile browsers

facebook,jquery-mobile,javascript-events,facebook-javascript-sdk,html5-video
I realize that many questions have been asked about autoplay videos on mobile devices but before my question is marked as a duplicate, I must say that I looked through a lot of those questions and answers and I have not found a satisfactory answer. Mostly, all of the answers...

Javascript function called with button onclick, fails with onload

javascript,html,javascript-events
I am trying to use an external javascript function in the body tag : <!DOCTYPE html> <script type="text/javascript" src="js/Long.min.js"></script> <script type="text/javascript" src="js/ByteBufferAB.min.js"></script> <script type="text/javascript" src="js/ProtoBuf.min.js"></script> <script type="text/javascript" src="js/fs.js"></script> <script type="text/javascript" src="js/bundle.js"></script> <script type="text/javascript"...

Why isn't my Google Tag Manager event listener being installed?

javascript-events,google-analytics,google-tag-manager
I have a very simple Google Tag Manager trigger that looks like this: I also have a corresponding tag that uses this trigger. I have published my container, and the tag shows up when previewing/debugging the container: I also see my link's id in the response from GTM. However, I...

using jQuery's delegated event on() within every turbolinks page:load

jquery,ruby-on-rails,ruby-on-rails-4,javascript-events,turbolinks
I had this code in my rails app: $(document).ready( function() { myCustomFunction("#link-selector"); } function myCustomFunction(linkCssSelector){ // some stuff... $(document).on('click', linkCssSelector, function(){ // ...some other stuff... }); } The click event handling is already delegated to the document, but now I have to add Turbolinks to my app. Then, I would...

How to prevent my jQuery textarea Focus event from firing repeatedly for ulimted times in a row

javascript,jquery,javascript-events
I have something like the basic JavaScript jQuery code below that is only called once in my project code however it alerts 100+ times when my textarea attached to the event is focused by clicking my mouse cursor into it! projectTaskModal.cache.$cmtTextarea.on('focus', function() { alert('ON FOCUS EVENT'); }); My goal is...

Jquery Click event dosen't fire on paranet div that has same size as descendent img?

jquery,javascript-events,event-handling
The HTML code is as below (the img fits to the div parent) : <div id='draggable_task' style='display: inline-block; position: relative; overflow: hidden'> <img src='../Content/BPMN Icons/Big Icons/BigTask.png' /> <p style='position: absolute; top: 20%; left:20%;'>Task name</p> </div> The JavaScript code is as below (DrawArea is the top container): $("#DrawArea").on("click", function (e) {...

Accessing 'this' table cells value

javascript,dom,javascript-events
I have a form, after form has been filled and add button pressed - all the values from the form get to PouchDB and then into the table in the browser. I need to make an "edit" option. The idea is: <td ondblclick='updateVaucher()' style='cursor: pointer'>"+data[i].doc.vaucherID+ "</td> Now the question is:...

jquery fire page load event from loaded page

jquery,javascript-events,jquery-load
I'm loading a php page in a div with $("#div").load("page.php?id-blah") The page gets loaded correctly and jquery is functioning properly. In the page.php I am using the $(document).ready(function() { ...perform things.. }) call but its not fired. What event do I have to use to make `perform things run? ...

Why is my node event callback showing up in the event as undefined?

javascript,node.js,url,javascript-events
I am trying to pass back a url string as "data" into my eventhandler. My request to the server is "https://172.20.10.6/index.html". The console.log below prints out "/index.html" as I expect. switch(req.method) { case 'GET': console.log("logged from plugin-https.js: url: " + req.url); ee.emit("dataIn", req.url); break; Below is the eventHandler code. The...

How to (sort of) add code to fullcalendar's renderEvents handler?

javascript,ajax,javascript-events,fullcalendar
I'm using fullcalendar 1.6.3 along with Drupal 7 (thus the need, for now, to be back on 1.6.3). I have some code that I'd like to run every time the view of my calendar changes (via ajax requests) -- forward or backward in time, or between month/week/day view. Based on...

Bind multiple events in javascript

javascript,html,javascript-events
I tried the following to change a span to red on mouseover and black on mouseout: <span onmouseover="this.style.color='red' onmouseout=this.style.color='black'">Mouse over me!</span> but it does not work! How can I bind more than one event to a single element using javascript?...

jQuery selector precedence when using pattern matching

javascript,jquery,javascript-events,jquery-selectors,event-handling
I am creating a form that implements a bunch of similar elements. They are custom select boxes, created out of <ul>s. Some of these elements are slightly different in the way I want the mousedown event to be handled though. The way I have it set up currently is that,...

Create a custom event for a Polymer Custom-Element

javascript,javascript-events,polymer
I've been trying to create an event to be triggered given certain conditional (more general case), but I have not found a way, at least not in the official documentation of Polymer for handling events https://www.polymer-project.org/0.5/articles/communication.html The custom element listen to another event, so he expects a condition is met...

Javascript Events Not Working

javascript,javascript-events
I am trying onfocus and onblur events. It's not working. When i click the email field the value does not disappears. Here's my code. Please tell me if there's anything wrong. <!DOCTYPE html> <html> <head> <title>More Events</title> </head> <body> <form> <input type="text" value="your email" name="email" id="email" /> </form> <script> var...

In iframe how to “unwrap” span tags

javascript,jquery,jquery-ui,javascript-events
how to unwrap span tags within Iframe. <span id="trans001" class="newtext">Directional</span> i tried to remove using this $('iframe').contents().find(".newtext").unwrap(); If remove() means it works but content also removed. i want to retain text. Thanks in advance....

dynamically added event handler disables the previous one in Javascript

javascript,javascript-events,event-handling
I am creating buttons dynamically in Javascript. Also adding dynamically an eventhandler to each button. For the last button it works but the previous ones simply are not working any longer. Here's my small piece of code. What do I do wrong? <html> <head> <script> var id = 0; function...

Backbone.js listening to events for Map control buttons

jquery,html,backbone.js,javascript-events
All, I am using Bing maps to display a map on my webpage which will be plotting geolocation data on it. I have added some UI controls directly in my HTML as a generic UI control panel (not all are relevant to MapView) <div id="navbar" class="navbar-collapse collapse"> <a id="reloadMap" title="Refresh...

Javascript override form onsubmit event not working

javascript,forms,javascript-events
I am overriding a form submit event like this: form.onsubmit = function(event) { event.preventDefault(); But when I call submit on the form like this in a separate function: form.submit(); The onsubmit function is not called and the and the form is posted as usual. Any thoughts? Edit: I am also...

WebApp doesn't recognize that an input field was changed when set with jQuery in PhantomJS

javascript,jquery,javascript-events,phantomjs,html-input
I open telegram with PhantomJS and try to fill phone number input with evaluate page like below: page.evaluate(function(){ $("input[name='phone_number']").val("123456789"); }); When PhantomJS clicks on next button with jQuery the alert massage says "tel input is empty" but when the page is rendered we can see numbers in the input field....

How do I know, via key event code, if the character just entered in a