I am using app-route and iron-pages with a paper-toolbar to display my views.
On one of my views, main-view, displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown.
The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this?
you should definitely add on-tap to render new images. Your image won't change, because iron-pages are observing some value (specified in selected property) so, when you click on main-view and route property already had value "main-view", observer will not trigger.
Adding on-tap on element that is handling changes will make it always trigger.
Some easy example:
<iron-pages selected="{{route}}" attr-for-selected="name">
<example-element name="main-view" on-tap="handleClick" id="main"></example-element>
<another-element name="second-view"></another-element>
</iron-pages>
and inside handleClick function something like:
handleClick: function() {
this.$.main.renderImage();
}
Of course inside main-view element you can declare renderImage function which will handle rest of the logic
And don't forget to make some debounce since you don't want to propably render 20 new images in 1 second. You can use Polymer native debounce function
You can read more about it here: https://www.polymer-project.org/1.0/docs/devguide/instance-methods
Related
I need to add a second click event to a link. I would like to add a modal event like shown in this codepen - but it already uses the HREF for the download link. What is the best way to handle this?
<a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
To be clear. I need the link to file to stay as is but also trigger the popup.
An <a> element can trigger functionality on its way to its href (target). It has a built-in HTML property (global event handler, to be specific), called onclick, that's common across most HTML content elements.
The onclick handler will be performed first. It takes an attribute (named event), which is the PointerEvent.
So this will work:
<script lang="javascript">
function doSomething(e) {
console.log(`You clicked <${e.target.localName}>`);
debugger;
// Press F8 to resume execution
}
</script>
<a download href="/path-to-file" onclick="doSomething(event)"><strong>DOWNLOAD</strong></a>
The click pointer event bubbles. Which means once the onclick handler bound on the element has been executed, the document looks for any other onclick handlers bound on its ancestors (parent elements). If it finds them, it executes them as well, in order (closest first), all the way up to document (which contains <body>, as .body).
What this means is that you don't necessarily have to bind your onclick handler onto the element with the href itself. You can bind it on any of its parents and it will still be performed before the document goes to the <a>'s href:
<script lang="javascript">
function doSomething(e) {
console.log(`You clicked <${e.target.localName}>`);
// uncomment next line to stop it getting to href (and see the log above)
// e.preventDefault();
}
</script>
<div onclick="doSomething(event)">
<a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
</div>
You can call .preventDefault() on the event to stop it from going to href and from bubbling.
To stop it from bubbling but still allow it to go to its href you can call .stopPropagation() on it.
Note: throughout my answer I used links to the MDN web docs. Instead, I could (some might even say should) have used links to the actual HTML Living Standard (a.k.a. "official HTML documentation"). I chose not to, because most people find the Standard too technical, therefore harder to digest. But note every MDN page has a link to the official documentation for that resource at the bottom of the page.
With this code I want to create an event listener for whenever chrome storage updates.
I want 2 things to happen when the event listener is triggered:
The code will console log the updated values. This part works.
I want the HTML for the extension (the document that opens in the corner when you click the icon) to update and render the data value that is in chrome storage. This is that part I need help with.
chrome.storage.onChanged.addListener(function(changes, namespace) {
//part 1
console.log('New data type is %s. New value is %s',
changes['type'].newValue, changes['data'].newValue)
//part 2
document.getElementById('output').innerHTML =
changes['data'].newValue
});
I realize that calling "document" inside the function doesn't make sense, but I'm unsure how to move forward to get it to render in the extension's HTML.
I tried creating an event listener for when the context menu is accessed (users can update the chrome storage but clicking a button in the context menu) but I couldn't get it to work. Also the event should trigger when chrome storage is updated, not when the context menu is simply accessed.
Right now I get this error:
Error in event handler: TypeError: Cannot set property 'innerHTML' of null
(There is an element with id 'output', so that isn't the problem)
Thanks for your help!
The background script runs in a separate hidden background page. It's not related to the browserAction or pageAction popup page, it doesn't have any of the popup page elements, its DOM is empty except for the auto-generated script tags of the background scripts.
The popup is also a separate page and just like any normal page its environment/DOM exists only when the page is shown. You can't modify it when it's not shown. You can't show it from your code in general case either.
Solution 1
Put that onChanged listener in popup.js script that's loaded in your popup.html (declared as "browser_action": {"default_popup":"popup.html"} in your manifest.json) using the standard <script src="popup.js"></script> tag. It will update the popup page if it's shown, and to display the current values when the popup opens read them with chrome.storage.local.get or chrome.storage.sync.get depending on which storage you're using in your extension.
Solution 2
Use chrome.notifications API to show a small notification at the bottom of the screen, see also the official demo extensions.
Solution 3
Use chrome.browserAction.setBadgeText to display short text like a temperature right under the extension icon. Don't forget to declare at least "browser_action": {} in your manifest.json.
I have a "TabsPage" which is the first page of app. I use this.tabs.select(3) inside ionViewDidEnter of this page to select the 4th tab. This opens the 4th tab as the default tab but the div with class of .scroll-content doesn't have top margin so it goes up behind header. However if I use timeout like:
setTimeout(() => {
this.tabs.select(3);
}, 5000)
Everything seems okay when 4th tab is opened. What do you think the problem can be?
This sounds like an issue with your declaration of the type of life cycle event you are using. You declare the tab after the view has been created and I suspect there is a miscommunication between the firing of the tab select and the creation of the view itself ( that's why you are using a setTimeout() which is really hacky ) .
You can read up more on the life cycle events here under the section Lifecycle events
What you could try is to hit ionViewWillEnter(){} and set the tab without a timeout.
There is also a tab input property which you should be able to use in your tab tag.
<ion-tabs selectedIndex="3">
selectedIndex (number)
The default selected tab index when first loaded.
If a selected index isn't provided then it will use 0, the first tab.
Because the selected index is defined in the tabs components sitting in the view there should be no issues with view initialization of the tab.
I have page with tabs (which are actually links handled by parent pjax). Which loads the tab content via pjax calls.
In one of the tabs, I have a gridview which is inside a pjax container. So that makes it a nested one.
The problem is that the nested one when loaded and inserted into the page, does not include it's own javascript i.e:
jQuery(document).pjax("#history-gridview a", "#history-pjax", {"push":true,"replace":false,"timeout":5000,"scrollTo":false});
You need to call renderAjax() when requesting the tab page (or content). I do something like this:
if (Yii::$app->request->isAjax) return $this->renderAjax('myview');
else return $this->render('myview');
However, it may not fix your problem. I've found if I navigate tabs and a grid is loaded dynamically in the tab (with its own pjax container), then any interaction with grid sort and filter tries to reload from the outer (pjax tab) container even with skipOuterContainers set to true.
On a side note, the developers are thinking of dropping pjax support completely as per here as well as how asset bundles work.
The question remains:
How to create super fast performance like an SPA (single page app)
without Angular2 or similar? The grid container within a tab container
is the perfect example which, if could be achieved (catering for
back/forward buttons, initialisation scripts) would be awesome.
Hello all i want to ask how to reload the appended data ..
Actually i am having a page which goes infinite scrolling ..
and i need to reload the appending elements when clicked on a particular element ..
the loading is fine for the elements that are not appending (previously present when the page loads) .
loading by ajax is working fine (checked)
just wana ask how to use load method of ajax for the divs in the appended data..
$("#abc").load("load.php #abc");
I think you have a problem with your events. If you are using the .click or .bind event handler of jQuery, the new added elements will not be targeted. Try $(".clickable").live("click", function()); to make also the newly added elements clickable.
As jQuery documentation says:
http://api.jquery.com/live/
Attach an event handler for all elements which match the current selector, now and in the future.