I have an issue with the rendering of the angular UI calendar. My app has several views that we use to navigate in between using routes. The main page has the angular calendar and when we load the main page the calendar loads fine. But when we navigate away from this page and comes back, the calendar failed to load and only the header part gets loaded with the title and the buttons. If a button (eg- month) is clicked then the whole calendar loads up again.
Is this something to do with rendering? any output is highly appreciated.
[1]: http://jsfiddle.net/fECuY/4/ "jsfiddle"
I have resolved this issue by using resizing the window where the calendar got rendered within a timeout function.
Still I want to know how this render method can be used to re- render this calendar again. (in angular context)
arshaw.com/fullcalendar/docs/display/render example is catered for jquery..
Related
I'm using VUE.JS 2.0 and I have a page that has a b-tabs component with 2 tabs. When I click on an option on tab page 1 it pulls data from a web server using AXIOS
axios.get('https://wwwwwwwww.azurewebsites.net/api/formattedpubs/' +
self.new_researchers[0].PMIDS)
.then(res => {
self.publicationData= res.data.New_Publications;
}
and builds the data on tab page 2 using a v-for loop.
<div class="person-info" v-for="obj in publicationData" :key="obj.pmid" v-bind:data-pmid='obj.pmid' >
My problem is I need to know when it is finished being rendered because I have a third party component that runs a javascript function over the data and pulls in metrics from another resource.
<div><div class='altmetric-embed' data-badge-type='donut' v-bind:data-pmid='obj.pmid' data-link-target='_blank' data-badge-popover='bottom' ></div></div>
according the readme file from the third party
If you're adding Altmetric badges to the DOM after the page has
loaded (via AJAX, for example) then you can ask the Altmetric embed
script to search the page again for new matches by calling
_altmetric_embed_init in Javascript:
The problem is that the page needs to be completely rendered before the badges can be put on. If I click on another tab and then click back the badges are there. If I put a button with the JavaScript refresh from the third party company they are there. If I try to time the page to display by timing a programmatic function I can't get it to refresh first then call the other function.
Bottom line is how can I know when the page is rendered? I tried mounted but since I need to know when the second tab is loaded it seems to fire when the first tab page is loaded.
I tried VUE - Call a function after v-for has done looping
but that does not seem to work for the second refresh. If I put into the isRendered function
this.$forceUpdate();
I get an error in the console of
[Vue warn]: You may have an infinite update loop in a component render function.
My fall back is to put a button that says "Show Metrics" but that's a last resort. Sorry for being wordy Thanks
Perhaps after you set self.publicationData you can await nextTick(), or perform the action you need within the updated lifecycle hook which occurs after a rerender.
To be honest, I don't know what really causes the problem but will try to explain it.
In my react app, I have placed a Google Translate Widget (which is retired some years ago) to easily translate whole website in just a click. It works fine until I am clicking on a MODAL or some button that changes TAB without changing routes. I mean, when routing there is no problem but if new component renders in the same route (like it does in MODAL and TAB component), the app crashes and all I am getting is a blank page.
Images to make it clearer:
As it seems, Google translated page to French in homepage here is a different route and everything seems OK.
BUT when I click on Make a Reservation Button (which is the vertical one) or All Features button (which is the black one at the bottom), distressingly this is what I get:
A blank page. So, without using google-translate-widget all is working without a problem. But if the page is translated and user clicks on a button renders some component on the same route this happens. ANY solution suggestion or comment means so much to me.
Thank you.
I got the component which cause the insertBefore error inside span tag. It solved the issue.
I am developing an app using angularJS. This application has about 5 tabs and this is mainly a form and a single submit option for all tabs.(similar to employee data maintenance) The form is loaded with data of the user when the page gets loaded and user can edit and resubmit the form.
Since loading all the 5 tabs in the initial page load will effect the load time of the page , so i am planning to use on demand loading of contents and API.
1st approach:
One thing i can do is loading only 1st tab on initial load and load the other tabs based on click on the tab and using ng-include to include partial views. So in the end user can submit the form and client side validation can be done easily.In this case page will have DOM elements of all activated tabs.
2nd approach: By using routing (i am not much familiar with this). But from my understanding this logic will replace the DOM of a tab when user switches tab unlike 1st approach. So there is a need of using service or some other technique to save the data. But i want to retain the DOM of previous active tab even when tab is switched. So can it be done?
Finally, What is the best approach among above two OR is there any other good techniques to achieve same?
I think Option 2 would work best for you. AngularUI router (https://github.com/angular-ui/ui-router) would help with this above the standard ng-router.
Rather than save the DOM between tab switches, you could just save the data and re-bind when you switch tabs.
I've a dashboard page which shows data relevant to a particular user which is shown in the drop-down at the right hand top corner.
When i select a different user the dashboard should be reloaded/refresh with data relevant to that user.
Router does not work since I navigate to the same page it does not reload the page.Another trick would be to create a dummy page & redirect from there back to dashboard,but i'm looking for a cleaner approach.
My Bad.
Durandal is leveraging KO heavily so i only needed to update the ViewModel & GUI would get autorefreshed. But the dropdown is not a durandal module.So was trying to figure out a way to notify the Durandal module with the change event.
I realized i was also using http://www.jstorage.info/ & it had a callback for pub/sub as well as listener :) , Issue resolved :)
I've got a fullcalendar setup, but there are so many pages I've got it set up with tabs, but when I change a date, only the ones currently displayed get updated, the same goes for the initial loading of calendars, it will only load the events for the displayed ones, while the "hidden" ones in inactive tabs don't' get populated at all.
I at first couldn't even get a calendar view going, but I solved this by initiating the $.tabs AFTER the fullcalendar construction was done.
I have a live copy running right now at http://www.stavanger-ishall.no/ (hitting the blue time schedule image should open it for you)
I have attempted working around the problem by adding an event to the "select" option of the tabs to fetch the calendar data then, but to no avail.
The solution was to use the $.tabs() "show" event as opposed to "select" and then running a fetch command on my calendars, this ensured the page had loaded the calendar before trying to populate it.