I want to reorder my rows in jqgrid. I achieved this functionality using this example
click here, I have checked that sample in tablet PC,it is not working in following browsers like IE,Safari,Chrome browsers,but works in FF.
Do we have any general fix for this?
I wrote the demo which you reference many year ago for the answer. One can't expect that old versions of jQuery, jQuery UI and jqGrid will work forever.
If one just replace jQuery, jQuery UI to the current one and to use jqGrid 4.6 then the demo will better work, but it will still not work in Chrome. It's well known problems with jQuery UI. The plugin jQuery UI Touch Punch is written exactly for the case.
You can verify that the demo which uses jqGrid 4.6 works already perfectly in Chrome, but not in IE. jQuery UI already works in IE on tablet PC, but sortableRows works on Chrome and Firefox, but it have problem in IE. Moreover one can see that the form editing dialogs can't be moved on tablet PCs (with exception of Firefox).
The next demo uses free jqGrid. It's the fork of jqGrid which I develop after Tony have changed the licence agreement of jqGrid and started Guriddo jqGrid JS which is not more free. I implemented many new features in free jqGrid. I rewrote jqDnR module used in jqGrid for drag&drop already for the first free jqGrid release 4.8. Free jqGrid 4.9 will be soon published.
Thus I would recommend you just use jQuery UI Touch Punch and free jqGrid to solve the described problems.
Related
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.
I'm using JQGrid 4.4.4. I have a column of edittype = 'select'. The value displayed in the row of the grid is correct. But when I edit the row, the drop-down/combo-box value is set to the wrong value. Instead of setting it to the value, it sets it to the label having same text value. The value-label pairs in the drop down is - {'1':'0','21':'1'}. The problem is only when the label is same as the value for another item in the options.
Here is the JS fiddle -http://jsfiddle.net/ksrini/ehj0nyLu/4/
And here is a screen shot that shows the problem.
The issue is reproducible in 4.6. The JQGrid forum seems to be closed and I can't raise a bug if this is indeed a bug.
Any suggestions on how I can fix it or work around this?
Thanks,
The demo which you use don't reproduce the problem because both jqGrid 4.6 and the old version 4.4.4 don't supports local data editing. It's important that you use
formatter:'select'
Only in the case jqGrid should save values of the drop-down/combo-box. In any way you can verify that free jqGrid 4.9.1 don't have the described problem (I used just URLs described in the wiki article): http://jsfiddle.net/OlegKi/ehj0nyLu/5/. I can imagine that some bugs exist in the old version 4.4.4, but it's clear that nobody will fix the bugs. So I would recommend you to update to free jqGrid. It's the fork of jqGrid which I continue to develop after Tony have changed the licence agreement for jqGrid in 4.7.1 version. His fork have the name Guriddo jqGrid JS. If you will find some bugs in free jqGrid then you can post the issue to GitHub or post the description of the problem on stackoverflow. The latest version can be easy fixed, but not the retro version 4.4.4.
UPDATED: The bug is fixed in the latest version of free jqGrid on GitHub: http://jsfiddle.net/OlegKi/ehj0nyLu/6/. The fixed code will be included in free jqGrid 4.9.2 which I will publish today.
Just for information I repeat what I wrote before in comment: the line of code jqGrid 4.4.4, which you use, like all later versions of jqGrid and free jqGrid (less then 4.9.2) tests for either the value or the text during selection of option of <select> during editing. It's correct to test for the value only and the select the option by text only if no option were found by value. The fix implements the changes.
From Oleg's comments in his answer, it seems to be a bug in the code attempting to keep it backward compatible with programs using an older version of JQGrid.
For now I've worked around this issue by getting the value from the selected row in the grid and setting the value of the select input field in the form in beforeShowForm function.
beforeShowForm: function(form) {
...
$("#<field-id-in-grid>", form).val(<value-from-selected-row>);
...
}
NOTE: I've accepted this (my own) answer for the work around. The fix is mentioned in one of Oleg's comments to his answer. If that can be made as an answer, I'd prefer to make that as the accepted answer.
I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE:
I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.
As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
docs for IE guide.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});
Docs for angular.element
Change the jquery version to lower. By seeing this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle
$('#secondClick').click();
Edit: You can forward mouse events through elements with good browser support using: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
If you're fortunate enough to not have to work with older browsers then you can get away the pointer-events CSS property.
#firstClick {
pointer-events: none;
}
I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post
I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)
We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.
You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html
This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.
You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation