JQuery .children() not returning dynamically added elements? - javascript

I am integrating a live chat functionality and I am trying to use a JQuery statement to get the chat session ID from a div ID that is not created until a chat is started. (It is dynamically added to the page.) Of course logically, I am making sure that I don't try to select the element until after a chat has started and it exists. Here is the relevant HTML structure and the line of code that I am using:
HTML:
<!--These do not exist until a chat is started-->
<div class="customer_inner_widget">
<div id="chat-session-5748220" style="height:100%;">
JQuery:
$(".customer_inner_widget").children().first().attr("id").split("-")[2]
The strangest thing is that under normal circumstances either when I run it in my script upon closing the chat OR I run it in Google Chrome Developer Tools Console AFTER a chat has started, it does not work:
Output:
Uncaught TypeError: Cannot read property 'split' of undefined
at <anonymous>:1:58
...but If I simply right click on the chat window on my page and select "inspect", then run the same line of code in the console... it works:
Output:
"5748220"
How does just inspecting the HTML wilth Chrome suddenly cause it to work...? How can I perform this hidden magic in my script?

So the issue seems to have something to do with the fact that the child I am trying to access is located within an iFrame and apparently you cannot access external dynamically added content within an iFrame. I guess that JQuery just becomes aware of what is inside after inspecting since it is being forced to discover the elements.

Related

Why is my tampermonkey script not deleting styles of html elements

So I currently have a tampermonkey script that runs when it's on https://code.org/projects/applab/* which is where I want it. However whenever I run my code to remove the attr 'style' of the grandparent and parent of the specified element nothing happens.
Even though when I ran a test of this jQuery on w3's interpreter it worked...
$(document).ready(function() {
$("body").append(themeChangesCss);
$("#screenSelector").parent().parent().removeAttr('style');
$("#screenSelector").parent().removeAttr('style');
$("#runButtonWrapper").parent().parent().removeAttr('style');
$("#runButtonWrapper").parent().removeAttr('style');
});
You can also view the whole script here : https://sourceb.in/vdZOU1B7fq
You should probably start by logging the element you're trying to change to console. It is quite possible, that the web app changes the style AFTER your script executes. In that case, your changes will not have any effect.
If that is the case, read up on Mutation Observer, which allows you to execute code any time something changes the style attribute on the elements you want to clear.
I have tested your code and it indeed does work as it should on my test document. I couldn't find how should I test your code on the website you linked.

elements are in panel, but not accessible from js or console

I'm working on one site,
when trying to access elements of developer console or js returns null.
from the elements panel, the element is exactly there.
but if I copied the js path from the elements panel to the console it works.
from elements panel:
to the console:
The site uses angular (I guess,) and I'm creating a script to do some changes on it.
first-time such a thing happens to me, what's the reason?

document.querySelector() returns null when DOM elements are already visible

I am trying to build an automated Puppeteer script to download my monthly bank transactions from my bank website.
However, I am encountering a strange error (see attached Imgur for pictures of this behavior)
https://imgur.com/a/rSwCAxj
Problem: querySelector returns null on DOM element that is clearly visible:
Screenshot: https://imgur.com/d540E6p
(1) Input box for username is clearly visible on site (https://internet.ocbc.com/internet-banking/),
(2) However, when I run document.querySelector('#access-code'), console returns null.
I'm wondering why this behavior is so, and what are the circumstances that a browser would return null on a querySelector(#id) query when the DOM node is clearly visible.
# EDIT: Weird workaround that works:
I was continuing to play around with the browser, and used DevTools to inspect the DOM element and use it to Copy the JS Path.
Weirdly, after using Chrome Devtools to copy the JS Path, document.querySelector('#access-code') returned the correct element.
Screenshot of it returning the correct element: https://imgur.com/a/rSwCAxj
In both cases, the exact same search string is used for document.querySelector.
I believe that you cannot get proper value using document.querySelector('#access-code') because a website use frameset.
In the website there is frame with src to load content
<frame src="/internet-banking/Login/Login">
DOMContentLoading is executed when main document is loaded and not wait for frame content to be loaded.
First of all you need to have listener for load event.
window.addEventListener("load",function() {
...
});
And later on you cannot simply use document.querySelector('#access-code')
because input yuo want to get is inside frame. You will need to find a way to access frame content and than inside of it use simple querySelector.
So something like:
window.addEventListener("load",function() {
console.log(window.frames[0].document.querySelector('#access-code'));
});
BTW please see in: view-source:https://internet.ocbc.com/internet-banking/ looks like website is mostly rendered client-side.

I can't get the toggle control with document.GetElementByID() in the windows8 setting charm

I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation

IE7 gives error

I have one page which have chat application,wall comments,uploading photos,videos on that page.All is working fine on mozilla firefox,chrome but does not work on IE7.It gives two error
jquery-1.4.4.min.js
HTML Parsing error.Unable to modify
the parent container element before
the child element is closed
(KB9278917).
Because of this error my rightside bar of this page is not seeing & chat application is also not working.
Please reply me as early as possible.
Thank you
This question discusses the error message you have listed as (2).
You're modifying document while it's being loaded (when browser hasn't "seen" closing tag for this element) . This causes very tricky situation in the parser and in IE it's not allowed.
Since you're using jQuery, you can probably avoid this by putting whatever code is causing this error in a function called once the page is loaded, using the jQuery.ready function:
<script>
jQuery.ready(function() {
// put your code here, instead of just inside <script> tags directly
});
</script>

Categories