replacing showModalDialog causes loss of form post functionality - javascript

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.

Related

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.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Refresh Page Without Screen Going Blank?

I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?
Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.
You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/

Help : printing multiple "reports" from browser (IE 6 essential, others would be nice)

No thoughts on this one? Anyone?
Here is my scenario:
I have a form where the user selects a report type, and then selects a list of users they want to generate reports for. When they submit the form, a new window is opened that uses pagination to allow the user to review each user report individual by using next and previous links.
The user wants the option to:
print both the currently displayed report by itself (that's an easy one), and
a "print all" option to print all the selected reports.
However, each report for each user must have its own "Page x of n" footer.
For the footer, I have been using the browser footer options, but in order to have the page numbering start new on each report printout, I have to make a separate window.print() call for each one. I have implemented this this way, and it works, but it's awful because each print() call causes a new print dialog to display, meaning the user has to click print in each dialog to finalise the print request. Many reports = a stupid number of popped up print dialogs.
Ideally, I would like the printing of a report group to look like a single print job, but I need that page count to be restarted for each report.
I thought of trying to count pages myself to make my own footer, but that seemed like a daunting task considering all the variables that could affect how many pages a report would occupy. I also read some about using ActiveX and WebBrowser objects to force prints and hide the print dialog, but I have had no success with that because I am running on XP SP2. Also, I understand it's frowned upon from a security perspective, and it's not a good cross-browser solution.
Has anyone dealt with printing of this type before and would have some suggestions for a way to make this work or a better way to handle it?
Thanks in advance.
I've seen this done two ways the simplist using the MeadCo scriptx component which alows you to print without a dialog. But as you rightly say this is not good from a security perspective. This was done in a corporate environment where they had control over the end users browser.
The second would be to go down the ajax route and load each report page individually, without prining, then concat each report html together into one doucment adding any needed page breaks. Finally rendering to an IFRAME and calling print on that frame to print all reports in one action.
This isn't tremendously helpful, but you may want to look into using a pdf generator, such as PDFlib or fpdf. Doing this with static pages will incur all the problems you stated, as well as some which you didn't (such as the user setting his own font or font size and ruining your pagination).

Preventing the loss of keystrokes between pages in a web application

My current project is to write a web application that is an equivalent of an existing desktop application.
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed. Does anyone have any tricks for preventing this? Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT, or will that still have the problem of lost keystrokes?
Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.
Basically what you are really asking is; how do I speed up a web application to increase response times? Your anwser is AJAX!
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages. Remember, don't over-use AJAX. Using too much javascript can hinder usability just as much as it can improve it.
Related reading material:
Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.
Ajax Usability Mistakes
AJAX Usability Checklist
Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link. That way the form is already loaded as part of the page. It should appear almost instantly.
You can find modal div tutorials all over the place, shouldn't be too tricky. If you're using ASP.NET there's even one included in Microsoft's AJAX library.
AJAX or plugin are your only chances.
I think it will be quite hard to do what you want. I presume that the real problem is that the new page takes too long to load. You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible. (see Simple Tricks for More Usable Forms for some ideas)
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke)
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page. (see Save Changes on Close of Browser or when exiting the page)
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes.

Categories

Resources