rails - link_to same page but with anchor -> no reload - ruby-on-rails

I want to use
link_to 'Cancel', edit_project_path(#project, url_options)
to cancel the edit and go back to the edit page.
I use jQuery UI Tabs for a tabbed edit page. Each tab has it's own form and submit/cancel buttons.
When I click a Cancel link I want to go back to the active tab. So I set
url_options = {:anchor => active_tab_id}
The problem is: the page doesn't reload because of the anchor.
Adding data-no-turbolink does not help:
link_to 'Cancel', edit_project_path(#project, url_options), :data => {:no_turbolink => true}

try using
<%=link_to("Cancel", edit_project_path(#project, url_options), method: :get)%>
this helped me better

The only way to do it is with javascript.
Add custom data attribute to the link:
link_to 'Cancel', edit_project_path(#project, url_options), :data => { :reload => true }
Then put this javascript somewhere, for example in app/javascripts/reload_hash.js
$(function(){
$('a[data-reload="true"').on('click', function(e) {
window.location = $(e.target).attr('href');
window.location.reload(true);
});
});

Related

Creating associated records inside parent's new view/form. Associated records are done through Ajax/jquery-file-upload

So i have a "Style" model, which has_many "Images". In the new style page, i want to be able to add images all in the same page. However, since we did not create the style record yet, it does not have an ID. So how would i go about collecting all the images that are built/uploaded by ajax, and updating their style_id attributes after saving the new Style?
I am using jquery-file-upload to add images to the Image table, and upload my files to Rackspace cloud files. All of this is working, i just am not able to set style_id other than just manually setting it.
Is there a best practices/proper way to go about this, since jquery-file-upload uses Ajax, i am not sure the best approach to saving my parent. I am thinking the best approach would be to use ajax to submit the parent form as well, rather than use the dom, like adding hidden inputs/elements to the parent form?
thank you
Style: form partial
<%= form_for #style, :html => {:multipart => true} do |f| %>
//NORMAL RAILS FORM CODE HERE
<% end %>
<%= form_for Image.new, :html => { :multipart => true, :id => "fileupload" } do |f| %>
<%= f.file_field :file, :multiple => true %>
<% end %>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '<%= style_images_path(1) %>',
add: function (e, data) {
data.context = $('<div class="img uploading"/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<img src="'+file.thumbnail_url+'">').appendTo(data.context);
});
console.log(data);
data.context.append("<span>done</span>");
},
option: {
autoUpload: true,
}
});
});
</script>
In the above code you can see I set the style_id manually... style_images_path(1)
-
MY PROPOSED SOLUTION:
My idea is to pass an array of the id's of all children (images) to the create/update method of style. and in the controller, update all the style_id attributes of the matching id's to the newly created style's id... I think this is possible?
That's tricky.
You can instantiate the #style from within the new method of your controller.
Instead than:
#style = Style.new
put
#style = Style.create
If validation complains, than use the following workaround:
#style = Style.new
#style.save :validate => false
Now in your view you have a fully qualified #style with an ID you can pass over to js:
url: '<%= style_images_path(#style) %>',
At this point when (if ever) the user clicks on the form button, the control reaches the update method, not the create (this is because the _form.html.erb automatically changes the HTTP verb from POST (create) to PUT (update). So make sure your controller is ready for this).
You should also consider some sort of "garbage collection" in case Style objects get created and never saved. This might not be straight forward because the user can always close the window and you are left with an incomplete Style in the db. Maybe some js function that triggers at window close and calls a garbage_collect_if_not_saved(#style) method? Still not perfect (what if the browser hangs?) but better than nothig. Otherwise a good-old cron based script that cleans the db up.
Cheers,

rails 3.2 with ajax

Guys I have the following action on my controller to send emails to my users.
def email_all_users
User.all.each do |u|
if !u.information.nil?
if !u.information.business
UserMailer.candidate_email(u).deliver
else
UserMailer.business_email(u).deliver
end
else
UserMailer.no_info_email(u).deliver
end
end
redirect_to "/users/#{current_user.id}", :flash => { :success => "Los correos fueron enviados" }
end
And here is the link in my view
<%= link_to "Enviar Correos".html_safe, {:controller => "users", :action => "email_all_users"}, :method => "get", :id => "email_users", :html => {:style => "color:#FAA732;" }, :remote => true %>
<span id="loading" style="color:rgb(41, 160, 41);display:none;"><i class="icon-spinner icon-spin"></i> Enviando</span>
<span id="send" style="color:rgb(41, 160, 41);display:none;"><i class="icon-ok-circle"></i> Enviado!</span>
I create this file email_all_users.js.erb with this content
$('#email_users').hide();
$('#email_users').ajaxStart(function() {
$('#loading').show();
});
$('#email_users').ajaxComplete(function() {
$('#loading')..hide();
$('#send')..show();
});
As you can see after click in the link I want hide the link and show and image that I have in my loading span (loading is the id), then when the action finish I want to hide the loading and show my send span (send is the id of the span).
What I'm doing wrong because when I click the app send the emails, but does not hide the link and don't show the loading and the send.
Thanks in advance for your help
SOLUTION
I move my email_all_users.js.erb to my assets folder and I changed it like this:
$(document).ajaxStart(function() {
$('#email_users').hide();
$('#loading').show();
});
$(document).ajaxComplete(function() {
$('#loading').hide();
$('#send').show();
});
Problem solve.
Thanks anyway.
Those ajax calls need to go into a regular js file, not as a response to the action. When this code is getting called the ajax reques has already completed.

How do I call a javascript function when a button is clicked?

Right now I am using:
<%=button_to_function "✓", checkButton(), :class => "buttonGrey"%>
But the javascript function needs something to be passed to it so it can toggle the class( I want the buttons class to be changed upon pressing it) What would I pass as a param to represent the button?
Since "button_to_function" is deprecated since Rails 4.0.2, now you can use "button_tag" helper.
Exemple:
<%= button_tag "Do It", type: 'button', onclick: "myFunction()", class: 'btn btn-default' %>
Note: If you use CoffeeScript, declare your function as:
window.myFunction =>
...
because in CofeeScript, functions are not global scoped by default.
You can execute javascript directly in the button_to_function.
In your case:
<%= button_to_function "✓", '$(this).toggleClass("buttonGrey buttonGreen");', :class => "buttonGrey" %>
Hope this helps!
Inside checkButton(), you should be able to access this and manipulate it using jQuery or whatever your framework is.
For example, using jquery:
$(this).toggleClass("buttonGrey buttonGreen");
Just use straight up jquery.
$(".buttonGrey").on("click", function() {
// do something
});
Use the on click event inside the button tag

Open Pop-Up window in Rails on clicking link

I want to open a pop-up window on click of 'link', then show some data there and close it.
I am using 'link_to' to create 'link'.
The part of code looks as:
<%= link_to 'Display Links', :controller=>'aaa', :action=> 'xyz_links', ....... %>
Previously, in rails2.3.x you could just do:
link_to "foo", foo_path(foo), :popup => true
But now in Rails3, this option has been deprecated
Another option is to use the Rails 3 unobtrusive way of event
delegating those links:
First add an attribute "data-popup" to your link_to if you want it to open
in a new window
Then if you are using the jquery adapter, add to application.js inside the document
ready handler:
$('a[data-popup]').live('click', function(e) {
window.open($(this).attr('href'));
e.preventDefault();
});
Or with the prototype adapter, use this code inside the document ready
handler:
document.on("click", "a[data-popup]", function(event, element) {
if (event.stopped) return;
window.open($(element).href);
event.stop();
});
You can find the same discussion here:
http://groups.google.com/group/rubyonrails-talk/browse_thread/thread/e1f02d9e0977071b/814d69e4d56cea65?show_docid=814d69e4d56cea65&utm_medium=twitter&pli=1
I haven't tried this but have this in ruby docs:
<%= link_to name, url, :popup => ['dialog name','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'] %>
pls check at
http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#29-Window-open-a-dialog-of-no-menu-no-status-have-scroll

Use javascript variables in Rails view helpers

Using jqGrid I want to generate delete links for each row in the grid. The standard way to do this is to add the links in the gridComplete callback like shown below:
gridComplete: function() {
var ids = jQuery("#jobs_table").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = '<%= link_to(image_tag("delete.gif", :border=>0, :size=>"20x22", :alt => "delete"),⋅
{ :action => 'destroy', :id => 'cl', :method => :delete}, :class => 'ajax') -%>';
jQuery("#jobs_table").jqGrid('setRowData',ids[i],{workflow_state:be});
}
},
Using getDataIDs I get a list of IDs that I can use to generate the delete links. The problem is that this is a javascript call that results in a javascript variable.
The question is how can I use this variable "cl" inside rails link_to view helper?
Are you just wanting to add a delete button to each row?
If so why dont you just return a column called delete then add custom formatter in your javascript that returns the button.
Custom Formater

Resources