Are ajax requests being made if JavaScript is disabled in the browser?

Question

I am developing a web application and using jQuery to provide a good user interface for users. Therefore, I use ajax queries and many jQuery functions.

If I turn off JavaScript in the browser, most of the function will not work, because I send asynchronous ajax requests for many functions. But how can I handle this? Do I need to rewrite code without using jQuery and ajax?

Find below an example button click event:

$("#renameCategory").live('click', function (event) { if ($.trim($("#CategoryNewName").val()) == "") { alert("Please enter a category name"); return; } var selectedCategory = $("#SelectedCategoryId").val(); var newCategoryName = $("#CategoryNewName").val(); var postData = { categoryId: selectedCategory, name: newCategoryName }; $.ajax({ type: "POST", url: '@Url.Action("UpdateCategoryName", "Category")', data: postData, dataType: "json", success: function (data) { $('#' + selectedCategory).text(newCategoryName); $("#selectedCategoryText").html(newCategoryName); }, error: function () { alert('error') } }); }); 

How can I handle this?

Answer 1

Ajax and jQuery queries will not work if JavaScript is disabled on the client. The best way to do this work is to use the URL from the <a> href tag as follows:

 <a href="@Url.Action("UpdateCategoryName", "Category")">Click Me!</a> $("#renameCategory").on('click', function (evt) { //To prevent the link from sending the default request //call preventDefault() on the jQuery event object evt.preventDefault(); // if ($.trim($("#CategoryNewName").val()) == "") { alert("Please enter a category name"); return; } //GET THE URL FOR THE AJAX REQUEST var actionUrl = $(this).attr('href'); // var selectedCategory = $("#SelectedCategoryId").val(); var newCategoryName = $("#CategoryNewName").val(); var postData = { categoryId: selectedCategory, name: newCategoryName }; $.ajax({ type: "POST", url: actionUrl, data: postData, dataType: "json", success: function (data) { $('#' + selectedCategory).text(newCategoryName); $("#selectedCategoryText").html(newCategoryName); }, error: function () { alert('error') } }); }); 

You will also need to check for ajax requests in your controller, as shown below:

 public ActionResult UpdateCategoryName() { ... if(Request.IsAjaxRequest()) { return Json(yourData); } return View(); } 

That way, if your user has JavaScript turned off, the link will work like a normal HTTP request. If the user has JavaScript enabled, then they will gain Ajax experience. This is called graceful degradation .

Answer 2

Ajax call works when javascript is enabled.

You can handle it with server side scripts, when javascript is disabled, you have to do messaging / receive requests, so you need to transcode your web application.

Answer 3

If JavaScript is disabled in the browser, the <script> tags will not be interpreted and executed in your document, including all your jQuery and AJAX JS code. The most common way to implement an interactive web application other than Javascript is Flash, so you still have a backup plan. You can also switch from the old server side only with generated dynamic pages.

Today, however, it is very rare that someone does not have JavaScript, so it should not be a problem at all.

In any case, you can use the <noscript> html tag to display messages to these users.

 <script type="text/javascript"> ... Js code ... </script> <noscript>You have JavaScript disabled in your browser. Please enable it.</noscript> 

Answer 4

Obviously, any script-specific functionality will not work if scripting is disabled, unavailable, or incompatible with the environment in which it is trying to work.

Many consider a good web application development strategy to work without script support. You can then add scripts to improve workflow and efficiency, but you will do this, knowing that you will return to the working system if the script does not work at some point.

The discipline of designing and implementing a good workflow based only on HTML and forms can lead to a simplification of the script interface and a more efficient workflow.

Too often, developers dump some minimal HTML and CSS and then try to do everything in a script. There should be a DOCTYPE, a title element, one block element and one script element that does everything. Not recommended.

Answer 5

If you need a lot of changes for your site to work without javascript, just get users to enable javascript. One way to notify users when javascript is enabled is to use the noscript tag. http://www.w3schools.com/tags/tag_noscript.asp

Browse the stackoverflow page source to see how they use noscript