I have a set of nav-pills vertically stacked along the left. Each time I click on a pill I would like the div "report-html-content" to be loaded with the contents of html produced by the controller action corresponding to: program_reports_path(#program).
Seems very simple (sure, sure.) Here's the view:
<div class="container">
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li>
Trend lines for all questions
</li>
<li>
<%= link_to "Summary of all questions", program_reports_path(#program),
:remote => true, id: "reports-navlist", data: {toggle: "tab"} %>
</li>
<li class="active">
Trend lines for all questions
</li>
<li>
Details on all questions
</li>
</ul>
</div>
<div class="span10" id="report-html-content">
</div>
</div>
</div>
Here's the controller action:
def report1
#program = Program.find(params[:program_id])
render :partial => "report1", layout: false
end
It ALMOST works. Except that asking a nav-pill set to do a remote: true to a different URL for some reason makes the activation and deactivation of the tabs not work anymore.
I have two questions:
1) Can you see my bug?
2) What's the best practice way for me to achieve this with Rails 3 and Twitter Bootstrap, noting that I definitely want the content of the clicked tab to be fetched with ajax because those reports can be costly to compute.
Thank you!
Overwrite show event like this:
<div class="container">
<div class="row">
<div class="span2">
<ul id="tabs" class="nav nav-pills nav-stacked">
<li>
Trend lines for all questions
</li>
<li>
Summary of all questions
</li>
<li class="active">
Trend lines for all questions
</li>
<li>
Details on all questions
</li>
</ul>
</div>
<div class="span10" id="report-html-content">
</div>
</div>
</div>
<script>
$(function() {
$('#tabs').bind('show', function(e) {
if ($(e.target).attr('id') == 'reports-navlist')
$.ajax({
url: '<%= program_reports_path(#program) -%>',
data: { toggle: "tab" }
})
});
});
</script>
You can read more about tabs events at http://twitter.github.com/bootstrap/javascript.html#tabs
Related
Assume that following HTML snippet exists somewhere in the <body> element of a web page:
<div id="root_1000" class="root bacon">
<ul>
<li id="item_1234567" class="active">
<div class="userpost author_4281">
<div>This text should be visible.<div>
</div>
<ul><li>Some item</li></ul>
</li>
</ul>
</div>
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
<div>
</div>
<ul><li>Another item</li></ul>
</li>
</ul>
</div>
<div id="root_3000" class="root bacon">
<ul>
<li id="item_7654321" class="active">
<div class="userpost author_9877">
<div>This text should be visible.<div>
</div>
<ul><li>Yet another item</li></ul>
</li>
</ul>
</div>
So here's my question: what would the XPath syntax be to select the div.root that contains info posted by author #3333 (i.e. div[class~="author_3333"])?
The following XPath statement will properly match the div.userpost element associated with author #3333 that I want to hide, but does not include the <ul><li>Another item</li></ul> node, which I also need to hide:
.//div[contains(#class, 'author_3333')]
What I want to do is select the closest div.root ancestor associated with the node that my XPath statement matches. Any help would be greatly appreciated... thanks in advance!
you need to get the parent node that has the second div as its child, something like:
//div[.//div[contains(#class, "author_3333")]]
You can use this XPath expression:
.//div[contains(#class, 'author_3333')]/ancestor::div[contains(#class,'root')][1]
Output is:
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
</div>
</div>
<ul>
<li>Another item</li>
</ul>
</li>
</ul>
</div>
So, I'm working with kendo in js. I'd like to use the tabstrip, but I'd like the tabs to be contained in a header that is styled and contains some other elements, so I am wondering if there is a way to separate the tab list and their associated divs. I'm looking to have something like this:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
However, it seems like all the example code I can find simply puts the associated divs immediately after the list, so the order of the divs corresponds to the list order. Is there any way to accomplish this sort of thing?
Edit: to clarify, I am looking for a way to display the tabcontent divs outside of the header. I don't really care about where the actual divs are in the html, but rather, where they will appear when they are generated on the page.
Ok, I figured it out. I don't think there is a way to directly attach the content divs to the tabs, but you can achieve the same functionality with the "show" or "select" events for the tabstrip. Here's what I ended up writing, boiled down.
Html:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff1</div>
<div id="tabcontent2">Stuff2</div>
</div>
</div>
Js:
$(document).ready(function () {
function onTabSelect(selection) {
var contents = $("#content").children();
var tabNum = selection.contentElement.id.charAt(selection.contentElement.id.length - 1);
for (i = 0; i < contents.length; i++) {
if (tabNum - 1 === i) {
$("#" + contents[i].id).show();
}
else {
$("#" + contents[i].id).hide();
}
}
}
$("#tabstrip").kendoTabStrip({
show: onTabSelect
}).data("kendoTabStrip").select(0);
$("#tabstrip-1").remove();
$("#tabstrip-2").remove();
First solution would be to leave empty divs like:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
And then set tab content whenever you want
$(document).ready(function() {
var tabstrip = $("#tabstriplist").kendoTabStrip().data("kendoTabStrip");
var item = tabstrip.contentElement(0);
//replace the first tab content
$(item).html($("#tabcontent1").html());
});
Or to create the entire tab strip dinamically using:
<div id="tabstrip"></div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff2</div>
</div>
And JS to initialize like:
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.append({
text: "Firts tab",
content: $("#tabcontent1").html()
});
tabstrip.append({
text: "Second tab",
content: $("#tabcontent2").html()
});
I am newbie in Telerik (Kendo). I want to know how can I hide or show tab based on roles or authentication as per user. I guess its been done by Helper, but I am not sure how to do it.
Please help me regarding this.
Thanks in advance.
Regards,
DS
Its a bit difficult to provide you with the best answer without seeing what you have so far, but if your initializing the TabStrip using JavaScript you will have a list if tabs in your html:
<div id="example">
<div id="tabstrip">
<ul>
<li id="TabParis" class="k-state-active">
Paris
</li>
<li id="TabNewYork">
New York
</li>
<li id="TabLondon">
London
</li>
</ul>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</div>
<div>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
</div>
Give each of the tab list items an id.
Then simply show or hide the list item by Id using JQuery
$('#TabNewYork').hide()
Here is a working example in JSFiddle: http://jsfiddle.net/loanburger/9mLz5wnc/
I am new in ajax.
I am trying to get value and want to fill in html code snippet.
I have html code and json object that has value.
Now I want to show the specific value in the different-different part of html code.
Here is my html code:-
<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation | Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> atul.gupta#bajajfinserve.co.in</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
Reward
Incentive
Movement
Leaves
LnD
</div>
On success of ajax I am getting the value now I want to fill it in my html code.
Please help me.
You can use a library (like knockout) to do that, or you can use jQuery to create the elements:
$("<div>").append("some text").appendTo("body"); //creates a div, append some text and...
If you already have a success event in your ajax, you could grab an empty DOM element and set its content.
document.getElementById('placeholder').innerHTML = jsonData.myProperty;
You should use innerHTML in javascript.
Set some ID on the element you need to update:
<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>
Then update it with your json value:
document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;
I need to have a menu/mega menu that will shift the content down when the dropdown opens like on Facebook for Business menu: https://www.facebook.com/business
I saw the same effect on Avast: http://www.avast.com
Thanks for the help, it's much appreciated!
For behavior you want you can use: slideDown() function of JQuery. Then you can bind mouseover and mouseout events over menu items and call slideDown and slideUp function.
Example in JSFiddle
HTML:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active menu-item" data-menuItem="#getstarted">
Getting started <b class="caret"></b>
</li>
<li class="menu-item" data-menuItem="#css">CSS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="getstarted">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
</ul>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="css">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
</ul>
</div>
</div>
JavaScript:
$(".menu-item").mouseenter(
function(e){
e.preventDefault();
e.stopPropagation();
var $active=$(".active-menu-panel");
$active.removeClass("active-menu-panel").hide();
var selector=$(this).attr("data-menuItem");
if($active.length){
$(selector).addClass("active-menu-panel").show();
} else {
$(selector).addClass("active-menu-panel").slideDown();
}
}
);
$(".menu-panel").mouseleave(function(){
$(this).removeClass("active-menu-panel").slideUp();
});