We Keep Coding

Chrome Extension - Trigger events on content_scripts using JQuery

I wrote a Chrome Extension that automatically fills some registration forms. There are some select fields that need to be triggered on "change" event in order to start some Ajax calls.
First I use JQuery attr or val to change the value of the select field, and than I use .trigger to invoke the "change" event, but this last one doesn't work.
Example:
I want to select the option that contains the word "London" and invoke
the change element in order to start some operations of the native
code that have some listeners on "change" event
jQuery("#SelectElement option:contains('London')").attr("selected", "selected");
jQuery("#SelectElement").trigger("change"); <--- not works
I tried also:
jQuery("#SelectElement option:containt('London')").attr("selected", "selected").change();
But if I try this code on console, it works.
Suggestions?

I had the same problem and as far as I know it's because of something called framework event listeners. that you cannot trigger from your code by jquery! but the solution is trigger the event this way:
$(selector)[0].dispatchEvent(new Event("eventName"))

In my case,
var event = new CustomEvent('change');
did not work.
I had to initialize the event like this:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("keyup", true, true);
First arg 'bubbles' should be true so the event should bubble up through the event chain.
event.initEvent(type, bubbles, cancelable);
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

Ask if event has listener in jQuery

A function triggers an event and passes on some data which then will possibly be processed by a listener. If not, the function wants to process the data by herself. Well, as I don't know if the package was handled or not, my idea was to find out if there is a listener at all. Is there a way to do this or does anyone have better ideas to my problem?
Thanks in advance!

You can to this with jQuery prior to 1.8 like this:
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
$(document).ready(function() {
$("#click_here").click(function() {
alert("Handler for .click() called.");
});
console.log( $('#click_here').data('events') );
});
</script>
<div id="click_here">Click here</div>

I created a plugin mainly to be used in your tests.
// Example usage
$('.foo').hasEvent('click', someHandler)
// returns true if someHandler is bound via jQuery on '.foo'
// for the click event
The plugin is tested to work with jQuery 1.7 and up
The plugin is hosted on github

I had a VERY similar problem. It's never been something that's been properly supported in jquery and instead was kind of a hack. So you could do it prior to version 1.8 in jquery by using
data('events')
After 1.8, you can use:
$._data( $('.element')[0], 'events' );
BUT if you're trying to do what I was doing... make sure an event handler is only assigned once on a control (i.e. a save button after some form validation), then you can either:
Add a class and remove it to indicate whether an element has an event (ugly).
Remove any handers before assigning it i.e.
$('element').unbind('event');
$('element').on('click', save);

Focusin using live not working -jQuery

I am trying to attach a focusin event on a future element using jquery 1.5.2. Just to clarify,this has also been attempted using jQuery 1.7.2 with the same issue.
The event is not firing as i expected it to. Yet a similar click event works correctly using .live
I've put together an example here for you to take a look at my code. Hopefully this will not been a simple issue (although it always seems to be!).
Link to jsfiddle
This is my focusin event i am trying to attach
$(".active").live("focusin", function() {
$(this).text("focusin using live");
});
I believe i have found some related questions, but im unable to fix my code using them. I would prefer an explanation over a "here is your code corrected answer".
If you think i need to add more information to my question please leave a comment.
Related
jQuery focusin and focusout live events are not firing
Why the "focusin" event handler isn't called?

You need to focus the element if you expect the focusin event to trigger. The fact that you are applying a DOM element the .active class doesn't mean that you are focusing it.
$('.active').live('focusin', function() {
$(this).text('focusin using live');
});
$('.active').focus();
​
Here's a demo.
Another thing you will notice is that .live() supports the focusin event starting from jQuery 1.7.1. Obviously in this version of jQuery, .live() is deprecated and you should use .on():
$(document).on('focusin', '.active', function() {
$(this).text('focusin using on');
});
$('.active').focus();
​

onChange event not firing on a textbox in Chrome

