We Keep Coding

How to download a pdf file using Ajax without href?

I have a button in HTML.
<button class="btn btn-success" id="invoicePrint" disabled="disabled">
<i class="fa fa-print"></i> Print Invoice
</button>
On click of button, ajax is called
Ajax End Code looks like this:
$('#invoicePrint').click(function (e) {
e.preventDefault();
documentCommon.ajax({
dataType: 'text',
type: 'GET',
url: '/download/invoice/' + $("#invoiceId").val() ,
data: {
'_CONV_ID': $('input[name="_CONV_ID"]').val()
},
success: function (data) {
},
error:function (xhr, ajaxOptions, thrownError) {
alert("Server Side issues. Kindly retry or contact system administrator");
}
});// End ajax
});
When i click on button; Nothing happens, no file download
but when i chrome inspect i can see following details:
Request URL: http://localhost:8080/download/invoice/6
Request Method: GET
Status Code: 200
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Disposition: attachment; filename=Invoice_99_6.pdf
Content-Length: 430385
Content-Type: application/pdf
Date: Sun, 17 Jan 2021 06:21:50 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Accept: text/plain, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: JSESSIONID=A8A8ACC5AD3A925394EDB729684624FA
Host: localhost:8080
Referer: http://localhost:8080/welcome
sec-ch-ua: "Google Chrome";v="87", "\"Not;A\\Brand";v="99", "Chromium";v="87"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36
X-Requested-With: XMLHttpRequest
Also a response binary data:
From internet i can see guys using href to download. but is it possible without using href in above code or any other alternative as browser has .pdf plugin which will be used to open this.

Give it a try "$.ajax()"？

How to read values inside http request headers

