I have a show page which is dynamically loading content based on tab-selection using JQuery-ui tabs.
Here is my page:
<%= stylesheet_link_tag 'upload.css', :media => 'screen' %>
<%= javascript_include_tag "tabs"%>
<div id="tabs">
<ul>
<li id="active"><%= link_to "Description" , :id => #upload.id, :action => "description"%></li>
<li><%= link_to "Images" , :id => #upload.id, :action => "images"%></li>
</ul>
<div id="#content_area">
</div>
</div>
and here is my JQuery:
//= require jquery
//= require jquery-ui
$(document).ready(function(){
var $tabs = $("#tabs").tabs({ select: function(event, ui) {
$(ui.panel).empty();
}
});
});
Now what's supposed to happen is I click a tab, it loads the corresponding contents dynamically and clears out the old contents. As it stands it does manage to load contents dynamically when I click a tab but it doesn't quite clear out the old stuff. What it does is it loads the contents when I click the tab and it leaves it there. But then if I was to click the same tab it will refresh the content. This isn't what I want, I only want to see Image content when the image tab is clicked and description content when the description tab is clicked.
How can I modify my JQuery to achieve this?
It works now by changing the JQuery to clear both of the classes that JQuery-tab creates dynamically. I only noticed them after looking at the generated HTML via firebug (Note: I also added some "Loading..." text for when the tab is loading):
//= require jquery
//= require jquery-ui
$(document).ready(function(){
var $tabs = $("#tabs").tabs({ select: function(event, ui) {
$("#ui-tabs-1").empty();
$("#ui-tabs-2").empty();
if($.data(ui.tab, 'load.tabs')) {
$(ui.panel).html("Loading...");
}
}
});
});
Related
This is a follow up question to my post
javascript stops working after link_to in rails 4
I found this solution Making jQuery works with Turbolinks and the one that was suggested on my previous question
I added the following code to my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
$(document).on('page:load', function() {
$( ".draggable" ).draggable();
});
now draggable is not working at all on my page
<div class="draggable">
<p><strong>Title:</strong>
<%= task.title %></p>
<p> <%= link_to 'Show', task, :class => 'text' %>
</div>
Draggable should still work if you click a link and update the page by Turbolinks, but it won't work in initial loading because you havn't set it.
To make it work, you need to set it on both document ready and page:load.
$(document).on('page:load', function(){
$(".draggable").draggable();
});
$(document).ready(function(){
$(".draggable").draggable();
});
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 set of jQuery UI tabs, which load their content via the ajax method:
<div id="tabs">
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
<div id="Inbox"> ... </div>
<div id="Sent"> ... </div>
<div id="Ins"> ... </div>
</div>
JS:
$(document).ready(function () {
$("#tabs").tabs();
}
The tab titles are displayed, and the content of the first tab is loaded OK.
Using the AJAX Tabs method is detailed here
When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.
Any ideas what I am missing?
replace your ul list by this :
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.
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!\