how AJAX application should behave when Javascript is disabled - common practice? - javascript

I’m in the process of developing pretty basic web application, that is mostly so I could learn jQuery/ajax/php on the way (and have some fun). I want to make it as accessible to users as possible so it should work with Javascript disabled, validate to AAA and all that. With JS disabled would be of course without all the bells and whistles, but nevertheless should do the job.
I would like to make good use of Ajax, but I don’t fully understand how should I cope when JS is off.
So let’s say JS is on, user submits the form, clicks submit button and thru ajax, data is submitted to register.php (register.php is specified in forms action attribute). register.php returns data and jQuery displays appropriate message. All without reloading the page.
Now, if JS is disabled, submitting form to register.php won’t do much good.
The way I understand it, solution would be to create one php script for JS enabled, other for JS disabled. So by default form would have action attribute with nonjs_register.php, and if JS would be enabled, it would force the form to be submitted to js_register.php rather than default nonjs_register.php.
I can imagine that would be quite tedious to create two scripts pages for each user interaction with the application but that’s the only way I can think of at the moment.
I hope all that makes sense but please let me know if my explanation is not quite clear.
Now if anyone could explain to me what is the common practice to deal with that kind of problem that would be great.

Take a look at the Hijax technique, it's a way of using AJAX as a progressive enhancement.

The way I would deal with this sort of thing is to use an event with javascript that cancels the default action of the form. The default action of the form is to submit to a different url:
html
<form id="AjaxForm" action="/nonJS_register.php" method="POST">
<!-- form input elements -->
</form>
js
document.getElementById("AjaxForm").onsubmit = function ()
{
//- do ajax posting...
ajaxPostForm();
//- Cancel the default action of the form
event.preventDefault();
return false;
}
The ajax function could submit to nonJS_register or you could even just add a parameter that tells the script to return the data in a different format and not encapsulated by HTML.

the recipe is very basic:
always pull everything on the page
before JS is even called.
then change everything via JS - e.g. hide
elements as required etc.
AJAX needs to hook up on the events and cancel
the original events (e.g. clicking
the link will get you to another
HTML/PHP generated page without JS
available, but with JS available you
can change targets to pull AJAX only
and return false, so click won't
actually change the page)

The best thing I could suggest would be to build it how you would want it to work without the AJAX calls. That way you can get an accurate portrayal of how it will work with JavaScript disabled. Then start to work in your JavaScript and continue to test with/without JavaScript enabled.

If you use AJAX to implement some ESSENTIAL part of a page, then the whole page will have to require Javascript.
This is a thing you have to point out BEFORE you start implementing it.
If you want to make Javascript optional, then you can't use AJAX to implement all the communication. You'll have to use postbacks, and eventually override the "click" events of buttons to make the postback asynchronous (a.k.a. with AJAX).
So, I would suggest you to write the page as if you don't have Javascript, then override some functionalities later on if Javascript is enabled.

