Right now, I have a webapp that uses the jquery ajax to make a call (with params that change from call to call via a form) to my backend and retrieve an xml file. I want to put the xml data into a file with a different extension for a private application.
Basically I just want the user to be able to click a button, and it automatically prompts them to "open or save" a file containing the returned ajax xml data.
I've dabbled with sending a raw http header using php, but I can't figure out how to get it to work.
I'm writing all of this in javascript and jquery.
The only thing the below code does is (1)Make the Ajax Call, (2)Write the XML into an HTML page, (3) open the HTML page.
var format = function() {
$("button#format").click(function() {
$("#form").submit();
$.ajax({
url: "find",
beforeSend: function (xml) {
xml.overrideMimeType("application/octet-stream; charset=x-user-defined");
},
data: $("form#form").serialize(),
dataType: "html",
success: function(xml) {
xmlWindow = window.open("download.ivml");
xmlWindow.document.write(xml);
xmlWindow.focus();
},
error: function(request) {
$("#webdiv").html(request.responseText);
}
});
});
};
There is no need to force something like this into the AJAX paradigm, unless you need to play around with the data you retrieve before making it available for the user, then again, that should be able to be done in php. So I would do something like this:
<form id="format" action="download.ivml" target="_blank">
...
</form>
And in jquery modify the action like this
$('#format').submit(function(){
// tweaking the post data, otherwise this whole block is not needed.
return true;
});
Finally on my server use a .htaccess file to handle that weird URL download.ivml
Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(.*)download.ivml$ /path/to/where/I/process/the/request
not quite sure about the syntaxis of this last .htaccess file though.
Related
I am Opening dynamically a page using Ajax, to prevent browser refresh. It opens and it runs scripts on the destination page. but before executing the script, I want them to retrieve the parameters like request.querystring but in Javascript.
This is my code that opens the page.
function cargarPagina(para1) {
$.ajax({
url: "/tarea.aspx",
context: document.body,
data: { "p1": para1 },
type: 'POST',
success: function (responseText) {
$("#maincontent").html(responseText);
$("#maincontent").find("script").each(function (i) {
if ($(this).text() != "") {
$("#maincontent").find("#hola").val(para1);
//alert(para1); //eval($(this).text());
}
});
},
async: true
});
}
After that, the tarea.aspx opens and executes scripts blah blah.
But before executing scripts, I want to get the "para1" value that was sent within the ajax POST call.
Any help would be much appreciated.
You are doing a POST not to the page, but to a server. The server then looks at your POST and says "oh, it looks like this is the page that you are requesting", and serves up some html content. The javascript on that served up page does not have any knowledge of the original POST, or how it (the page) came to be created.
If you want to get the POST parameters into the destination page, you must handle the POST request on the server, and then write the parameters in to the output page, via ASP.net or PHP or whatever scripting language you are using.
Alternatively, you could use GET instead of POST, and then the parameters would be available in the URL
I'm trying to create a javascript api to take a word doc as input from the server side (say A) and post it to another api (say B) that will convert it to pdf. The reason I'm doing this is so that i can use the call to B against any A instead of having to modify each of the A APIs (there are multiple As that give word docs).
This is what I have done so far. The problem is when I'm calling B I'm not able to get the file that i'm sending.
Here's my code.
javascript call to server.
$("#downloadFile").click(function(){
$.ajax({
url : "/fileDownload.action",
success : function(data){
handleFile(data);
}
});
});
});
function handleFile(inputFile){
$.ajax({
url : "/convertFile.action",
type : "POST",
data : {inputFile : inputFile },
cache:false,
processData:false,
contentType: "application/msword",
success : function(data){
alert("yay?");
}
});
}
On my server side (a struts 2.3 action class) for "/convertFile.action", I have a setInputFile(File inputFile) method to set the file from request. However, it is not setting the file.
Now if I use a standard file upload with a form in HTML it sets the file (no javascript though, just plain html and server side code).
Also If I try to construct a form and post without an ajax call, I still get the same result. I tried to use the js in this answer to post the form.
What am I doing wrong? One possibility is that I need to take the input as a string or a stream. But is there anything else that I'm doing wrong/violating/can't do?
I need to realize the following scenario: I have a html page, where is a button and some textboxes. When I click the button i want to create an xml from the textboxes data and send this xml to the server, than server returns this xml back as an attachment and I will have a Save As dialog and I can save this xml locally. I have the following jquery function which send the xml to the server:
function GetXml() {
var xmlData = '{"xml": "<test>test</test>"}';
var contentType = "application/json";
var eDoc = "";
$.ajax({
type: 'POST',
url: 'http://localhost/xmlservice.svc/rest/GetXmlToSave',
data: xmlData,
contentType: contentType,
success: function (result) {
alert(result);
},
error: function (result) {
alert(result);
},
async: false,
});
return result;
}
But i don't know hot to force Save As dialog from javascript with the returned xml from the server.
I can realize it with the classic submit button:
<form action='http://localhost/xmlservice.svc/rest/GetXmlToSave' method="POST" runat="server" >
<input type="submit"/>
</form>
But in this scenario I cannot create xml on the client side.
Is it possible to force Save As dialog from the javascript?
thanks.
From the answers and comments I have made a decision to use classic form submit. I will submit all form to the server and the xml will be constructed on the server side.
Some of suggested solutions looks very good, but there are some restrictions in my target production environment. E.g. there is not possible to install any external components (e.g. flash.). the solution must work also in the older IE 8 browser (i cannot use all new HTML 5 features => i cannot use jsfiddle ). And it seems, that classic javascript doesn't support save as dialog especially from the security reasons.
My requirement is whenever a Image is clicked a PDF should be opened on the browser. I am using Jquery ajax [POST call] to make a call to the ASP.NET MVC side and a file is returned on the response. A POST is required from the jquery side since I need to pass substantial data from client to server.
HTML Part:
<span data-id='printSettings' title='Generate PDF' class="preferenceSettings"></span>
JS Part: This is fired when the Generate PDF icon is clicked.
var textToSend = $('.microChartTable', self.element)[0];
var dataToSend = { htmlContent: textToSend.outerHTML };
$.ajax({
url: "/EADashboard/ConvertToPDF",
data: JSON.stringify(dataToSend),
type: 'POST',
contentType: 'application/json',
success: function (data) {
} // -- success ends here
});
ASP.NET Side : In my controller, I have the following code:
[HttpPost]
public FileResult ConvertToPDF(HtmContent content)
{
string fileName = Server.MapPath("~/SeedData/data.pdf");
string contentType = "application/pdf";
return new FilePathResult(fileName, contentType);
}
Now the PDF generation code is correct just that the PDF file is not been opened on the browser side. I have seen the post Return PDF to browser using JSON and MVC? but since there was no solution provided, I am posting this again. Can anyone let me know how this can be achieved ?
Thanks
Two things.
Why are you doing post via ajax and not a regular post? With a regular post your code would probably work.
If you indeed need to do it with ajax, you are receiving result in the data object on the success of the ajax call, and I do not see that you do anything with it, which is why you do not see anything happening.
there is any sample showing how to use the blobstore api with ajax?
when i use forms works fine, but if i use jquery i don't know how to send the file and i get this error:
blob_info = upload_files[0]
IndexError: list index out of range
I have this code in javascript
function TestAjax()
{
var nombre="Some random name";
ajax={
type: "POST",
async:true,
//dataType:"json",
url:"{{upload_url}}",
data:"nombreEstudio="+nombre,
error: function ()
{
alert("Some error");
$("#buscando").html("");
},
success: function()
{ alert("it's ok") }
};
$.ajax(ajax);
}
When i use forms the file it's sended with a input tag (exactly like the doc's sample)
I wrote a series of posts about exactly this.
Somehow you still need to get the multipart form data request to the server... so when you're using forms, I assume your <form> tag has something like this on it: enctype="multipart/form-data", right?
When you're just sending a "POST" via ajax, you're losing that multipart request, which is where your file is.
There are some jQuery "ajax file upload" plugins out there that may help you out.
Hope this helps!
** EDIT **
I guess one thing I can add to this is usually ajax file uploads (on the client) are implemented by either creating a hidden iframe, and using that iframe to submit a form, or using a form and posting it via JavaScript.