13

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.

[Google Chrome Version

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.

  • What kind of element is `#u_16_0` in this context? – roberrrt-s Dec 01 '16 at 10:15
  • Can you post the html of the element? – Aruna Dec 01 '16 at 10:16
  • It is –  Dec 01 '16 at 10:19
  • Can you post the actual markup, you can right click on the element on th page and click `inspect element`, it will show the mark up the element. Then right click on the mark up and then copy and then click `copy outer html`. Can you post the same here? – Aruna Dec 01 '16 at 10:22
  • @Programmer You can check the animation version below in my answer to fix this. – Aruna Dec 01 '16 at 10:27
  • @IvanChaer - I confirmed that there's no –  Dec 01 '16 at 10:28
  • 2
    Are you on Facebook where $ is not jQuery. `$("contentCol")` – epascarello Dec 02 '16 at 05:25
  • @epascarello - Yes, you're right. In Facebook, it appears that $ is not jQuery. I accomplished this with plain javascript and updated my post. –  Dec 02 '16 at 05:41

4 Answers4

7

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.

enter image description here

Animation of how-to get access to the execution environment of the Chromne extension

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?

Community
  • 1
  • 1
Aruna
  • 11,959
  • 3
  • 28
  • 42
  • I do not see a page context option in my console. Is it not available in my version? –  Dec 01 '16 at 10:33
  • If you go to the console, you can see "top" which you have to click – Aruna Dec 01 '16 at 10:35
  • If you go to the console, you can see "top" which you have to click and select `chrome-extension://` – Aruna Dec 01 '16 at 10:36
  • I have updated the screenshot for your chrome version. Please look at my answer above. – Aruna Dec 01 '16 at 10:38
  • Also, I would like to add that typing `$("u_16_0")` in console prints the element. –  Dec 01 '16 at 10:39
  • You can select a correct `chrome-extension://` in the dropdown and execute `$("u_o_0")` in the console. If you are not sure which one to select, you can try selecting one by one and executing it in the console. – Aruna Dec 01 '16 at 10:41
  • Also, noticed, you seem to be trying this `$("u_16_0")` now. Instead, you can try with `#` as `$("#u_16_0")` – Aruna Dec 01 '16 at 10:45
  • @ Aruna Plain javascript code worked perfectly. I've updated my post. Let the answer be auto selected and bounty awarded accordingly. –  Dec 02 '16 at 05:16
5

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.

epascarello
  • 204,599
  • 20
  • 195
  • 236
3

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");
Amin Fazlali
  • 1,209
  • 1
  • 9
  • 17
  • I tried this as well. Getting error: `VM882:1 Uncaught ReferenceError: jQuery is not defined` –  Dec 08 '16 at 07:36
  • @Programmer make sure that jquery library included properly. for example: `` – Amin Fazlali Dec 08 '16 at 09:00
  • Amin - Unfortunately, I do not have access to the source code of this web application. –  Dec 08 '16 at 09:39
  • 1
    @Programmer you should copy content of jquery librarie file and paste into console then press enter. https://code.jquery.com/jquery-1.12.4.min.js – Amin Fazlali Dec 08 '16 at 09:58
1

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

enter image description here

Community
  • 1
  • 1
Ben Smith
  • 19,589
  • 6
  • 65
  • 93
  • I do not see a page context option in my console. Is it not available in my version? –  Dec 01 '16 at 10:34
  • Also, I would like to add that typing `$("u_o_0")` in console prints the element. –  Dec 01 '16 at 10:40