I am trying to trigger the download pop up box on firefox using an Ajax jquery call.
my jquery code is this:
function download_clip(){
$.ajax({
url: '/controller/download_clip',
type: "GET",
complete: function (data_response) {
status = data_response.responseText; //the response variable from the presentation controller
console.log(status);
}
});
};
in my controller:
def download_clip
send_file "public/output.mp4", :type=>"video/mp4", :filename => "output.mp4", :x_sendfile=>true, :disposition => 'inline'
end
Any ideas how to trigger the download box?
... well, I think firefox does this by itself if you do
document.location.href = "/controller/download_clip";
with javascript.
Related
Im new to MVC and I need to know How to invoke Action Methods from a view's buttons. And i need to clarify the difference between button and submit
Thanks
The buttons usually belong to a form tag. A form has a submit url. When the button <input type="submit" value="Submit"> is pressed you are redirected to the url written in form submit. Action Method is tied to a web page. For example if you go to www.eample.com/home/hello you execute Hello action in Home controller.
You can use jQuery to fire AJAX calls to specific pages (for example /home/process) and change the data on the page. To do that you should bind onclick javascript event on the button and there perform ajax call.
Example of AJAX call when page is loaded:
function loadContent() {
$.ajax({
type: 'get',
url: 'Page.html',
contentType: 'application/html; charset=utf-8',
dataType: 'html',
beforeSend: sendContent,
success: successContent,
error: errorContent
});
}
function sendContent() {
////loading
}
function successContent(data, status) {
$("#content .main").html(data);
$("#content").show();
}
function errorContent(request, status, error) {
////error
}
$(function () {
loadContent();
});
In my Rails App (3.2.12) I'm using the jquery-fileupload-rails gem to enable users ti upload profile pictures. Everything works fine in Chrome and Safari, but in Internet Explorer (I tested it with version 10) I can't even select files to upload. When I click the 'Add Files'-Button, instead of showing a dialog to select files he instantly fires an empty request to the upload action, resulting in a json response showing an empty photo object. This is my current js to initialize the fileupload (I already added some code from issues with IE and the csrf-tokens):
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tiff)$/i
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(/\/[^\/]*$/, '/photos?%s')
);
//add csrf token manually for ie iframe transport
$('#fileupload').bind('fileuploadsend', function(event, data) {
auth_token = $('meta[name="csrf-token"]').attr('content');
data.url = data.url + '?authenticity_token=' + encodeURIComponent(auth_token);
$.blueimp.fileupload.prototype.options.send.call(this, event, data);
});
and my controller code for the response, in which I already (hopefully correct) set the content type to 'text/plain':
format.html {
render json: [#photo.to_jq_upload].to_json,
content_type: 'text/plain', #content_type: 'text/html',
layout: false
}
format.json {
render json: {files: [#photo.to_jq_upload]},
content_type: 'text/plain',
status: :created,
location: #photo
}
Does anyone know, how to get this to work in IE and can help me please? Thanks :)
It took me quite some time to figure it out but in the end it was actually pretty simple: When applying my own styles I replaced the span-tag around the Add-Files-Button with a button-tag. This had no effect in the webkit browsers, however led to an immediate form submit in Firefox and Internet Explorer. Changing it back finally solved the issue :)
I am working on integrating jquery pageless plugin with a rails application. The pageless plugin works seamlessly when i write out the javascript. The issue lies in trying to have a javascript method issued upon complete. What i am trying to accomplish is having a helper method to generate it, but it renders the javascript with quotes around my callback method which then generates an error in the javascript
Uncaught TypeError: Object reloadMasonry has no method 'call'
here is the helper method code
def pageless(total_pages, url=nil, container=nil) opts = {
:totalPages => total_pages,
:url => url,
:loaderMsg => 'Loading more results',
:loaderImage => image_path("load.gif"),
:complete => "reloadMasonry"
}
container && opts[:container] ||= container
javascript_tag("$('#masonry-container').pageless(#{opts.to_json});")
end
This is the produced javascript code
<script type="text/javascript">
//<![CDATA[
$('#masonry-container').pageless({"totalPages":3,
"url":"/articles",
"loaderMsg":"Loading more results",
"loaderImage":"/assets/load.gif",
"complete":"reloadMasonry"});
//]]>
</script>
the javascript results in having quotes around the reloadMasonry callback function
reloadMasonry = function(){
$('#masonry-container').masonry('reload');
}
if i copy the exact javascript produced, and simply remove the double quotes around the javascript callback method ( reloadMasonry ) in this case, everything works seamlessly.
does anyone have any suggestions.
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);
So I have a simple ajax call to a page:
= link_to 'click me', my_path, :onclick => "if ($('#go').val() == "ok") { alert('going'); } else { return false; }", :remote => true do
This works just fine, I see the alert only when my field with id "go" has ok in there... but the issue is that the remote action triggers every time no matter what.
If this was not a remote link it would work just fine, not going through with the link, but it does not seem to behave the same way with a :remote => true ?
How can I achieve the expected result ?
Thanks,
ALex
The issue here is that the Rails UJS driver will see the data-remote and then perform the action because of a function like this in rails.js so perhaps try setting the property om your link inside the JS and remove the :remote => true. That might work however I dont know if rails.js would bind to that correctly or not.
Also, consider placing this JS in the application.js once you're done debugging just so you dont have inline JS all over your controllers.