One solution would be to have your register.php file recognize the HTTP header: Accept in requests it receives and it would respond one of several ways:
If the incoming request has
Accept: application/xhtml+xml, text/html, multipart/mixed, */*
Then return an HTML page as a response.
Or if it's something else, such as
Accept: application/json, application/javascript, text/javascript
It would return JSON (in this case), or XML if it had the appropriate mime types listed for example.
Then in your Javascript code, you'd handle the onsubmit event and override the normal behavior to perform what you suggest in your question (but also changing the Accept header, like above). If javascript is disabled, the form will submit normally and will pass along a header that should trigger your PHP to return a web page.

Related

AJAX url and controller

For form submission I use an AJAX call that posts data to a page like form.ajax.php. At this page I check if '_POST' is set and then process the form by validation, and then save the data using my database class. Depending on the result, the ajax-page return a status message back to the form-page which fires an alert message with the status.
My question is how and where should I put my AJAX files. Should I use one file for all kinds of AJAX requests or multiple and how does AJAX fit into web MVC? I have tried to search for it but there seems to be many different opinions.
I usually find it manageable to make ajax calls from the views files which load ajax(js) functions as needed. This way all the functionality related to the front end display is contained in one place and easier to debug later on. I also create common utility ajax functions so minimize code repetition.It goes something like this:
view.php( callController(ajax function) ) --ajax call--> controller.php( return value)---> view.php(updateView(ajax function))
You could, for clarity, use one file per AJAX action, and put them all in the same directory, like /AJAX/logout.ajax.php, /AJAX/login.ajax.php etc. If you only have a couple of actions you can just use one file to serve them all.
This is just a matter of convention between you and the people you work with (including your future self, say 6 months later, when you will have no idea what you did in that project).
As long as everyone is in the same page, you can't really go wrong.
Also, I hope you sanitize your _POST inputs properly so little Robert won't be able to harm your database.

Manipulate History Back with jQuery

I'm currently working on a PHP 5.3 based CMS. A lot of actions are called using GET Parameters.
Example:
index.php?action=create_module
adds a certain module to the database and displays the module structure again. There are also functions (triggered by simple links, no POST request) for removing and ordering modules, working the same way with GET parameters.
Problem with this: If the users clicks on History Back after two actions on that page, the whole action is triggered again, which I would like to avoid.
How can I solve this issue? Searched the internet already, but with no satisfying results.
Is there a jQuery function which can remove this ?action parameter when using the browser Back button?
If not, can I prevent the browser from going back?
Is there a way to trigger this "Page has expired" notice?
Different approach on the PHP side?
Note: Header("Location:..") is no option, and I would like to avoid AJAX here.
Thank you for your help!
You could add an event listener on 'onpopstate' to clean window.location.search which holds the parameters, see http://html5doctor.com/history-api/ to get more info about HistoryAPI.

Use server side code if javsascript is disabled

i'm delegating some application logic client side (javascipt).
How can i switch to server side only if javascript is disabled.
eg
if(javascript.isdisabled)
{
//execute server code
}
You do it the other way around. You write HTML that works with server side code, then layer JavaScript over the top that stops the HTTP request that would trigger the server side code.
The specifics depend on exactly what you want to do, but will usually involve calling the Event.preventDefault() method having bound an event listener.
For example, given a form:
function calc(evt) {
var form = this;
alert(+this.elements.first.value + +this.elements.second.value);
evt.preventDefault()
}
var form = document.querySelector('form');
form.addEventListener('submit', calc);
See also: Progressive Enhancement and Unobtrusive JavaScript
Server code executes first, then is sent client side. And there's no good way to determine server side whether JS is turned on.
So purely: no. You simply don't know if JS is enabled until the point where the server already done serving that request.
Solutions are as follows:
1) Do it manually (not recommended)
As long as this is not happening on the user's first page view, you could determine on the first page view whether or not JS is enabled, and then tell all future requests to the server that information manually. One way to accomplish that would be to have all links have a query var telling the server to execute logic, but after the page loads remove that var via JS (which obviously will only happen if there is JS).
So a link would look like https://blah.com/my-page?serverexecute=1 in the page, then once the page loads JS (if it's enabled) can remove the var so it's just https://blah.com/my-page. Then the server would only executed your logic if the query var serverexecute is present and set to 1.
But this would be very non-standard and, frankly, weird. The more normal way to do this is:
2) Reverse your thinking (recommended)
As said in another answer: progressive enhancement. This is the norm. You serve a page with the expectation that no other scripting be needed (i.e. do what has to be done server side) and then use JS as enhancement on top of that only.
3) Don't cater to non-JS (also recommended, personally anyway)
JS availability is an insanely high percentage. It is considered a norm, and you'd be surprised how many sites don't actually work without it.
Note that I'm not saying "just let it break silently", but rather show a message at the top (or wherever is relevant) saying that the site or part of the site may not function correctly without JS (this can be done via noscript tags quite easily).
A notable example of this is none other than Facebook. I just tried going to facebook with JS disabled. I wasn't logged in to anything, so I got to the signup page, and above the form it noted:
"JavaScript is disabled on your browser.
Please enable JavaScript on your browser or upgrade to a JavaScript-capable browser to register for Facebook."
They didn't even make the effort to stop the form from showing...just, in essence, told me "by the way, it won't work".
Unless there's some very specific requirement that means you absolutely need non-JS (beyond the normal general "let's be accessible" concept) I personally believe there is currently absolutely no reason to spend any effort catering to non-JS users beyond the courtesy of a noscript letting them know that you're not catering to them.
You could think of redirecting users without javascript to a special page, that includes server-side logic you've mentioned, like so:
<head>
<noscript>
<meta http-equiv="refresh" content="0; url=http://example.com/without-js" />
</noscript>
</head>
The page may be exactly same page featuring query string that will tell server to perform the logic you've mentioned.
Another possible approach to consider is explained in "Detect if JavaScript is enabled in ASPX" article.

MVC3 Using Javascript to postback similar to how $.post works -- but with an actual postback?

I have an ASP.NET MVC3 app that features a form with a nested-table input
(Ie on each row I can add a sub-table, with no limit on depth)
To handle this for my MVC app, I've created 2 javascript classes(using this term loosely with js:) that mirror my MVC3 model and post the data to an action method. Everything works great...Except that right now the only way that I know how to do this is with jquery $.ajax or $.post --- How can I do a postback in javascript?
I have the URL, and the custom JSON data, and want to do a page postback... Any suggestions? I can't use the normal form submit due to the nested table scenario described above.
Also, I just want to say, that MVC has made this so simple to render! :) For rendering a recursive view did everything without any script required, only on the saving did I need to screw around with json.
Update:I guess another solution would be -- can I change the contents of my form data on submit? My method takes a JSON object, is there any way I can stuff that in my request while my form submit is happening normally?
You can use the XML Http Request to do this. This is eventually what jQuery and other JS libraries use.
But why don't you just stick to jQuery AJAX or POST?
Maybe I'm misunderstanding your question, but it seems like what you want to do is post to the same page you are on, which means if you have the URL (and it sounds like you do), you just need to specific that in the $.ajax method? Maybe you can clarify what you mean a little bit for us.
Edit: Per comment suggested looking at http://jquery.malsup.com/form/
Well, I found that with the MVC3 binding, the table in my form could be normally bound if I named the fields such as Item[0].Children[1].Children[0].FieldA... etc, everything matched up fine without having to convert to javascript objects/json. I changed my code to fix this naming before a form submit, and it binds pretty well without having to do any json calls at all. Less elegant, but I guess it works.

Server or CLIENT side Custom ASP.Net Controls?

I am an undergraduate student ,
and working on my Final Year project these days.
I have some queries related to Custom Controls as follows:
I am designing a text box field which will have three or more functions as follows :
Either it will allow numeric characters only
Or it will allow an email address to be taken as input
Or it will be a file Upload text box
I am using jQuery to validate this text box .for eg. for checking whether the user has entered numeric characters only or not!!
My Question is
What is the better approach to build such custom controls ? Either make it pure client side or pure Server side or both?
Also , I need to include AJAX functionality in file uploader.
If the client browser doesnot support JavaScripting for some reason then how we can avoid this constraint ?
Thank you very much for your time !
Kindly help me.
First of all you have to decide if you need both client-side and server-side functionality for your control. It will depend on your needs. If you are writing it as part of a large application, I would suggest going for both, because it's much easier to manage. If you decide that you do want both, ASP.NET includes exact functionality that you are looking for. It's called Extender controls. They will allow you to create a custom server-side control and extend that control to include some client-side functionality. You can get more information about Extenders here.
Graceful failing AJAX controls are rare, majority of the developers that create AJAX controls assume that all clients will have JavaScript turned on. However, they are not that hard to do. Actually they are very easy to do, if you are using ASP.NET AJAX Update Panel. Update Panel itself will automatically switch to full post-back if JavaScripts are disabled. If you are using custom implementation of AJAX, or jQuery (as you mentioned above), you have to follow a few simple rules. First of all, avoid binding events from inside scripts, use onclick, onmouseover, etc. This way, if a link has onclick event, and a valid href tag, if JavaScript are on, you will process onclick event handler, but if they are off, you will just follow href attribute value. For the uploader, you can put your uploader inside the FORM element, and add onsubmit event to it. If JS is on, you will process onsubmit, and do an AJAX call to save the file, if JS is off, you will do a full page post-back and save the file from the server-side.

Categories