I'm using the "toggle" function in my code to show / hide a div. I want it to be hidden by default though. How should I do this.
Here's the line of code:
<%= link_to_function "+ Add a comment", "$('comment-form').toggle()" %>
Thanks.
in your css:
.hidden { display: none;}
And give your div the hidden class
This can also be done UJS by having
<script type="text/javascript">
$(function(){
$('comment-form').hide();
})
</script>
Somewhere on the page. This will let you also run many different javascript/jquery calls once the page loads.
Just expanding a little on the previous 2 answers:
In your template
<div class="commment_form hidden">
<!-- Comment form markup -->
</div>
<%= link_to"+ Add a comment", "#", :id => "comment_link" %>
In your css
.hidden { display: none }
In your application.js
$(document(ready) {
$('#comment_link').click(function() {
$('.comment_form').toggle();
});
});
I'm going from memory, so my apologies if the code isn't perfect!\
Related
I'm trying to get rid of the ugly button rails has as default for the file upload. i want to add a glyphicon
<%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %>
This didn't work and I have tried other things in different post i saw on this page, but they don't attach the file.
You can do it using css.
HTML:
<div class="image-upload">
<label for="file-input">
<span class="glyphicon glyphicon-camera"></span>
</label>
<%= f.file_field :image_url, id:"file-input" %>
</div>
CSS:
.image-upload > input
{
display: none;
}
.image-upload > label{
cursor:pointer;
}
You can find the working example here
As suggested here Bootstrap Filestyle, you can use Bootstrap's Filestyle to style your file upload buttons.
Step-1: Add this to your layout application.html.erb
I have added the Bootstrap Filestyle library from CDN. You should make sure that you have both JQuery and Boostrap loaded.
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script>
Step-2: Add this to the corresponding js file:
$(":file").filestyle({input: false});
Step-3: Then your image_url file field could look like as follows:
<%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
you can use also:-
add file field and hide this field :-
<%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%>
add one div with class:"glyphicon glyphicon-camera" :-
<div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div>
use script:-
<script>
var loadFile = function(event) {
var output = document.getElementById('image-output');
output.src = URL.createObjectURL(event.target.files[0]);
};
function upload_it(){
$("#upload-it").click();
};
</script>
How do you disable the cancel rating function in ratyrate? I have tried:
<%= rating_for #community, "friendliness", cancel: false %>
and checking the default value in app/assets/javascripts/ratyrate.js.erb to false. I have no knowledge in javascripting so I don't really have any clue on editing app/assets/javascripts/JQuery.raty.js
This guide mentions disabling the method at the start but never really explains it.
The gem does not look like supporting it. One of the work arounds is to disable it from css like this:
img.raty-cancel {
display: none;
}
Since JS is not your option.
Another option is to disable it with javascript conditionally:
Assume that you don't want to show your rating in some conditions:
<% disable = "disable-cancel" if condition %>
<div class="<%= disable_cancel %>">
<%= rating_for #community, "friendliness", cancel: false %>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".disable-cancel img.raty-cancel").hide();
});
</script>
My Rails app uses partials to load different pieces of the site into view. I'd like to add a close icon that removes the partial from view when clicked. Example: The user opens a folder in the app, and clicks an icon to "close" the folder. Is this possible?
Ok quick solution with jquery:
_partial.html.erb
<div id="unique">
<p>Html code here</p>
</div>
View.html.erb
<%= render :partial => 'partial' %>
<script type="text/javascript">
window.onload = function () {
$('#unique').remove()
}
</script>
removing the DOM node with jquery .remove()
http://api.jquery.com/remove/
I got a issue like this:
I am using Rails 3.2.9 and jqueryUI 1.9.0
I had a tabs UI and use ajax for each tab.
the html and Javascript code is like this:
<!-- index.html.erb -->
<div id="tabs">
<ul>
<li>page1</li>
<li>page2</li>
</ul>
</div>
<!-- page1.html.erb-->
<p>this is page 1</p>
<!-- page2.html.erb-->
<p>this is page 2</p>
and in home.js:
$(document).ready(function () {
$( "#tabs" ).tabs();
});
so, when I start the server, and try to activate any tab, the front end will keeping send the requests back to server. does any one know what happened on this?
Thank you
Update
I change the home.js like this but still doesn't work:
$(document).ready(function () {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
if ( ui.tab.data( "loaded" ) ) {
event.preventDefault();
return;
}
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
});
}
});
});
I still can not find the reason why this happened. A big thank you if some one can figure it out.
Thank you!
Because you specify home/page1 and home/page2 in your href links, it will load them up each time you click on the relevant tab.
Instead you can load the pages up once in index.html.erb by rendering partials into your page. If you rename page1.html.erb to _page1.html.erb and page2.html.erb to _page2.html.erb you can change your code to:
<div id="tabs">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<div id="page1">
<%= render 'home/page1' %>
</div>
<div id="page2">
<%= render 'home/page2' %>
</div>
</div>
Edit
If you still want to load the pages dynamically when you click each tab but only once, then don't use partials - you can just use the cache option:
$( "#tabs" ).tabs({
cache: true
//some other options
});
Try this in your controler
respond_to do |format|
format.html { render :layout => false }
end
That prevented me to keep looping the requests.
I have a web layout of a for that looks something like this
<html>
<head>
</head>
<body>
<div id="posts">
<div id="post1" class="post" >
<!--stuff 1-->
</div>
<div id="post2" class="post" >
<!--stuff 1-->
</div>
<!-- 96 more posts -->
<div id="post99" class="post" >
<!--stuff 1-->
</div>
</div>
</body>
</html>
I would like to be able to load and render the page with a blank , and then have a function called when the page is loaded which goes in and load up the posts and updates the page dynamically.
In Rails, I tried using "link_to_remote" to update with all of the elements. I also tweaked the posts controller to render the collection of posts if it was an ajax request (request.xhr?). It worked fine and very fast. However the update of the blank div is triggered by clicking the link. I would like the same action to happen when the page is loaded so that I don't have to put in a link.
Is there a Rails Ajax helper or RJS function or something in Rails that I could use to trigger the loading of the "posts" after the page has loaded and rendered (without the posts)?
(If putsch comes to shove, I will just copy the generated JS code from the link_to_remote call and have it called from the onload handler on the body).
Sure there is, it's Rails, after all :)
Something like that will do:
<% javascript_tag do %>
$(document).ready(function() {
<%= remote_function(:update => "posts", :url => posts_partial_path) %>
});
<% end %>
remote_function will give you the same javascript that gets executed when you use rails ajax helpers.
Do this using jQuery unobtrusively like so:
$(document).ready(function(){
$.ajax({url: 'posts_partial_path',
success: function(data) {
$('#posts').html(data);
}
});
});
putting this code in a JavaScript file included by your page. You need to replace 'posts_partial_path' above with the actual URL string, Rails helpers are not available in the JavaScript code. Read about making AJAX calls with jQuery here: http://api.jquery.com/jQuery.ajax/ . Works like a champ.
Walter Gillett