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
Related
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);
});
});
I am using tinymce-rails gem for Tinymce and I want to add custom menu option. Right now I am doing what is suggested in the readme of gem like:
<%= f.input :content , :label => false , :placeholder => 'Content', input_html: {class: "tinymce"} %>
<%= tinymce %>
I am using simple-form.
I want to add a drop-down in the editor with a bunch of options (I have an array of names) and when user clicks on an option then the selected name should be inserted in the view of editor. And those names will be dynamic.
I tried to pass many options to the initialiser tinymce but unable to get the result.
Rather than using the default initiator from the gem you could initiate tinymce manually and create the menu item at the same time:
http://www.tinymce.com/tryit/menuitem.php
Something like this:
<script type="text/javascript">
tinymce.init({
selector: '.my-class textarea',
toolbar: "styleselect | bold italic | mybutton",
setup: function(editor) {
<% #my_items.each_with_index do |name, index| %>
editor.addMenuItem('<%= name %>', {
text: '<%= name %>',
context: 'tools',
onclick: function() {
editor.insertContent('<%= name %>');
}
<%= index == (#my_items.count - 1) ? '});' : '}),' %>
< % end %>
});
</script>
We use a ternary operator to choose the correct closing tag based on the index of the names.
Theoretically you can also do this in the config/tinymce.yml file, but due to the dynamic nature it's not really plausible.
Something else you may want to look into is passing the menu to the activeEditor like:
tinyMCE.activeEditor.controlManager.get('my_menu')
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,
I have an submit_tag or input button, however you wanna call it, but I can't get the Text + Font-Awesome icon to work together.
I tryied like this
%input{type: "submit", name: "A", "data-theme" => "b"}
%i.icon-time
= "Finish"
But the icon and the text are outside the input tag( ... )
I tryied to use
= content_tag :input, type: "submit", name: "A", "data-theme" => "b" do
%i.icon-time
= "Finish"
but the same problem, the %i was left outside.
with button_tag it looks good, but the content is not submitted to the controller. ( maybe because the html tag is button and not input )
How can I get this working?
Check your console for any errors. I feel like you may just have a css problem. If the button tag works for you, you could easily add a jquery fix.
$('button').click(function() {
$('form').submit();
});
From what I can see that is the only fix for nesting content inside of a form submit.
P.S. You don't have to write = "Finish", you could just write Finish!, HAML will insert it as plain text wither way.
In the application.html.haml I have the following
= javascript_include_tag "application"
= javascript_include_tag "disable_ajax"
In the application.js
//= require jquery.mobile-1.3.0
In the disable_ajax.js
$( document ).bind( 'mobileinit', function(){
$.mobile.ajaxEnabled = false; // Here is where I fix the problem
});
The key is to include the jquery mobile first
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