I'm hopelessly trying to activate a change() event from a Chrome content script.
I've gone past through of the web site and Google posts, but still nothing works.
Here's a description of what I'm trying to achieve;
Consider the following web page (reachable via http://www.gilzu.com/TFF/select.html should someone be so kind to help):
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#woot').die('change');
$('#woot').live('change', function () {
$('#description').text(jQuery('#woot').val());
});
console.log("window ready");
$("#meh").click(function() {
$('#woot').val(15);
$('#woot').change();
});
$('#woot').val(21);
$('#woot').change();
});
</script>
</head>
<body>
<p>
<select id="woot">
<option id="Option1" value="15">a</option>
<option id="Option2" value="16">b</option>
<option id="Option3" value="17">c</option>
<option id="Option4" value="18">d</option>
<option id="Option5" value="19">e</option>
<option id="Option6" value="20">f</option>
<option id="Option7" value="21">g</option>
</select>
</p>
<p id="description"></p>
<p><input type="button" id="meh" /></p>
</body>
</html>
What DO work:
- on startup the
change()fires up and updates the selection box to 21 and shows right value on the div. - pressing on the button #meh, changes the selection box to 15, triggers the
change()event that shows the right value on the screen.
No surprise so far.
So I'm heading to the content script via:
$(document).ready(function () {
$('#woot').val(17);
$('#woot').change();
});
so the select tag updates, but the change() event does not trigger.
I've read the forum about Chrome's extension isolated worlds and put this theory to the test:
$(document).ready( function() {
$("#meh").click();
});
and it in fact triggers both the click event AND the change event of the select box!
Also, to contradict another post claiming that code injection of the js works:
$(document).ready( function() {
var x = $("<script type='text/javascript' />");
$(x).text("$('#woot').val(18); $('#woot').change();");
$("head").append(x);
});
Issues the same effect: select box updates but change event does not fire.
I've also tried the following:
- creating a button such as the example's
#mehwith an attached click event that triggers the select tag'schange(). only the select updates, no event fires. - changing the value of the select box via
attr(),prop(),val()only the select updates, no event fires. - firing the event via
change(), trigger('change') andselectedIndexonly the select updates, no event fires. - delaying the command via js
- using
focus()another control, this control or evenblur()the select box as some posts suggest.
your help will be most appreciated
