How to select text when using FullCalendar and SlickGrid - javascript

I have a page with SlickGrid on it and I wanted to add a FullCalendar to show date-based data in calendar form to augment the table (grid) display.
This worked fine (grid shows and calendar shows), but I noticed that I can no longer highlight and select text on the page after calling fullCalendar()
I identified root cause script as jquery.event.drag from ThreeDubMedia which is required for SlickGrid (it throws exception if jquery.event.drag lib is not loaded)
However, I'm having trouble finding a fix or even a hack to get this working without breaking other stuff (like SlickGrid functionality). I've been messing with FullCalendar options and even experimentally hacked some of the mousedown and selectstart handling code, but that didn't help. I also poked around with jquery.event.drag methods but I haven't had luck fixing the text selection issue while retaining the SlickGrid functionality that my users want (like being able to drag columns around and stuff).
So definitely some kind of integration issue but I'm not sure where the fault is.. it is weird that jquery.event.drag gives me zero problems until I actually create (render) the FullCalendar (by calling fullCalendar()), so maybe FullCalendar is to blame. It does proxy several events like mousemove, mouseup, and selectstart, but jquery.event.drag also can hijack events.. ugh.
Anybody have fix for this? Thanks.
Fiddle that shows the problem: http://jsfiddle.net/4kLf8jk5/
Clone of above Fiddle, but with call to .fullCalendar() commented out: http://jsfiddle.net/4kLf8jk5/2/
(These are minimalist examples but suffice to demonstrate the issue)

$("#calendar").fullCalendar();
$(document).unbind("dragstart");

Have you tried the 6pac repo?
This has a version of jquery.event.drag and ..drop updated for jquery version 2.x and 3.x and other small bugfixes. Might be worth a try before further investigation.

Version 3.0 of Slickgrid has recently been release that drops the jQueryUI dependency, including the drag and drop files mentioned above. This should make the drag and drop event hooks more consistent.

Related

JqueryMobile issue when working with Knockoutjs

I found jquery mobile is not rendering correctly when the element is generated by knockoutjs (or probably not rendering correctly when element is generated dynamically). See the demo at http://jsfiddle.net/wRRZk/1/
updates:
One solution is to load jquery-mobile js file after KO binding finished as shown in http://jsfiddle.net/wRRZk/3/, however this doesn't solve the problem that jquerymobile render fail when changing KO model dynamically, as shown in http://jsfiddle.net/wRRZk/4/
I think you'll need to tell jQueryMobile to create those elements into the jQM enhanced version using the API. Check here :: http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html and look halfway down for "Enhancing new markup" and the section just below.
As for the create/refresh ... might need to be somewhat judicious in know when and where you're adding new stuff, and whether a create or refresh is needed.
I've done a new version of the jsFiddle here :: http://jsfiddle.net/wRRZk/5/.
I'm also removing from the model afterwards, which does seem to remove the links too, BUT, I think that may also be because the jQM enhancement is keeping the same anchor, thus the reference knockout as is still valid.
Not too sure how well that will work for the other enhancements done by jQM.

How to build a drag and drop script like this?

I have recently been using sitecake, I like the drag and drop interface of it for the content editor. Try the demo on their site for the visual editor.
I am wondering how can I build a 'local' script like this for my managing and creating articles for my site.
What I need is the drag and drop options like this and a button which onClick outputs the html of the current display.
I have been looking into jQuery DND, draggable and droppable, HTML5 contentEditable and edit-inplace.
But unfortunately, nothing yet.
Can someone help me with this? Or altest point me in the right direction?
Thanks in advance.
I am the developer behind SiteCake. The first version of SiteCake was developed based on GWT and jQuery/jQueryUI Droppable and Draggable. The current version is powered by GWT and GWT-DnD library.
I am not sure I understand clearly your question about getting the html code.
Check out jQueryUI Droppable and maybe even Draggable.
Droppable is certainly capable of what you're asking. All you would need to do is specify drop points, which is what sitecake does.

How to locate dojo DnD handler?

Yo, I am just picking up an old project that uses dojo 1.0.2. The drag and drop function is half working and my job is to get the other half done.
The problem is I can't even begin to trace the program. There is a DnD table cell with the following attributes:
<td onclick="myclick" copyonly="true" accept="ppDay" dojotype="dojo.dnd.Source" id="src04/08/2011" class="dojoDndContainer">
I test it on the browser and it lets me drag and drop, and I see feedback on the drop destination. But the drop event is not completely implemented, which is why I am on it anyways.
The problem is I can't find where the DnD event handler is defined. Can you give me a hint?
It is implemented in dojo.dnd.Source, which can be found in dojo/dnd/ folder: Container.js, Selector.js, and Source.js.
General DnD documentation can be found in the official docs: http://dojotoolkit.org/reference-guide/dojo/dnd.html — DnD principles changed little since 1.0.2.

JQgrid not sizing properly in IE8

For some reason I cannot seem to get IE8 to display my jqgrid right as you can see below. This isn't the only grid that doesn't display properly. I have another one in my project that renders just like the one below :(. Needless to say, I tried all sort of column widths, tried turning the scrollbars off etc etc. but nothing seems to improve the situation.
Am I missing something obvious ?
I am using the very latest JQgrid version 3.8.
Firefox:
Explorer:
Mostly the problem exist in CSS which you use (for example standard CSS generated by ASP.MVC MVC). Different web browsers interpret CSS inheritance differently. Look at this answer and this. Probably the usage of increased cellLayout parameter or the function fixGridWidth inside of loadComplete could solve your problem.

dragover mouse event contain file info in XUL application using javascript

I'm writing a XUL application using JavaScript for the coding. I would like to be able to drag files onto a control in this application and, when dropped, have them show up.
This seems like it would be almost exactly like the tutorial here, but when I break in the drag and drop event handlers in a debugger, the dataTransfer member of the event isn't there!
How should I be doing this?
Thanks,
Nathan
These features were added in Firefox 3.1, and XULRunner 1.9.1, so make sure you are using the correct version. Be aware these builds are still in beta.
The old API for drag and drop is here.

Categories