Ajax request other than Get and Post

Type setting in Ajax request is used to specify HTTP method that can be used to make remote calls. Many firewalls and application servers are configured to discard other kind of request except Get and Post.

If we want to use other HTTP methods, then we can make a POST request, but add the X-HTTP-Method-Override header; Setting it to the method we want to use, like this;

X-HTTP-Method-Override: PUT

This convention is widely supported by web application frameworks and is a common way of creating RESTful web applications.

You can learn more about this here;

https://en.wikipedia.org/wiki/Representational_state_transfer

See the “Setting Timeouts and Headers” section for detail of how to set a header on a jQuery Ajax request.

Throw exception on server side and handle in jQuery AJAX post call

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

Here are some references;

https://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages

Ajax Request: Response to preflight request doesn’t pass access control check

Today, I started getting this error after making few Ajax calls to a remote server;

Access to XMLHttpRequest at 'https://foo.com' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This problem relates to CORS. Here is some explanation and work around;

https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

Here is some more useful info;

https://www.edureka.co/community/82342/how-to-add-custom-http-header-to-ajax-request-with-javascript

jQuery Ajax – tips

jQuery Ajax is async by nature. We use to set a flag “async:false” if we need to make Ajax call sync (non-blocking). This feature has been deprecated. Here is a compile list of Ajax using jQuery;

Alternative to “async: false” for successive AJAX calls

Handling Sequential AJAX Calls using jQuery

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

jQuery callback for multiple ajax calls

jQuery.when understanding

jQuery Promises – Taking action .when() multiple ajax calls are complete

jQuery selector change not firing

I like to fire a change event when “#btnBrowse” click event fires. Here is a sample jQuery code;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click();
});

$("#xFileUpload").change(function () {
   var filename = $('#xFileUpload')[0].files[0].name;
   filename = filename.replace(/\.[^/.]+$/, "");
   //alert(filename);
   $("#xFilename").val(filename);
   fileDoc.fileName = filename;
   fileDoc.fileContnet = $("#xFileUpload").get(0).files;
 });

It turns out that click event will be registered and fired on first click only. For subsequent clicks, I have to registered a change event and triggered it like this;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click().trigger("change");
});

The cons of using this approach. It will work fine for the first click but all subsequent clicks will fire a change event on click event. The reason jQuery has registered two events for the element and execute them simultaneously.

The objective is to grab file from file system. The user should be able to use same file multiple time. The best alternative to achieve this objective is to clear the contents of HTML input type rather tweaking jQuery;

This is HTML file input;

<input type="file" id="xFileUpload" name="xFileUpload" class="form-control" style="display: none" />

This is jQuery code that will clear contents of this file;

$("#btnImportReset").click(function () {
   $('#xFileUpload').val('');
});

This is your final browse script section;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click();
});

Since we are clearing out HTM contents and jQuery is smart enough to figure out change. The change event will be fired this time automatically with a change in HTML file input.

Resources

https://stackoverflow.com/questions/19194177/jquery-select-change-not-firing

https://stackoverflow.com/questions/4247264/how-to-trigger-jquery-change-event-in-code