Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do ajax requests works if JavaScript is disabled in the browser?

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

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

Find a below a sample 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?

like image 430
Null Pointer Avatar asked Sep 25 '11 05:09

Null Pointer


People also ask

Can AJAX work without JavaScript in browser?

AJAX isn't possible without Javascript, because it presupposes JS code running on the client. If JS is disabled, there's nothing that can execute in the browser and contact the server - only "dead" HTML and CSS. Flash is an alternative, but then again it can be disabled too.

What happens when JavaScript makes an AJAX request in a browser?

When you make an AJAX request, your browser sends an HTTP request to a given address. The server on the other end of the request responds, and returns the data to your browser. This is the same thing that happens when you navigate to a new web page.

Can a user disabled JavaScript in the browser?

Open Chrome DevTools. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu. Start typing javascript , select Disable JavaScript, and then press Enter to run the command. JavaScript is now disabled.

What is the main role of JavaScript in an AJAX transaction?

Ajax interactions are initiated by JavaScript code. When the Ajax interaction is complete, JavaScript updates the HTML source of the page. The changes are made immediately without requiring a page refresh.


1 Answers

Ajax requests and jQuery will not work when the client has JavaScript disabled. The best way to make this work is to use the URL from the <a> tag href like so:

<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 like below:

public ActionResult UpdateCategoryName() {
    ...

    if(Request.IsAjaxRequest()) {
        return Json(yourData);
    }

    return View();
}

This way, if your user has JavaScript disabled, the link will function like a normal HTTP request. If the user has JavaScript enabled, then they will get the Ajax experience. This is called graceful degradation.

like image 54
Paul Avatar answered Sep 23 '22 02:09

Paul