Bugs with using custom coding and Twitter's Alert plugin with Jquery - javascript

I have a filter I am using based off of Twitter's Alert, Collapse, and Modal Plugin. The conflict comes with using the Alert plugin and my custom code to get it to function how it should.
The filter functions like a sort, when clicking a selection, it creates a field (in the case of the BCN and Account filters which are my problem children) within the sort menu below its heading.
EX: Clicking on accounts pulls up a modal window from there, the user selects an account name. That name appears outside of the modal window and in the filter section below Account. The selection can be dismissed when clicking on the X beside it or dismiss all of them by clicking the reset button at the bottom.
This is where the bugs occur:
After selecting one account name, it requires a double click for each subsequent selection made. It should only require one click
When clicking on an account selection (several), dismissing it via the X, then reclicking the same option tha that was previously selected causes all dismissed
selections to appear in the filter section.
My question is how to tamper out the bugs. I am open to using another method that isn't the alert plugin so long as it works properly.
Link to the code: http://jsfiddle.net/rsxavior/ccvEw/2/

Related

Accessible in-line modal?

When it comes to accessibility, what is the proper design pattern or technique for appending an inline panel that would have a header, body text, and optional close button?
For context, I've been tasked with creating an accessible multi-select quiz question that appends a correct or incorrect feedback panel under the question after the user presses submit. I think normally this sort of feedback would appear in a modal popup that covers the other content and traps focus, but this particular design needs the feedback panel to appear in the page directly under the submit button, and still allow the user the tab back through the answer options (even though they would be aria-disabled after submitting).
The feedback panel would have a title header, body text, and an optional close button. There would be no close button if the user got it all correct or they ran out of attempts.
Is there a suitable aria-role or known design pattern for this sort of appended panel? And what should I send focus to once the feedback panel appears, the header? The close button?
In case its relevant, for the multiselect answer options I am using native checkboxes with <label>s
Option 1
The first would be to add role="alert" to the appended box (assuming you will only add it once per page as otherwise we would use aria-live).
This would then be announced to screen reader users.
Option 2
Option 2 is that you can just append the box to the page and use focus management. So the box appears and you would move focus to the heading of the box via JavaScript (with tabindex="-1" on the heading for example). This needs to happen from an expected action (so "submit answer" button that you said you have).
I would probably go with option 2 as it is the easiest way to not introduce more accessibility issues by mistake.
There are other ways you can achieve this with aria-live, aria-labelledby etc. etc. but the above two options are the most straight forward.

How do I trigger the sidebar reveal in the WordPress Gutenberg editor?

So I have developed a sidebar for the Gutenberg editor in WordPress. The purpose of this sidebar is to provide feedback, grades, scores, etc., for a set of custom input boxes that appear below the post editor. As such, the user may want to have it open and be using it to view the real-time updates to their scores as they are editing.
Now, of course, the button on the toolbar works to activate and deactivate the sidebar, but I was wondering if their was an external way that I can call my sidebar to reveal it. I have a call to action that I've just added to that section of inputs that will inform the user that this "optimizer" now exists, and if they click on it, I want the sidebar to become activated so that they can check it out. I'm hoping for something like this:
jQuery(document).on('click', '.my-button', function() {
// How do I activate, deactivate or toggle the activation of the sidebar?
activateSidebar('my-cool-sidebar');
deactivateSidebar('my-cool-sidebar');
toggleSidebarActivation('my-cool-sidebar');
});
Of course, all of those function are make believe, but that's where you come in. Is there a function or methodology that will allow me to invoke the same behavior as what happens when that top toolbar button is called? Thanks.

Bootstrap ui lookahead dropdown only works after deleting selection first

The software I am debugging uses ui-bootstrap-tpls-1.1.2.
By default, if I open a modal and then click on one of the text boxes that has a a lookahead dropdown menu, the dropdown menu opens.
If I then select an option from the dropdown and click on that textbox again to pick a different option, the dropdown will not open this time, unless I delete at least one character from the original selection.
How do I get that dropdown menu to open every time I click on the text box, regardless of whether something has already been selected?
thanks
Things I've tried:
onclick="TextBoxName.Text = String.Empty;"
onfocus="this.value=''"
Clearing the textbox is not necessary, but I couldn't find anything in the documentation that would provide another way to accomplish this without clearing the text 'onclick' or 'onfocus'. Neither of those two functions above gave the result that I had hoped for.
The code for the modal:
below is a pick of the modal.
The red circle shows a textbox where a selection has already been made.
If I click on that textbox again, the dropdown will not appear until I delete at least one character from "2017/18 Items":

Differentiating between nodes for receiving events in HTML using jQuery

I wanted a drop down to implement a particular input. But the inbuilt select didn't look good to me. So instead I tried implementing it with lists. I've had partial success with this. When I click on the text field the list gets presented by sliding down from the text field and when clicking on the list gets dismissed by sliding up. The slide animations are done using jQuery.
On click of any of the <li> elements the value gets set in the field. A click anywhere else just dismisses the list.
But now when the list gets presented over a button and when I click on the list, it considers this as a click on the button and just dismisses the list.
How can I tell the browser to take the click on the list instead of taking the click on button when the list is presented?
The screenshot should give a fair idea: Click on all other list items works properly, but ones that's is above the button doesn't work. In the screenshot, the click on list item Miscellaneous doesn't work:
You can use event.stoppropagation.
$("#PopuListId").click(function(event){
event.stopPropagation();
// do rest of the things
});

Conditional actions when an Oracle APEX navigation bar item is click

The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.

Categories