I have a FAQ page that reads a Firebase node and lists all the Q & A contents using the below lines of code:
<firebase-auth id="fbLogin" provider="anonymous" location="https://XXX.firebaseio.com"></firebase-auth>
<firebase-collection orderByPriority log id="fbFAQ" location="https://XXX.firebaseio.com/faq" data="{{faqs}}"></firebase-collection>
<template is="dom-repeat" items="[[faqs]]" as="faq">
<div class="forBorder">
<akyral-details id="[[faq.__firebaseKey__]]">
<akyral-summary>[[faq.q]]</akyral-summary>
<p class="answer">[[faq.a]]</p>
</akyral-details>
</div>
</template>
I have a link from mainpage to the FAQ page and upon click it works perfect! However when I go back to main page and then click again for FAQ link the page renders nothing. But if i refresh the page then its fine.
To recreate do the following:
Open https://sizzling-fire-7471.firebaseapp.com/ and click the FAQ page link at bottom . You will see a list of Q & A
Then click left arrow on top to go back to main page
Now click FAQ link again and you will not see anything,but in the console you will see it fetching data. Also, refreshing the page makes it okay
I bet it's a race condition. The firebase-auth and firebase-collection are firing at the same time, causing it to try to fetch the collection before it's authorized. Try wrapping firebase-collection in <template is="dom-if" if="{{fbUser}}"> so it doesn't get stamped until the auth is completed.
This issue has now been resolved. It was due to a bug in firebase-collection. It was fixed at https://github.com/GoogleWebComponents/firebase-element/pull/42/files and will soon be merged.
Related
I am sure these questions and hopefully answers will help a lot of users! The Tizen documentation is difficult to understand at best. The Tizen Studio sample for the BACK BUTTON is for one single index.html page. When the back button is pressed, it only goes to a different < div > on the same "page", not to a different html docs (Example: page1.html, page2.html, page_new.html, page_bart.html, etc.)
I have searched Tizen Forums, Google and Stackoverflow. The closets I have come to an answer is below.
Unfortunately, both questions and answers are from 2015, for version 2.3 AND did not work.
LINK HERE:
Stack overflow Tizen 1
AND HERE:
Stack overflow Tizen 2
Here is what I have:
Tizen Studio 1.2, TAU Web App, Tizen version 2.4, All code is HTML5 with a little java, Everything works...(except for below).
Here is what I need:
When a user is on page10.html (Example, any page) and presses the back button the "tau web app" simply goes back to page9.html. If they press it again, it goes back to page8.html. If they press it again page7, etc..
If the user presses the Menu button, a pop up (like the TIZEN sample app) says, "Do you want to exit the app? with options YES or NO.
If user presses YES the web app (or browser) window closes immediately. If user presses NO the pop-up closes immediately and the user stays on that page.
At the end of my app I have a button that says "The End". When the user clicks this it closes the web app (or browser window) immediately.
THIS REQUEST IS OPTIONAL, but why not...the capabilities are a few code lines away. Currently every page (I have over 100) jumps or cuts from one to the other. I would like to use a page transition (maybe a page slide, can I try others?). Is there a page turn?
PLEASE you Code Wizards! My app is done but I have been stuck trying to get the hardware key buttons to work! I am POSITIVE that other Tizen developers would also appreciate working code for the above issues!
I thank you in advance!
Here is the link to download all the code:
"TIZEN HARDWARE PUZZLE.PDF"
LINK HERE:
Single PDF with lots of TIZEN code
This .pdf shows my current code, some sample code from Tizen and anything I could find online about the TIZEN BACK BUTTON.
There is just one more itty, bitty, tiny request (AN IMPORTANT ONE)......
Can you PLEASE tell me where the code is inserted!?!
For example:
<!-- Put this code anywhere in main.js -->
<script>EXAMPLE</script>
<!-- End -->
or
<!-- Put this code in the Head on EACH page -->
<script>EXAMPLE</script>
<!-- End -->
or
<!-- Put this code in the Body on index.html page -->
<script>EXAMPLE</script>
<!-- End -->
This will HELP EVERYONE who is just starting out like me! We really need to know where to place the code, not just here it is! THANK YOU!
Stackoverflow is THE BEST!!!
====================================
You may use TAU to fulfill the first three requirements of your post's "Here is what I need:" section. It offers a collection of UI components that simplify application coding.
I would like to suggest you to go through the TAUUIComponents sample app in Tizen Studio.
For the first requirement i.e. the pagination thing, you may go through the app.js and try to realize how it's managing the hardware back key event to get back to previous page.
For second one i.e. the pop thing, go through moremenu.js here you'll find code as below:
menukeyHandler = function (ev) {
if( ev.keyName === "menu" ) {
if (morePopup.classList.contains("ui-popup-active")) {
tau.closePopup();
} else {
tau.openPopup("#moremenu");
}
}
};
Now, go through moremenu.html file and modify as below:
<div id="moremenu" class="ui-popup ui-popup-moremenu">
<div class="ui-popup-content">
<div class="ui-popup-content popup-content-padding">
Do you want to exit the app?
</div>
<div class="ui-popup-footer ui-grid-col-2">
<a class="ui-btn" data-rel="back" data-inline="true">Yes</a>
<a class="ui-btn" data-rel="back" data-inline="true">No</a>
</div>
</div>
</div>
I guess, once you've completed above two then you'll be able to complete the 3rd requirement also.
To know more about TAU components you may go through this links:
https://developer.tizen.org/development/api-references/web-application?redirect=/dev-guide/2.4/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm
https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui/hello-world
I'm having difficulty figuring out why a certain value isn't appearing in my template's data context. How can I examine it from the console?
Inspired by #richsilv's comment I created a bookmarklet that makes this task quite easy. Once you've added the bookmarklet to your bookmarks, you can click it on any meteor page, then hover over the item whose data context you'd like to see, and click. The data context will then be printed to the console.
Stackoverflow doesn't allow me to insert the bookmarklet as a link, so you'll have to copy and paste the snippet below into a bookmark URL.
javascript:document.onmouseover=function(e){var evt=e||window.event;var elem=evt.target||evt.srcElement;elem.style.outline='2px solid gray';};document.onmouseout=function(e){var evt=e||window.event;var elem=evt.target||evt.srcElement;elem.style.outline='';};document.onclick=function(e){var evt=e||window.event;var elem=evt.target||evt.srcElement;var par=elem.parentNode;if(par.nodeName=='A'){par.onclick=function(e){e.returnValue=false;return false;};par.setAttribute('href','');};console.log(Blaze.getData(elem));if(evt.preventDefault)evt.preventDefault();evt.returnValue=false;document.onclick=null;document.onmouseover=null;};void 0;
I'm using Google Analytics via Google Tag Manager. I'm on Chrome and checking tags using Google Tag Assistant.
I've noticed that for many, if not most of the events I have tagged, the parameters will not pass through unless the link or key webpage they are clicking on opens in a new tab.
In HttpFox the result is a NS_BINDING_ERROR or something along those lines.
For example, if you visit this site, you can see there are two means of navigating to the "submit report" page - the CTA on the top right and in the main nav. I'd like to understand how the CTA performs compared to the main nav so have set up events, but the event only fires if I open the links in new tabs.
What does this error mean and what should I do about it?
To get rid of the ns binding error, have the onclick return false - Documentation Here.
In regards to the event not getting passed, I'm seeing in httpfox that the tid (on the event) is UA-34035531-[1-6]. That doesn't look quite right. How are you setting the account id?
StumbleUpon publishes a Widget script, and documents how to use it to insert a stumbleUpon button (they call it a badge), into a website.
You can generate the markup for a button with their online tool. It looks like this:
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2" location="http://example.com"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
That script element is just a way to delay-load the widgets.js thing. Just from looking at it, I suppose that it works by scanning the document for the <su:badge> elements and replacing them with iframes. The iframes themselves then get their source content from stumbleupon, at a URL like this: http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com .
The iframe renders visually like this:
The stumbleupon button is the 2nd one. I show the other ones for comparison.
As you can see, the StumbleUpon rendering looks different than all the other guys. SU makes their button look like a "badge" while every other social share widget looks like...uh.... a button.
I'm trying to make the Stumbleupon widget look like a button. I'm pretty sure this is possible. For example, mashable does it (example). Here's what it looks like:
As you can see, the stumbleupon button looks like a button. It's not a badge. Mashable is not using the su:badge thing - they have rendered their own <a> tag, and styled it.
The visual rendering is not a problem; I can figure out how to make a span look like a button, no problem. The problem happens when I click the tag or span. It appears to me that, with the iframe-thing that StumbleUpon uses, it invokes this URL to submit a page for sharing:
http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever HTTP/1.1
The iframe uses javascript's window.open to request that, and restricts the resizing and so on. This is how it works on mashable. The resulting window looks like this:
This is also what the mashable page does, though it does not use the iframe. The Mashable page contains javascript that just opens the "stumbleupon submit" window directly from within the main mashable page.
But when I try the same thing from my page, the little fixed window gets a 302 redirect from StumbleUpon, and then another 302, which eventually points it to
http://www.stumbleupon.com/submit/visitor
...which does not allow sharing of the link.
This has been a long story, but:
does anyone have any insight as to how I can convince StumbleUpon to let me share a link or URL, from a button that is not contained within an iframe?
What is mashable's secret?
ok here's what I found.
The 302's that eventually pointed me to /submit/visitor happen when both of the following are true:
the user is not logged in
the article has not been stumbled in stumbleupon previously
When that happens, stumbleupon invites you (the user) to login. It won't take you just to the "submit url" page.
If the user is not logged in, but the article HAS been submitted previously, then it takes you to the submit window without a 302. Eventually you will be asked to login, if you proceed with the submission. But the first view of the stumbleupn website in this case gives you a visual indication that you are submitting something.
If the user is logged in, and the article has not been submitted previously, then you get taken right to the submit page.
So I was doing nothing wrong. I just needed to login the first time. This is just an artifact of the user experience offered by StumbleUpon. In my opinion it's sort of strange. It's surprising and therefore wrong. But that's just my opinion.
I've installed a Like button on my blog, as well as the Facebook send button.
When I click "Send", the popout comes out and appears nicely with a prompt on who to send the post to.
But, when you click "Like", no popout comes. It's not the "overflow:visible" problem, because the Send popout works. Very confusing and odd, I think...
This is the code I'm using:
<div style="overflow:visible;" class="fb-like" data-href="http://liamgetreu.com" data-send="true" data-width="450" data-show-faces="true" data-font="lucida grande"></div>
Any ideas? Thanks.
I checked out your blog and it looks like there is an iframe being generated for the pop-out, but that pop-out is not being filled in by Facebook. There is a javascript error that is the probably cause of the issue.
uncaught exception: Error: Permission denied for <http://www.facebook.com>
to get property Proxy.InstallTrigger
https://plus.google.com/_/apps-static/_/js/widget/gcm_ppb,
googleapis_client,plusone/rt=j/ver=VRKLmt4S1dg.en_US./sv=1
/am=!itqi7GDL5S6I4GqN1g/d=1/ Line 116
To find out what javascript is colliding with that Facebook one to cause the error. I would suggest striping everything off that page one thing at a time until the Facebook script can run without error. This will tell you what item (or combination of items) was interfering.
Happy troubleshooting! Let us know what you find.