I've gone into devtools and deleted a node from the Dom which affects my page's CSS calculations. I want to re-render the page with the element gone to verify that removing it has the desired effect.
Can I instruct Chrome to re-render the page as-is, without reloading it?
Related
In Touch UI, there is an iFrame called Content frame is added.
Can you please tell me
what is the reason of having an iFrame to display the page during the authoring?
There is an observer (/libs/cq/gui/components/authoring/editors/clientlibs/internal/page/js/observe.js) which observes the changes made to the DOM and sends post message accordingly.
What is the reason of sending postmessage and how this is helping?
The AEM developers realized that many problems arose from the fact that edit UI and WYSIWYG content view were rendered into the same context in Classic UI:
Edit UI would push content around, thus making it less WYSIWYG
Content styles could interfere with edit UI, accidentally misplace or hide it
Editor scripts could interfere with content scripts, meaning website authors would need to code around that
Edit UI inserts additional HTML element which need to be accounted for in content stylesheets and scripts
Which is why they decided on a better approach for Touch UI:
All content UI would reside in an iframe under the edit UI
Edit UI aligns to the content UI by measuring where it appears, not by inserting DOM nodes into the content
The observer is one of the few scripts still needed in the content UI to notify the edit UI when it needs to update its overlays
I am working on an Ionic 3 application. Inside a div, i am loading an external url in an iframe and it is loading perfectly. But it creates problem when focuses out. The iframe reloads every time when it focuses out.
Scenario-01: In the page where i have loaded the iframe, there are other controls outside of the iframe such as a text box to enter some data. So, when i click on the textbox, the keyboard appears but at the same time iframe reloads again.
Scenario-02: I have one menu sliding drawer from left in the application. When i open the sliding drawer to select another page, i could see the iframe of the existing page reloads again.
Scenario-03: The external url that i have loaded in the iframe has some input controls. So, i want to enter something in those input boxes, the keyboard appears but at the same time iframe gets reloaded and i could not provide any data in those input boxes.
From my assumption, iframe is causing problems when it focuses out. So, i tried to capture the blur event of that iframe and try to stop the propagation of the event.
<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe>
But, both ionFocus and ionBlur events were not triggering.
For now, when i tried with Android application, all the scenarios trigger iframe reload. As keyboard does not appears in browser, when i tried with Browser, only Scenario-02 triggers iframe reload.
Iframe should load at the first time only. Then user can do whatever operations inside the iframe or outside the iframe but the iframe should not load again.
How to stop reloading the iframe if it focuses out by keyboard or sliding drawer or anything?
I figured out the solution. The problem was with the safeHtml:'resourceUrl' pipe. It was sanitizing every time iframe comes in focus and prepared a new ResourceURL. As a result, iframe gets reloaded each time.
So, i sanitized the url beforehand in the ts and set it to the variable. As a result, iframe is not reloading anymore. I have used DomSanitizer to sanitize the resource url.
url: any;
constructor(private domSanitizer: DomSanitizer) {
this.url= this.getSantizedURL();
}
getSantizedURL() {
this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}
My website with a data table releaods every 30 seconds to receive new data from a database.
The problem now is, if a fancybox is open (a chart is shown) and the parent site reloads, my fancybox with the chart closes.
How can I prevent this behavior? Meaning parent site reloads and receives new data and the opened fancybox (chart) still stays in the foreground till I close it.
Proper solution would be not to reload the page, but use ajax to get fresh data. It is technically impossible to keep modal open while page refresh. You could open fancybox after each refresh, but it would not be smooth.
I solved this behavior by using the JavaScript method setTimeout
setTimeout(function() {location.reload();},30*1000);
instead of
<meta http-equiv="refresh" content="30">
During reloading, the site is flashing, but the fancybox remains. It works for me.
On my wicket page I have a tree and a dynamic element that is mainly created via javascript and takes some time to paint.
My problem is that whenever I expand a tree node Wicket repaints the whole page, therefore reloading the javascript and repainting everything again. As expanding a tree node has no influence on the javascript there is no need to repaint the dynamic content, still the user has to wait several seconds until everything is rendered again.
Is there any way to stop wicket from reloading everything and just exchanging the new content? And how can I implement this within a tree?
I found the following link: http://wicketinaction.com/2008/10/repainting-only-newly-created-repeater-items-via-ajax/ but I am not sure if and how I can apply this to trees.
Update:
The problem solved itself together while I worked on another ajax problem I hadn't recognized earlier. Therefore I guess it was a side effect that is gone now. Still thanks.
A node's junction component calls AbstractTree#expand(T), which calls #updateBranch(T, AjaxRequestTarget): for NestedTree this will result in a repaint of the branch only, for TableTree this will repaint the whole table.
This should not result in a refresh of the whole page.
Put breakpoints in AjaxRequestHandler#add(Component,String) and Component#setResponsePage(Class) and see who is updating the whole page.
I have this page I can only access in the browser. There is a HTML element that only exists during drag&drop, and I want to get / analyze its HTML code in the Inspector / Firebug.. but as soon as I stop dragging, the element is removed.
Is there any way of getting the generated HTML element without wading through the JS source that builds it?
EDIT: got it, using the ctrl+S shortcut in chrome to save the page while holding mouseDown with the dragged-element did the trick.
Firebug html inspection shows the HTML of the page real time, so it does show changes caused by interaction. The trick is probably to scroll the inspection panel to the section of the HTML where your drag element appears. That way you would be able to see it while you drag.