I want to extract specific values from http request headers, below is an example of the header information
GET ***/agencychannel-uiapiservices/api/ken/AccountProfile/GetAccountProfileWithViewingPeriod*** HTTP/1.1
Cookie: __utma=132118163.703100490.1447412805.1456837339.1458655276.3; _em_vt=98cf395181af797bbccffc582cf957fe2438c7f254-0905822558184c34; A03RNB-PHRS2-80-PORTAL-PSJSESSIONID=a1Sfb2ZGJdR4VlBvyDvRDxSHOseo9kZa!-351035759; https%3a%2f%2fpeoplesoft.multichoice.co.za%2fpsp%2fhrprd%2femployee%2fhrms%2frefresh=list:%20%3Ftab%3Dhc_ux_manager_dashboard%7C%3Frp%3Dhc_ux_manager_dashboard%7C%3Ftab%3Dhc_talent_summary%7C%3Frp%3Dhc_talent_summary%7C%3Ftab%3Dremoteunifieddashboard%7C%3Frp%3Dremoteunifieddashboard
Host: ***apidtgateway.multichoice.co.za:9800***
Accept: */*
Content-Type: application/json
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.6,en;q=0.4
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36
Connection: keep-alive
komodo-sessiontoken: a2f960a2-f359-4ed9-a926-41630d37ae06
Accept-Encoding: gzip, deflate, sdch
When I get the request I need to extract the host and the path, end results should be like this apidtgateway.multichoice.co.za:9800/agencychannel-uiapiservices/api/ken/AccountProfile/GetAccountProfileWithViewingPeriod

Example
function TControllerAplicacao.EchoString(Value: string): string;
var
objWebModule: TWebModule; //need Web.HTTPApp
host :string;
xxx :string;
begin
objWebModule := GetDataSnapWebModule; //need Datasnap.DSHTTPWebBroker
host := objWebModule.Request.host;
//see on Delphi IDE other possibilities, code complete will show to you)
//key header that you know the name, is possible to be custom header:
xxx := objWebModule.Request.GetFieldByName('Content-Type');
Result := Value; //from original datasnap example EchoString
end;

How to submit form on file select without page reload?

I'm developing an wireless file transfer app (HTTP Web Server), it contains a website with a form to upload file to the server i.e android app
When I select a file of very less size header generated is as below.
POST /?Upload HTTP/1.1
Host: 192.168.0.101:4567
Connection: keep-alive
Content-Length: 2968
Pragma: no-cache
Cache-Control: no-cache
Origin: http://192.168.0.101:4567
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT0t2jgS72DnsVZRX
Accept: */*
DNT: 1
Referer: http://192.168.0.101:4567/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
And when I select a larger file then and error occurs as follow
Console error : (index):637 Refused to set unsafe header "Content-length"
Header generated
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Code :
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input id="uploadPath" type="hidden" name="path">
<button class="file-upload">
<input id="fileUpload" onchange="uploadFile()" type="file" class="file-input">Upload
</button>
</form>
<script>
function uploadFile() {
var form = document.getElementById('uploadForm');
var path = form.elements.namedItem("path").value
var file = document.getElementById('fileUpload').files[0];
var formData = new FormData(form);
formData.append('file', file);
var http = new XMLHttpRequest();
http.open("POST", '/?Upload', true);
http.setRequestHeader("Content-length", file.size);
http.onreadystatechange = function () { //Call a function when the state changes.
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(formData);
form.reset();
form.elements.namedItem("path").value = path;
}
</script>

This will listen to the file input, and when the value changes, meaning they have selected a file, it will send an ajax call with your form to the url you specify. This should submit the form without a page reload.
Updated to include reference to jQuery
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
$(function () {
$("#fileUpload").on("change", function () {
$.ajax({
url: "upload.php",
method: "POST",
data: $("form").serialize(),
success: function (data) {
// success callback
}
});
});
});
</script>

You should probably try looking into AJAX. This will make it possible to update part of your page without a reload, by requesting page fragments from the webserver. The page fragments are then used to update certain elements on your page. See http://www.w3schools.com/ajax for an intro.

You could check out this solution (jQuery AJAX submit form). Requires JQuery but is easy to implement.
You could try only using Javascript and AJAX (Form submission using AJAX, PHP and Javascript), without the need to be dependent on JQuery. This would be a more complex process to build, however it is the best method if you plan on building out more complex form submission features.

Debugging MobileServiceClient request

I'm developing an Azure MobileService / CordovaApp setup. The server runs locally and has the following setting to enable CORS:
<add name="Access-Control-Allow-Origin" value="*" />
The api can be called via browser using addresses like
http://localhost:59477/api/item/explore/A/B
The client script that's trying to depict this call is the following:
var client = new WindowsAzure.MobileServiceClient('http://localhost:59477/', 'http://localhost:59477/', '');
GetItems.addEventListener("click",
function ()
{
client.invokeApi("item/explore/A/B",
{
method: "get"
})
.done(
function (results)
{
alert(results.result.count);
},
function (error)
{
var xhr = error.request;
alert('Error - status code: ' + xhr.status + '; body: ' + xhr.responseText);
alert(error.message);
}
);
}
);
What I get is status 405 - Method not allowed, which I don't understand for two reasons:
The invoked Service Action is decorated with the [HttpGet] Attribute
The response headers seem to say GET is fine:
HTTP/1.1 405 Method Not Allowed
Allow: GET
Content-Length: 76
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?RjpcQ29kZVxGb290UHJpbnRzXGZvb3RwcmludHMuU2VydmVyXEZvb3RwcmludHNTZXJ2aWNlXGFwaVxmb290cHJpbnRcZXhwbG9yZVw1MS4yNzcwMjJcNy4wNDA3ODM=?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Date: Sat, 15 Aug 2015 18:08:30 GMT
Any idea what I can do to get this running?
Edit
The Raw request shows that, as already expected by Jeremy Foster, the client sends a request of the type OPTIONS:
OPTIONS http://localhost:59477/api/fp/get?id=1 HTTP/1.1
Host: localhost:59477
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4400
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36
Access-Control-Request-Headers: accept, x-zumo-features, x-zumo-installation-id, x-zumo-version
Accept: */*
Referer: http://localhost:4400/index.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
I managed to support this request applying the [HttpOptions] attribute to my action method. Now I get a more or less valid response:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?RjpcQ29kZVxGb290UHJpbnRzXGZvb3RwcmludHMuU2VydmVyXEZvb3RwcmludHNTZXJ2aWNlXGFwaVxmcFxnZXRcMQ==?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Date: Sun, 23 Aug 2015 19:34:21 GMT
Content-Length: 234
...
At least that's what fiddler tells me. The AzureMobileServiceClient throws yet another issue, which roughly translates as:
Cross-Origin request blocked, missing token 'x-zumo-installation-id' in CORS header row 'Access-Control-Allow-Headers' on CORS-Preflight-Channel

Turn on Fiddler and try your api call from the browser and then again using the Mobile Services client and compare your raw HTTP requests to see what's different.

Try to run through the CORS Support section of this blog post: http://azure.microsoft.com/blog/2014/07/28/azure-mobile-services-net-updates/.
A side note: The x-zumo-installation-id error you were getting was because the client requested access for a list of headers (see the Access-Control-Request-Headers in your request) and the server did not return that same list in the Access-Control-Allow-Headers header. Using the MS_CrossDomainOrigins setting as mentioned in the above blog post takes care of this by setting the allowed headers to * (all) by default.

jQuery ajax request for PUT fails, but it is working with Postman

I am trying to make an ajax request like below:
function updateLastSeen() {
var url = 'http://my.url.com/conversation/' + $('#conversationId').val() + '/seen/' + $('#senderId').val();
$.ajax({
type: 'PUT',
url: url,
contentType: "application/json",
success: function(result) {
alert('Logged out')},
error: function(result) {
alert('error')
}
});
}
The request in the preflight looks like this:
Request headers
OPTIONS http://my.url.com/conversation/3/seen/3 HTTP/1.1
Host: m.url.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: null
Access-Control-Request-Method: PUT
Connection: keep-alive
And this is the response
HTTP/1.1 200 OK
Date: Wed, 15 Apr 2015 06:16:54 GMT
Server: Apache
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json
So according to me it should work. However I get an error that Method PUT is not allowed by Access-Control-Allow-Methods.
I also tried via Postman to see if there is a problem with the backend (which is totally obscure to me) but via Postman it works! So what am I doing wrong?
The request headers with postman:
PUT /conversation/4/seen/3 HTTP/1.1
Host: my.url.com
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
Content-Type: text/plain;charset=UTF-8
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,nl;q=0.6
Cookie: _ga=GA1.2.1794721550.1428851890