Google Chrome Developer Tools Issue with Jquery in the Console

Question

When I try to execute below JQuery code in Google Chrome's developer tools

$("#u_16_0").val("AJ College, Sivakasi")

am getting below error:

Uncaught Error: <[EX[["Tried to get element with id of \"%s\" but it is not present on the page.","#u_16_0"]]]>(…)h @ LGuPoDEwQGD.js:36i @ LGuPoDEwQGD.js:36(anonymous function) @ VM580:1

Could somebody please help me to resolve this issue? I've verified that the element is present in the page. I mean if I just type $("#u_16_0") in the console, the element is printed.

Please see the below link to screenshot containing version information of my Google Chrome.

[

UPDATE - 1

I managed to accomplish this with the below plain javascript code

document.getElementById("u_16_0").value="University of Cambridge"

UPDATE - 2

Amin's answer based on jQuery also worked. Hence, accepted it as answer and awarded bounty.

Answer 1

Note: Do not expect $ is always JQuery.

The Chrome console does not appear to have access to the content script's execution context.

Wrong, it does. You need to look at the correct place:

Instead of <page context> below in the animation, you have to select chrome-extension://<your extension id>

You can click "top" below in your version of chrome.

The previous screencast shows that the Console tab of the Chrome developer tools has two dropdown boxes at the bottom, which can be used to change the execution environment for the developer tools' console.
The left side can be used to change the frame context (top frame, so iframe, ...), and the right side can be used to change the script context (page, content script, ...).

Reference: Why will jQuery not load in Facebook?

Answer 2

This is because of jQuery $ sign conflict with other libraries like some facebook js libraries. you should use jQuery instead of $:

jQuery("#u_16_0").val("AJ College, Sivakasi");

Answer 3

The problem is when you assume that $ is always jQuery and it is not. Simple way to see if it is to console.log($) and see what it returns.

jQuery usually returns

function (selector,context){return new jQuery.fn.init(selector,context)}

or

function (a,b){return new n.fn.init(a,b)}

Now anyone can define $ to be anything. On Facebook it appears to be an alias for document.getElementById() and has some checks in it

function i(j){return h(j);}

running $("contentCol") will return a DOM element.

And if $ is not defined, in Chrome Dev tools, it is an alias for document.querySelector

$(selector, [startNode]) { [Command Line API] }

so in the end, do not expect $ to be jQuery.

Answer 4

From looking at this answer it looks as though your call to:

$("#u_16_0")

is not actually calling jQuery.

Try changing the page context