jquery keyup dont work from code, but work from chrome.console

Question

I made a google chrome plugin

tasks (on sportingbet.com):

put price for the bet
submit the basket

the problem:

$(".userItems input.amount").val(110); -> works (but need to trigger the keyup)
$(".userItems input.amount").keyup(); -> doesn't work but when I type this in the console, it works.

Whats the difference?

Chrome extensions are sandboxed, while the chrome console allows for more flexibility. Perhaps you cannot cannot call .keyup() from within the extension? — A Person, Apr 13 '12 at 16:29
Read about [Content script vs Injected script vs Background script](http://stackoverflow.com/questions/9915311/chrome-extension-auto-run-a-function/9916089#9916089). The jQuery code is probably located in a Content script, whose global context is **not** equal to the page's global context. For the correct way to **inject** code, see [this answer](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script/9517879#9517879). — Rob W, Apr 13 '12 at 16:31

score 1 · Answer 1 · answered Apr 15 '12 at 18:44

This is mostly interesting, but one angle is to create a simulated key event:

function simulateKeyEvent() {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyEvent(                                                                                      
             "keyup",
              true /*let event bubble up*/,                                                      
              true /*can the event be canceled?*/, 
              null, 
              false /*ctrl key held down?*/,
              false /*alt?*/,
              false /*shift?*/,
              false /*meta (cmd)?*/,
               9 /*keyCode*/,                                                      
               0);

  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(event);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

Now, to actually solve your problem, you might want to run the code outside the extension isolated world, in the page's javascript. To do this, I have a nifty function for you:

function runInPage(code) {
  var script = document.createElement('script');
  script.innerHTML = code;
  document.documentElement.insertBefore(script);
}

Then try runInPage('$(".userItems input.amount").keyup();');

But you'll probably need to load jQuery before this, so do:

var jq = document.createElement('script');
jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
document.documentElement.appendChild(jq);

score 0 · Answer 2 · answered Apr 13 '12 at 16:29

0

.keyup() without argument will just trigger any callback attach to the keyup event for that input

.val(110) all that is suppose to do is set the value for the input element, which is why not event is triggered.

.val(110).keyup() will do both

answered Apr 13 '12 at 16:29

GillesC

10,647
3
40
55

jquery keyup dont work from code, but work from chrome.console

2 Answers2