I have a script that uses jQuery UI's graggable and droppable functionality.
Items are dragged from left panel into main area and dropped.
There are two scenarios:
Items are dropped into other boxes, preset on page load or can be dropped into main area to create a new box. The items can be moved between the boxes. Everything works fine with this setup.
In second scenario there are no preset boxes in main area. They are supposed to be created whn an item is dragged and dropped from the left panel. However, for some reason it only allows me to create one box. Here's an example.
My level of UI proficiency is not high enough to spot what the problem is.
Your problem is that in this code:
$.when(createEmptyStack()).then(function(data) { ... }
data is always "" meaning that you're attempting to add a new element to the page with the same id over and over again (your AJAX request to createEmptyStack is not returning anything in the response). This is why it works fine the first time; the id doesn't exist and so the code works as expected.
When you drag another item into the main area, the element may be successfully appended, but it has a duplicate id. This code:
putCardIntoStack(ui.draggable,newstackId);
(in the same block as the code above)
Is always called with the draggable object and just STACK as the newstackId.
In short, this is a problem with your server-side code not returning a stack id. According to Firebug, your AJAX request isn't returning anything at all.
Related
I have an application which has a main section and a footer. the main section has a tabIndex="-1". The footer holds the copyright thing.The main section further holds some widgets which holds the buttons in a list.When the page loads, the screen reader announces the page load.The body is the default active element. On tab, the focus moves to the first button in the main section.This is the expected behavior. But i don't see this behavior in the virtual cursor mode. So the page loads, the live expression in chrome shows the body as the active element. when i press the down arrow, the screen reader starts reading the footer instead of traversing the dom from up.It entirely skips the main section.Not sure what the issue is. I can't share code as it is proprietary.
I have tried setting the tab index of the main section container to 0.
Expected: the screen reader(in virtual cursor mode/browse mode) NVDA + Chrome should read the dom structure from the top and not skip the main section.
Actual: It skips the main section and directly reads the footer.
You're using roles or semantic HTML elements, I suppose? These have a profound effect on screenreader behavior.
You mentioned that there are buttons in "main" - this might be throwing the screenreader into forms mode, so that the screenreader has nothing to 'read' except button labels, which you get with tabbing. In forms mode, any 'document-like' content will be ignored, unless it's mentioned in an aria-describedby attribute.
You should use tabindex="-1" sparingly - only in cases when you are going to call focus() on that element. It's not clear whether you're doing that. What happens when you remove the tabindex attribute entirely from main?
Also try separating the document part of "main" from the buttons part, with distinct roles for each (e.g. "document" and "application", but there are others you can try).
I've had some testers reporting an intermittent issue on a search page that contains a list.
They say when they have been on the page and navigate to a sub page then return that the list is sometimes scrolled all the way to the bottom of the screen.
I've disabled tensile drag on the list, but I wanted to know if there was any other work-around for this issue?
This has nothing to do with tensile drag. When you navigate from one form to another in the old GUI builder the form is re-created from scratch and re-positioned based on the data.
We try to select the previously selected item but if something in the list changed this might trigger issues.
You can override restoreComponentState in the state machine with a blank implementation to see that this is the cause of this behavior. Assuming that it is you can create a special case for the list instance.
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
I have to add istantly some items without reload the page. After adding these elements I call
$('#one').trigger('create');
But not everything changes as it should (screenshot: http://www.ianaz.com/9a7c50414.html )
The background stays grey, the icon at the right is not added and the text becomes link.
It does not transform everything in a list "button". The third component in the screenshot is as should be.
Do I have to call another method?
Thanks
Just before you call create,try to call listview("refresh") on the list.For eg. if list is the id of the listview,following code should be used:
$("#list").listview("refresh");
I'm having an issue whereby I navigate around my site but when I return to the first (initial) page of the website, the DOM doubles up. I.E there are two div data-role pages with the same ID.
It's because as you navigate around your site, for some reason, JQM always keeps the first initial page in the DOM, but then when you return to it, it doubles up (and consequently your handlers on elements don't work because they are inside the hidden data-role="page" element and the new ones have no handlers..
Have I done something wrong here or is this a common problem one needs to work around in JQM? Thanks
I also don't understand why JQM holds onto the initial page... I thoguht it was supposed to hold on to the last
Please look at this issue: https://github.com/jquery/jquery-mobile/issues/2258
The first page will never be removed
So use
a href='#id' // jump to #id, which is already in DOM
but NOT
a href='index.html#id' // jump to 'create' a new one