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.
Related
I have an HTML page that has an option for drag-n-drop and a "Preview" button. I want to call a function on the click event of that button, which will fetch all the files that are dragged onto the page. When I press this button, it opens a <px-modal> (a popup which displays some data), and it has a dropdown (<paper-dropdown> and <paper-item>), which should display the filename fetched earlier.
So I have the data, but I don't know how to store it or display it as dropdown content.
I have tried the <template> tag, but it fires on page-load when I need it to fire after the files are dropped onto the page. Otherwise, the data is null.
How do I solve this?
Without some code to look at, it's hard to help you but in general, my advice will be to use a service to store your data and all your directive/controller that needs to have access to the data should havce a dependency on this service.
Have a look at option 1 on this answer
If that's not what you're looking for, post more details, create a jsFiddle to show us where you are so we can help you better.
I am Using Ignite UI Control I am facing a sorting issue
Let me explain the scenario
I am opening an igDialog and in that dialog box I am opening a Grid view using igGrid which looked like below
Fig(1)
For the first time it working fine now when I click on each column is grid sorting is executed once but when I clicked on the add button the I replace the the dialog contents with the add content now this dialog box will be look like that.
Fig(2)
When click on the cancel button Above it again load the content of listing view and show Fig (1).
The problem I faced is actually when I clicked on any column it called the sorting function twice and it hit my controller action twice.
No of times I go to add view and then back to list view it called sorting multiple times.
Now I don’t know what's happening here ?
Note : I am using $(gridId).igDialog("content", html); to loaded content dynamically
It would be better if you can include the code which handles the view changes inside the dialog. What you're describing sound like grid events are attached multiple times on the same elements. If you're not disposing the grid, or attaching custom events every time it's shown, then this would be the result.
I will update the answer to be more concrete once you include the code in the question.
I am trying to create a table in bootstrap that can be edited online by users without using a database backend.
Please see a preview of my page at https://preview.c9users.io/tomheaps/whiteboard/index.html?_c9_id=livepreview3&_c9_host=https://ide.c9.io#
You will see that I have managed to insert a dropdown menu which appears if you click on the table cell directly under the 'Diet' column header. Is there any way using jquery that you can click on an item from the menu list to insert a specific image or text into the div from which the dropdown originates (i.e. into the table cell that you clicked on).
Ideally I want the text or image that the user has inserted to remain in that div until it is changed, even if somebody views the page on a different computer - not sure if this is possible in a static webpage without using a database back end.
My javascript skills are non-existent and can't find anything similar after hours of trawling the web so any scripts to enable this would be very gratefully received.
You need a database to show any data which needs to appear in a new computer.
Anything you insert by js in your current DOM document shows just for the current user.
You have to store the data in a remote server in order to allow new users to see its.
We are making a web application where users can create theire own calendars. They should be able to create multiple calendars (all in view agendaDay) on one page. There are external events that have to be dropped on the calendars to make appointments. Everything we want to do is working like a charm!
But we have 1 problem and we can't seem to get a solution for it.
We have a second (month) calendar (dynamicly created) and we are using this calendar to navigate between days. When a user clicks on a day we use gotoDate to change the FullCalendars day.
This is where the problem comes in. When we use gotoDate on all the calendars on the page it's not possible drop the external events on the first calendar. Dropping the events on de second or third calendar is not giving any problems.
What i have seen is that the fullCalendar gets destroyed in the renderView function in the fullcalendar.js on line 724 (version 2.2.6). After this the fullcalendar has been rendered again.
When i uncomment the destroy the problem is solved but then ofcourse the drop event gets initialized for second time (or third, or fourth).
I'm unable to find a solution so trying to find some help for this.
See my code on: http://jsbin.com/pubelo/1/
I have also submitted this to the FullCalendar issue tracker but i'm trying to find a fast solution for now.
Update 1
Still looking into the FullCalendar.js code. I have noticed that the problem is solved when i remove line 6414 in the destroy function.
this.el.empty();
But removing that line results in double javascript events.
Update 2
Changed the jsbin link.
Update 3
I have noticed that the handler 'documentDragStart' isn't called on the first calendar when using the gotoDate.
Update 4
Problem turns out to be in "var Grid = fc.Grid = RowRenderer.extend({" unbindHandlers function.
Because the seconds calendar is calling the unbindHandler after the first calendar called the bindHandlers the dragstart has been removed and only applied once (to the last calendar).
Haven't found a solution tho...
Workaround / solution
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Update
Problem had been fixed by Arshaw and released in the newest version 2.3.0.
I took over a project (ASP.Net AJAX, JSON) where I have a page that loads a large select (combo box) list of 1,430 entries and loads without issue on our main (landing) search page.
Issue:
I get the following error in MicrosoftAjaxTemplates.debug.js when loading a page where we edit or insert. The difference between the search page and edit page is that there is ajax data binding involved.
Microsoft JScript runtime error: and no other information.
in function Sys$UI$Template$compile() on the line:
element._msajaxtemplate = [this.instantiateIn = new Function("_containerElement", "$dataItem", "$index", "_referenceNode", "$parentContext", "_instanceId", code), nestedTemplates];
Here is a portion of the element inner html (removed most options; however, there are 1,430 options):
select style="width: 500px;" id="ddl_1_CompanyID_53f3ff5f-3070-4473-b8d9-e4055e29e0e9" önchange="UpdateObserver('CompanyID', this.value);" class="queryfield" title="Company" fieldbinding="CompanyID" LoadOnDemand="false" sys:value="{{CompanyID}}" width="500px" showcode="False" descfield="CompanyDescription" codefield="CompanyID" queryid="1" lookupid="1" sys:attach="dataview"> option value="0">(None) /option> /select> ... 1,429 options...
If I paste the entire HTML into jsfiddle.net the select list (combo box) renders with all options listed (no error).
I thought that the data used to build the select list was the culprit so I employed a binary sort approach where I deleted half the data and the error went away. I tested the other half and no error; but, with all 1,430 options I get the error.
Attempted Workaround
The next approach was to load the data onfocus of the select list (combo box). On the main page, no problem... control has focus the list populates. On the PrettyPhoto pages no error; however, the list is empty. Using Fiddler2 I see the JSON data being passed back and I can put a break point where the binding happens in javascript; however, the select list (combo box) is empty.
I've run into other issues with PrettyPhoto and read the following that helped me solve my date picker issue: "'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox"Source
I sense this same issue has to do with the select list not loading. Just not sure how to fix this.
Debugging
Removed the usage of pretty photo and the issue persisted (this issue seems to be the binding and the amount of data).
In IE 9 (or 8) I get the original issue.
In FireFox and Chrome... all is well.
I've been banging my head on this issue for some time now, any suggestion or tip to lead me in the right direction will be much appreciated.
The end solution was to not pre-load all the data into the drop down list; however, to load the data on demand. If the user pressed the "A" key, all the data that started with "A" would load the list and there were no errors.