Question

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?

Answer 1

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.