I'm in a bit of a trouble and I hope that I'll find the answer here:
I have an angular 5 app using polymer 2 components.
First I add the elements dynamically the head of the dom like this
<link id="ace-widget-link" rel="import" href="https://lostinbrittany.github.io/ace-widget/components/ace-widget/ace-widget.html">
Then the user select some elements to add to his dashboard
What I do is to append the element tag to the dom like so <ace-widget></ace-widget>
Now here comes the problems:
The first element that I add is only displayed when I refresh the page.
If add two or more elements only the first one appears (even after refresh).
Note that when I added the links statically to index.html everything worked fine.
So after all I figured it out, I was using some polymer components of different versions which produced a conflict that was the origin of the whole problem.
Note that another thing that helped is adding each import link only when the widget is inserted instead of adding all the links at once before the widget adding begins.
I hope that this helps someone else.
Related
I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
I am using nuxt version 2.8.1 for my website. Everything works fine, except nuxt-link on some pages.
I have a page, /drinks which is the listing page for drinks and /drinks/{slug} which is the detail page.
I first noticed the problem, in /drinks. None of the nuxt-link was working in that page. It got solved when I removed code that displays
validation error message from the form that is in separate component.
<span class='text-danger small'>{{ errors ? errors.first('name') : '' }}</span>
So, everything works on this page now. But, the detail page still has this problem. There is no components using validation in this page. No erros or warnings, in nuxt console, or browser console. Links just doesn't work. It updates the url, but, contents are not changed at all.
changing nuxt link to anchor tags works.
Another thing is, if I click any drinks in listing page to go to detail page, it works fine. Every link works. But, if I reload that page, or go to that detail page directly with URL, then nuxt link doesn't work.
I don't know, what is the problem exactly. How can, using vee validation in one component affect nuxt link in other components? And why is it not working?
Found the culprit finally. In case, anyone face similiar issue in future.
Vee Validate didn't support ssr, thus, it caused the problem with nuxt-link.
I am using another plugin Vue Carousel which doesn't support SSR as well.
So, wrapping carousel with solved the issue.
And, another weird thing, using v-html with p tag also affected nuxt-link.
So, I removed all p tags with v-html, used no-ssr for components that does not support SSR and the issue is finally gone.
But, I still do not understand why nuxt link is affected and why there are no error messages.
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
I'm trying Polymer 2.0 for a project and I want to include custom elements inside a custom element (using an unnamed slot):
<my-overview-element>
<my-child-element1></my-child-element1>
<my-child-element2></my-child-element2>
<my-child-element3></my-child-element3>
</my-overview-element>
When loading the page with my-overview-element the child elements are not visible. I do find them under the my-overview-element shadowRoot in DevTools but they are not rendered on the page (it seems they are not recognized as custom elements).
When navigating to another page containing <my-child-element1> (not as a child of a custom element) and then back to the overview page, the child element becomes visible. The same goes for my-child-element2 and 3. On their own pages the child elements are working fine.
Do I need some special commands to render custom elements as slotted children of another custom element? I tried lazy-importing them in the overview page but that doesn't help.
Did you properly load all of them with something like this
<link rel="import" href="my-child-element1.html">
<link rel="import" href="my-child-element2.html">
<link rel="import" href="my-child-element3.html">
Thanks for your replies and suggestions.
The problem was lazy-import: it seems to be a bit too lazy for importing child elements. Because it works for the main element on the page I didn't suspect lazy-import to be the culprit.
Using regular import for these elements solves the problem.
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.