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/
Related
I use $('#tab-content').load('/embed_tab.html'); to load below page, the output is in bullet point instead of tabs? This is the page I load when I click something on parent page. How can I solve the problem.
Script
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
is loaded from the head.
<div data-role="tabs" id="detail-tabs">
<div data-role="navbar">
<ul>
<li>Selling Point</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="sellpoint" class="ui-body-d ui-content">
<h1>Selling Point</h1>
</div>
<div id="terms">
<h1>Terms of Use</h1>
</div>
</div>
I assume you are also loading the jQM javascript as well as the css.
After the $('#tab-content').load('/embed_tab.html'); is finished, you have to initialize the tabs widget to cause it to be enhanced. So once the load is complete, try calling something like:
$('#tab-content').enhanceWithin();
or
$('#tab-content [data-role="tabs"]').tabs();
EDIT: to call these after the load is complete, use the complete callback function of the load method:
$('#tab-content').load('/embed_tab.html', function() {
$('#tab-content').enhanceWithin();
});
API DOC: http://api.jquery.com/load/
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'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!\
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
I have an ajax form in asp.net mvc which is as simple as this:
<% using (this.Ajax.BeginForm("LatestBlogPosts", "Blog", null, new AjaxOptions { UpdateTargetId = "blogPostPanel" }, new { id = "BlogPostForm" })) { %>
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<% } %>
I want to invoke the form submit when document is loaded. This should supposedly, call the controller's action and return a result that should be replaced with the placeholder DIV. If I add a SUBMIT button to the form, it works perfectly, but when I invoke the submit via jQuery, the whole page is refreshed, and the content returned by the server is displayed in the newly displayed page. Here's my jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#BlogPostForm").submit();
});
</script>
Anyway to do this?
I think it may work if you use the trigger method to generate the submit event, but I think there's a less complicated way to do this using jQuery.
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<script type="text/javascript">
$(function() {
$('#blogPostPanel').load( '<%= Url.Action( "LatestBlogPosts", "Blog" ) %>' );
});
</script>