Angular JS Angular input dropdown control not getting rendered properly - javascript

I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

Related

Reload only part of an iframe

I looked on many posts but I've never found out such a context like the one I have so I'm requesting you some help.
Here is my development context :
I had in mind to build a single-page based PHP Application and I then chose to set-up a global container page embedding a side navbar-menu on the left for navigation control and an iframe on the right for related content.
The iframe is updated following the navigation navbar to display the selected content to the user.
First, I'm not saying that this is the right way to do this kind of PHP Application and would be ears opened to different way to achieve this.
For now, it's working out but I rose up a problem since I would like to reload only A PART of my content iframe. Indeed, there is a div box inside it that should be updated when the rest shouldn't (or at least it looks strange during navigation).
I was wondering if setting-up a listener on the iframe to look on mysql database updates and then trigger a JS function would be memory cost efficient ?
What would you guys think ? Maybe there's a different way to solve this problem (I was thinking of a big AJAX rendering instead of an iframe for example) ?
Thanks a lot for your answers,
Martin
Okay so for those who would face the same situation I ended up trigerring an ajax function in my child iframe from the parent main page via the instruction document.getElementbyId("myIframe").contentWindow.myAjaxFunction() that run the search script in background (with post parameters from the parent page).
Then I got the reload of only a section of the iframe.

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?
I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.
I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

how to make screen readers read entire page when angular changes states?

Requirement: on each page change the screen reader must read the entire page content.
We use firefox+NVDA to do our testing, and since angular doesnt "change pages" we have tried the following to make it read the entire page when changing states:
aria-live="assertive"
This for the most part read the changes in text in our site,but it only reads what its being added, in our case we have a table being filled with ng-repeat and it reads the information being added but without any context (it doesnt say what row or column is being read)
Another issue was forms, when being filled by angular, the screen reader will read it before they were populated by angular, this was solved with a $timeout but still when aria-live reads the changes it would skip some parts, and if we added aria-atomic to force read, we had some selects with multiple options, and those were read (all of them, we have more than a hundred options). which is not how screen readers read, they only read the first ten options or the ones visible when you click on them.
Remember that without any aria-live or aria-atomic, when you change states in angular the user is not notified of any changes.
after almost giving up we decided that maybe our focus was wrong, we needed to make each state its own page so we used the following:
function ForceNVDARead() {
$(window).on('hashchange', function () {
location.reload();
});
}
This for every change in the URL will force a reload. This works GREAT, everything was being read correctly, we almost thought this solved everything. Except this causes double requests from the client to our server.
Is there any way to make NVDA read the contents of an angular state like a regular page load, without having to force the reload of the page?
Please dont say use aria-roles only or something like that that doesnt work for this and we already have them, we need the application to read everything when changing states.
ANY help is appreciated, we are about to give up, and restart the project without angular as we are not able to achieve our accessibility requirement.
Requirement: on each page change the screen reader must read the entire page content.
This is fundamentally not a requirement from an accessibility point of view, it is the equivalent of making someone looking at the screen to read everything one line at a time, or use readquick, it is not natural usage.
Screenreader accessibility is acheivable when using Angular, but we need to reset some assumptions:
When you have page updates, the key is to manage the focus, and move to the new content. That allows people to read in their own way, not the way you have been assuming they have to read.
ARIA live is intended for small updates elsewhere on the page (away from the keyboard focus), not the whole content, it is not the answer here, I would drop it completely.
If people are reading forms before they have loaded, that might be a side effect of trying to force the reading with ARIA-live. If not, then trying using focus-management to place focus at the top of the form when it has loaded.
It is probably worth reading a tutorial on NVDA usage, or talking to a 'native' user. I can say from experience you are not using it in the way end users do, so get to understand better what 'normal' interactions are like.
If you drop the use of ARIA-live and go with focus management you'll probably solve most of the issues, but there may well be more questions later from a different point of view.

how to close a modal (bootstrap) and reload the page with angularjs?

I'm using bootstrap and angularJS and I don't know how to hide a modal and reload the page. I know I can reload with $route.reload() and hide it with $('#modalpolicy').modal('hide') but if I use both, the webpage doesn't show correctly (it's still black). How can I do it?
EDIT. At least I've decided to do a new query sooo I have the information up-to-date. on the page.
Thank you for your reply.
For anyone else coming to this question I recommend using http://angular-ui.github.io/bootstrap/ for your bootstrap needs. Saves you from having to use jQuery in Angular which is rarely a good idea in the first place.
Finally, I reloaded it just calling the service again.

Categories

Resources