How to properly remove a polymer element from a web page - javascript

I'm having some issues with the removal of a polymer element from my web page.
I've build a carousel via an unordered list which list items contain content. Some of this content is simple HTML, some are images, some are videos and some are polymer elements.
Every now and then, the <ul> gets cleared via a jQuery .empty() command.
The issue I'm facing is that the polymer elements don't appear to be cleared correctly.
Inside the polymer elements are timeout events that retrieve content(xml and images) every now and then. When investigating the network load in the chrome developer tools AFTER the polymer element has been removed from the page, you can still see the xml and images being loaded every now and then. So aparantly, a part of the polymer element is still active, most likely somewhere in the shadow-dom.
How do I properly remove an embedded polymer element and everything associated with it from my webpage?

I think setTimeout is not defined within the scope of your element but in global scope.
So you must use clearTimeout function in lifecycle detach function in your element to cancel existing timeouts.

Related

Cannot select element on DWR 921 Router management page

I'm trying to use Selenium in Python to send sms using my Dlink DWR-921 router. But I can't select any element on the document. I tried td, table, body but none of them works. I also tried on browser javascript for the above elements as well. Using document.getElementsByTagName(), but I get empty HTMLCollection. May I know why the element in the page is not selectable?
Update: To ensure the dom last been properly and fully loaded. I took a screenshot and confirmed that the DOM has been loaded everytime it run.
Router model: DLink DWR-921
SW Version: V01.01.3.016
Try to look for an input tag.
Also, it may be that the elements are inside an Iframe. Selenium doesn't "know" how to locate elements inside iframes, so you need to tell me to go into the iframe:
driver.switchTo().frame("firstframe");
or
driver.switchTo().frame(0);

Can't access elements appended by script in headless Chrome

I'm accessing a webpage via headless chrome that should be running a script to append a few elements to the DOM. However, I can't figure out a way to get ahold of these elements
Trying to access them via DOM.querySelector within my Page.loadEventFired callback gives me nothing. I thought maybe this was because the script to append them hadn't finished executing by the time the querySelector was run, so I tried attaching a handler to the DOM.childNodeInserted event (both in the context of Page.loadEventFired and before navigating to the page) as follows:
DOM.childNodeInserted((params) => {
console.log("we have a child!!");
});
But the event never fires. My next approach was the DOM.setChildNodes event combined with DOM.requestChildNodes on the container elements for the inserted elements. I execute DOM.requestChildNodes within Page.loadEventFired. This event fires successfully, but reports no child nodes.
At this point, I'm confused as to whether the script is even running. Can anyone offer some advice?

Using JavaScript can I freeze the DOM to reference later when I want to iterate through it?

I'm developing a Chrome extension that modifies a page's DOM to add extra functionality on page load. After the page loads and I'm done manipulating the DOM, one of the functions that is available to the user is a button that reads all of the text on the page and manipulates it.
My issue is that when I try to iterate through the DOM, there's a lot of objects and text that was added by my extension on page load. I only want this function to iterate through the DOM as it was originally.
Is it possible to save the state of the DOM on page load to use later on?

Remove all jQuery event handlers

I am creating a jQuery Mobile web app, which loads some pages.
For example, a.html is my main page. It may call b1.html,b2.html,...,b100.html (User may click on one of buttons). (The pages are loading with ajax navigation feature of jQuery Mobile)
And there is some events in each b[i].html page, and ids and many things are same in every b[i].html page. But the point is, at any time, just one of them may be in DOM. So there will be no id conflicts or such.
The problem
The problem is the conflict of the events. When user come back to a.html from b[i].html, the HTML will be removed, but events will remain. This will cause many problems if I first go to b[i].html, and then come back to a.html and then go to b[j].html. I mean, b[j].html will not work correctly... :(
What I have tried
I have putted this in a.html, to remove all events:
$("#mainpage").off("pagebeforeshow").on("pagebeforeshow",function() {
$("*").not("#mainpage").off();
//Other initialization codes...
});
But, problem not solved...
(mainpage is the id of data-role="page" of a.html)
Example
For example, I have this in each b[i].html:
$(window).resize(function () {
alert("Resized");
});
At the beginning (in a.html), If I resize the window, there will be no alerts, but after visiting b[i].html and then coming back to a.html, I'll see alerts if I resize the window, even with that line of code (What I have tried part.)...
So, How to remove those event handlers when users come back to a.html from b[i].html?
If you are using jQuery Mobile, more than one of said pages may exist in the dom at the same time, resulting in non-unique id conflicts.
I would ditch putting js on the individual pages and have it done from the primary page, or through a script loading system such as require.js. Then do all of the events through delegation from the document. Obviously that won't work with window.resize(), but it doesn't need to be delegated anyway.
"Can you please explain more?"
Basically, if you are including scripts on the child pages, you will need to have both setup and teardown for every page. setup adds the events, and teardown removes them. If you instead used a single global script that adds ALL of the events using event delegation from the document, all of the pages should work. Obviously that global script could get pretty big on a complex site, so you could instead use require.js to load in js that does the same thing as needed, preventing it from loading the same dependency more than once.
As far as removing all events, I've never tried this, but can you use $("*").off()? According to the docs it should work. I'm not sure how it will affect jQuery mobile. To remove events on the document and/or window, you will have to do it manually because $("*") will not select them.
$(document).on("vmousemove","#link",func) is how you delegate an event from the document.

How can I bind a javascript dialog using Knockout?

I've got a list of data in an observableArray and I want to show it in a javascript dialog window (I'm using jQuery.blockUI if it matters). Unfortunately the dialog seems to come unbound after the page is loaded. The dialog initializes correctly (the data is displayed), but it isn't updating with changes.
There are no Javascript errors and I've moved the binding to after the dialog is generated and added to the document (no effect). I've also tried calling ko.applyBinding on the main div that makes up the dialog but that, for some reason, causes part of the main page to hide (the DOM is there, but they are hidden).
EDIT: I've created a project on jsfiddle that reproduces the problem. The main culprit seems to be wrapping the content of the dialog in a div. If I show the content directly it seems to work (of course I can't do that, the wrappers provide a common style for our dialogs).
I'm recovering from the flu and could easily be missing something obvious, but I've been trying all day and nothing is coming to me. Any ideas?
The problem is that the dialog does not exist in the DOM (despite your calling $(document).append(). You cannot append a div as a child of the document itself). Instead, append the dialog to the body and hide it.
$dlg = $('<div></div>').hide();
$('body').append($dlg);
Works here: http://jsfiddle.net/yL6ds/4/

Categories