jQuery Sortable Cannot Click After Sort Issue - jquery-ui

I have a table that is being sorted by the TR tags, everything works fine except that I have to click twice on any item in the list after something has been moved for anything to respond, on links etc. Do I have to call some function after the list has been sorted to re-activate it so that I don't have to click twice on items?

Can't truly understand the issue without code samples but if you believe that refreshing could solve it you probably need .sortable('refresh');

Related

Multi-select in Vaadin Grid is not correctly selecting items in Grid

I'm using the same code in two grids and in one table SelectionMode.MULTI works as expected but in the other grid right after I select it (I can see the selection appear) within the blink of an eye the row is unselected. If I bring it back to SelectionMode.SINGLE then everything works. As well this weird behavior is across multiple browsers. It's the exact same code and everything looks correct.
Therefore I would love some help as to where to even start debugging this? I tried to even add hooks into the SelectionListener and it's firing correctly, so it's not as if it's being re-selected (unselected). I'm at a complete lost as to where or how to debug this weird behavior...
I also looked for anything like grid.setItems() and other than the initialization there are no calls to setItems().
What's even weirder is that I can do select all (clicking on the box in the column header) and all items are selected. I can then unselect the rows I don't want. However once I unselect a row I can no longer re-select it unless I do select all...
UPDATE: This issue just got much weirder. One grid was for Invoices and the other was for Receipts. They both extended the same parent class. Invoices always worked but Receipts didn't. As part of my testing I used the parent class and assigned Invoices in my Receipt Grid code and it worked. And if I did the reverse (Receipts in my Invoice Grid) I had the same issue in my Invoice Grid. I then decided to try to have Receipt extend Invoice, which although incorrect, did resolved the issue!! With that in mind I'm completely baffled with why this would ever resolve/cause this issue! Any idea as to how this is even possible would be extremely because I'm completely baffled why this can even happen at all...
I also asked for helped in the Vaadin forums where you can see the exact code difference.

CSS Menu system not working in IOS 8

I implemented this css dropdown menu system a few years ago and I am just realizing now that it does not work on my iPhone, yet it works fine on my bosses android phone. I was under the impression that since IOS5, i-devices do register a touch event as a hover automatically but I guess I was wrong.
The structure of this menu is a little weird in that the main tabs (other than Home and Contact) are not meant to take the user anywhere, only the submenu items actually go to another page. I have a feeling this is where the issue may lie, but I can't figure it out.
Here is a JS Fiddle.
The :hover is on <li> to cause the dropdown. Maybe this is the issue? or maybe its the way my boss coded the button so it would look like a link but not do anything on a click:
<li id="aboutus" class="blogbutton"><a><span>About Us</span></a>
I tried removing the anchor tags and the whole button goes away. I removed the span tags and the original problem still remains.
Is there a fix without having to rewrite the whole menu system?
Try adding an onclick="return True;" attribute to the base menu that triggers the drop-down. Safari will trigger the hover attributes, but only if it thinks that the element does something when it's tapped, and for a static element like a li, this is the easiest way to achieve that.

Select2 additional checkbox not checking

Hei guys.
I'm trying to add additional HTML elements below search box.. like checkboxes for filtering purposes.
But the added checkbox is not functional, you can't actually check it. I'm not sure but I think that search box is taking the focus from them... I created this jsFiddle so you guys can check it out.
http://jsfiddle.net/6wz2hLh0/
$("#e1").select2();
//Inserting additional HTML elements below search... filter in my case
$(".select2-search").after("<input type='checkbox'/>");
When the dropdown is open you can't even write in jsFiddle input's.
I tried commenting out various focus calls from source code with no luck.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
One thing to try is to have the checkbox element stop the mouse events from propagating. That seems to prevent them from getting to Select2, so Select2 cannot kill them.
$("<input type='checkbox'/>")
.insertAfter(".select2-search")
.on('mousedown mouseup click', function(e) { e.stopPropagation(); });
jsfiddle
I'm not sure but I think that search box is taking the focus from them
My guess is that this is because Select2 kills (stops propagation and prevents default) most events that occur within the dropdown. This is so Select2 doesn't leak events, but it also causes problems like not being able to catch click events or embed links.
When the dropdown is open you can't even write in jsFiddle input's.
This is because Select2 uses a mask that captures all events outside of the dropdown.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
You are going to want to look through the source for killEvent, as this is the method Select2 uses that kills events. As most browsers listen for the click event for native controls, you probably want to remove this killEvent for dropdown clicks.

jQuery Mobile app not not displaying elements correctly

SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.

jQuery UI Sortable Question

I am trying to build a sortable navigation tree using jQuery UI Sortable. I have it working great in Firefox with no prblems. In IE it works pretty well, however, there seems to be some inconsistent issues when trying to move an item with a nested list down in its navigational tier. The list doesn't expand to create a drop point for the list in motion and it often fails, however, sometimes the sort works anyway. I have played with this for longer than I care to admit! Does anyone have any ideas?
Here is a link to a demo with source.
To duplicate the problem: In IE drag the row (Move Show Item 12) up a few rows then try to move it back down to where it started. (Note: to move items you must click and hold on move)
You might get what you want if you try setting placeholder in the .sortable() call, i.e:
$("#list").sortable({
placeholder : 'placeholderClass'
}
Then make sure you have a class .placeholderClass defined, and you can choose what styles to apply when a block is being dragged - Not sure of this is what you want - just a suggestion.
Check out these pages if you need more info.
I noticed that if you drag below the list and then back up into it it works just fine. It must be some kind of jQuery UI / IE bug.

Resources