I have the following code to bind some validation logic to be fired when a user updates the value of a textbox. I expect that the //Do some stuff here code will execute when any of the textboxes it is bound to lose focus.
function RegisterHoursValidationHandlers() {
$('.topic-frame-body input[type=text]').live('change', function () {
//Do some stuff here
});
}
This works exactly as I expect in IE, Firefox and Safari. However, the event never fires in Chrome and I have no idea why.
UPDATE: I was able to get the desired effect by changing 'change' to 'blur'. Though this still doesn't explain why it doesn't worh with 'change'.

There's no known quirk about chrome. (the change event is supported across all browsers)
Example with live showing it working against dynamic content.
Test it here:
There is a piece of information or an assumption being made here that makes this unsolvable.
UPDATE: If it works when you change it to blur, it is possible that you are overwriting the previous event or function. By changing it to blur, whatever is overwriting it no longer will because it is a a different event.
This would also explain why you are not seeing any errors. (keep in mind, I believe that jQuery will chain events bound to the same elements, but live() is a bit of a special case - but that fact might point to it being the function, not the event binding)

Try using .delegate() instead http://api.jquery.com/delegate/
I've tried you code in both FF and Chrome - http://jsfiddle.net/B3aRy/ - It worked in both. So maybe its an issue elsewhere in your code?

What version of Jquery are you using?
I can't see the issue myself, but .live does not support the "change" event until jquery 1.4+

Try:
function RegisterHoursValidationHandlers() {
$(".topic-frame-body input[type='text']").live('change', function () {
//Do some stuff here
});
}
With the quotes around 'text' as I have it. Worth a shot.
Or try:
$(".topic-frame-body input:text").live();
The point being, I think the problem is in the details of how you're targeting the input field, rather than in the method.

Html Select List: why would onchange be called twice?

I have a page with a select list (ASP.NET MVC Page)
The select list and onchange event specified like this:
<%=Html.DropDownList("CompanyID", Model.CompanySelectList, "(select company)", new { #class = "data-entry-field", #onchange = "companySelectListChanged()" })%>
The companySelectListChanged function is getting called twice?
I am using the nifty code in this question to get the caller.
both times the caller is the onchange event, however if i look at the callers caller using:
arguments.callee.caller.caller
the first call returns some system code as the caller (i presume) and the second call returns undefined.
I am checking for undefined to only react once to onchange, but this doesnt seem ideal, whcy would onchange be called twice?
UPDATE:
ok, found the culprit! ...apart from me :-) but the issue of calling the companySelectListChanged function twice still stands.
The onchange event is set directly on the select as mentioned. This calls the companySelectListChanged function.
..notice the 'data-entry-field' class, now in a separate linked javascript file a change event on all fields with this class is bound to a function that changes the colour of the save button. This means there is two events on the onchange, but the companySelectListChanged is called twice?
The additional binding is set as follows:
$('.data-entry-field').bind('keypress keyup change', function (e) { highLightSaveButtons(); });
Assuming its possible to have 2 change events on the select list, its would assume that setting keypress & keyup events may be breaking something?
Any ideas?
ANOTHER UPDATE:
The select element looks fine and all works if I remove the additional 'change' binding. when the 'change' binding is added that event fires once and the hard-wired 'onchange' is fired twice.
If both events are bound via jQuery all works ok, it seems that mixing hard-wired onchange and jquery bound change events cannot be mixed? I guess this answers my question but seems like an issue with IE and binding these events with jquery.

I agree with your assessment. I've updated my small example at http://gutfullofbeer.net/onchange.html to include a jQuery handler in addition to the DOM 0 handler (the one set with the "onchange" attribute). It appears to be a jQuery bug, or at least a failure of jQuery to deal with the IE weirdness.
I logged jQuery ticket 6593.

I also encountered this issue when using IE8 and made some changes to fix this.
Instead of specifying the onchange event on the dropdownlist, I used the jquery.change() event.
Markup:
#Html.DropDownList("drpList", myList, new { #class = "myClass", id = "drpList" })
Script:
$(function () {
$('#drpList').change(function () {
.... your functionality
});
});
This works for me.. Hopes this help.