form :remote => true, not working in IE? - ruby-on-rails-3

- form_for(#post, :remote => true, :id => 'post_form') do |f|
Works as expected in FF and Chrome, but IE just processes the submit action normally, without any ajax request.
Not really seeing any info on this on the rest of the internet so I imagine I've done something wrong somehow. Ive used both the default rails.js, and the jquery version from the github page

Well, I don't know why the default rails version doesn't work for me here on IE, but I wrote this as a workaround:
if ($.browser.msie) {
var form = $('form#new_post');
form.find('input#post_submit').bind('click', function(){
var data = form.serializeArray();
$.ajax({url: '/posts', type: 'POST', data: data});
return false
});
}
And now it's working correctly. Shouldn't something like this be included in rails.js if this is in fact a problem with Rails, and not something that I've somehow done?

In our Rails 3 app the form tagged as data-remote wasn't turned into an AJAX form any longer after we had upgraded to jquery-rails 1.0.19. IE7 wasn't able to load the jquery.js - there seems to be a problem with version 1.7.1 of jQuery currently. After downgrading to jquery-rails 1.0.18 the problem disappeared again.

Related

Rails blueimp fileupload - cannot select files in Internet Explorer

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 :)

Using AngularJS within Haml views of a Rails app

I have a Rails app with Haml views. Now I want to add AngularJS to some parts of the application, but the problem is that the Haml views are rendered server-side and the AngularJS code is not working, because it is rendered client-side.
Let's say I have just this in my index.html.haml:
!!!
%html{"ng-app" => "Test"}
%head
%script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}
:javascript
function Clock($scope) {
$scope.currentTime = new Date();
}
%title Welcome to AngularJS
%body
%h1 Hello, World.
%p{"ng-controller" => "Clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
So currently, it's just printing out everything within the curly brackets without actually processing it. There are solutions but they for situations where your complete view is replaced by an AngularJS template. I want to use AngularJS mainly for small bits of functionality in my Rails app. Any ideas how to solve this?
John,
I have edited your code a bit here: http://codepen.io/anon/pen/vKiwH
%html{"ng-app"=>true}
%p{"ng-controller" => "clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
and the javascript is:
function clock($scope) {
$scope.currentTime = new Date().getTime();
}

HTTP download not working

I have this in my Rails controller:
def download_clip
send_file "public/output.mp4", :type=>"video/mp4", :filename => "output.mp4", :disposition => 'attachment'
end
and in my HTML code I have this:
Now could somebody tell me why Firefox's download window will NOT pou up, but chrome downloads the file fine? Instead firefox opens a new window and starts playing the file. I WANT THE DOWNLOAD BOX to POPUP. I have spend too much time on it
You are using a relative url, which may not map correctly depending on the page it is used.
Try changing your link to:
<%= link_to "some text", :controller => :your_controller_name, :action => :download_clip %>
If this doesn't help, check if the Content-Diposition response header is being set as 'attachment'. If it is, then the problem is likely with your own Firefox environment and not with the server. Resetting Firefox to defaults should fix that...
Add
headers['Content-Disposition'] = "attachment;"
in your download_clip action..

Problem with using Uploadify

I have been trying to implement uploadify in my rails 3.1 app. And I followed the step mentioned here. And here is my code:
{my form code here}
- arr = []
- request.env['HTTP_COOKIE'].each_char{|c| arr.push(c[0].to_s)}
- #session = arr.join("x")
= #sermon_path = sermons_path
:javascript
$('#sermon_sermon').uploadify({
uploader: '/uploadify.swf',
script: '#{#sermon_path}',
cancelImg: 'cancel.png',
buttonText: 'Browse',
auto: true,
scriptData: { 'session_encoded': '#{#session}'}
})
This did showed uploadify button to select file to upload, but when the file is selected nothing happens. It doesn't even shows the uploaded file and no response is sent back to server.
Any help would be highly appreciated.
I newer use uploadify except in a php project but may be this other tutorial can help you. On github there is a working example and an other but with rails 2.3.4 or you can simply try this gem.

Rails 3, how to prevent ajax remote calls (jquery) with a link_to and :remote => true with JS

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.