toggle issue between grids - javascript

I have two jqgrids. At a time only one should be visible. For this I tried toggling like this.At a time only one grid should be displayed. For board grid, it works fine. But for list grid, both the grids are displayed.
.jsp
<tr valign="top" id="message" style="display: block;" >
<td align="left">
<%# include file="grid1.jsp" %>
</td>
</tr>
<tr valign="middle" id="task" style="display: none;" >
<td align="left">
<%# include file="grid2.jsp" %>
</td>
</tr>
In java script, I have tried making the styles "" or none accordingly. Board function will be called when I press a button
the side buttons l be like
<img src="images/board.jpg" onclick="board()">
board(){
document.getElementById("message").style.display = "";
document.getElementById("task").style.display = "none";
}
The other grid will be called llike this
<img src="images/board.jpg" onclick="list()">
list(){
document.getElementById("message").style.display = "none";
document.getElementById("task").style.display = "";
}
But for me, initial loading of the page shows the board alone. But When I press toggle button, it shows both board and list. Any mistake with my code?

For toggling you can use like this.
Here is a jquery sample in jsfiddle
JsFiddle
$(thing).toggle();
Is used for toggle.

Related

How do I expand and collapse (i.e. toggling) a table row (tr)?

With my preexisting knowledge (for example this one) I have seen so far that a div container can easily be toggled (i.e. hide and show). However I am pretty confused when I have some data inside tr and I want to display and hide few items once that tr is clicked. Let's consider a food menu (I name it "Rice"), and there are few sub menus under that category (I name them "Fried rice", "Boiled rice"...). Once the "Rice" is clicked (or possibly if I have a arrow or plus icon to click on), the sub menus should get displayed. Similarly, they should hide themselves once the arrow is clicked again.
Please see in this website how they toggle the restaurant menu with arrow key. I want to do the exactly same thing.
The code I am working on:
<div class="media-right">
<table class="table">
<tr>
<td>
<h3 class="menu-title">Rice</h3>
</td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Fried Rice</h3></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Boiled Rice</h3></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
You can try a class "Accordion" which has the similar functionality.
You can find it here in detail.
<script>
$(function(){
$('.menu-rate').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
</script>
Something like this?
function Rice(){
if(document.getElementById("Rice").style.display == "none"){
document.getElementById("Rice").style.display = "block";
}else{
document.getElementById("Rice").style.display = "none";
}
}
function boiledRice(){
if(document.getElementById("boiledRice").style.display == "none"){
document.getElementById("boiledRice").style.display = "block";
}else{
document.getElementById("boiledRice").style.display = "none";
}
}
function friedRice(){
if(document.getElementById("friedRice").style.display == "none"){
document.getElementById("friedRice").style.display = "block";
}else{
document.getElementById("friedRice").style.display = "none";
}
}
<div class="media-right">
<table class="table">
<tr>
<td>
<a onclick="Rice()"><h3 class="menu-title">Rice</h3></a><div id="Rice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="friedRice()"><h3 class="menu-title">Fried Rice</h3></a><div id="friedRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="boiledRice()"><h3 class="menu-title">Boiled Rice</h3></a><div id="boiledRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
Is there a constraint that is forcing you to utilize a table? Since you're already using jQuery, you could easily achieve this type of functionality with jQuery UI's accordion widget.
$( "#accordion" ).accordion({
collapsible: true
});
Here's a basic example.
If you're open to use a library for this, you can try using bootstrap-table by wenzhichin. I find it very flexible.
Subtable - http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html
Collapsing row - http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html
checkout collapsible elements on material design made by google, really helpful an easy to use:
http://materializecss.com/collapsible.html

Using same Class to use the click method to show the nearest hidden element by its class

What I am trying to achieve: What I am trying to achieve is very simple I have a table with 2 table body tags. The first one gets shown as its just the main content. The last td element has an anchor tag, this anchor tag when clicked should show the next tbody tag using the jQuery method slideToggle().
Problem: The problem I am having is these are dynamically made tables using Angular.js. So if there are 5 items then there are 5 div elements each with a table that all have the same class for each tbody within the div. This makes sense as for each I would like the click function to show that specific tables second div if the user wants to see additional content related to that item.
Things tried:
$(this).next('.test').slideToggle();
$(this).closest('tbody').find('.test').slideToggle();
$(this).closest('.test').slideToggle();
$(this).closest('tr').find('.test').slideToggle();
Posts look into on StackOverflow for similar issue:
affect only the clicked element in jquery for multiple elements with same class
Using a class name in jQuery's .closest()
jQuery closest(); not working
Jquery adding click function to several spans with the same Class
Non Stack Overflow sites:
https://www.sitepoint.com/jquerys-closest-parents/
HTML:
<div class="productsList" ng-repeat="products in productListing.products">
<div class="productSection">
<div class="figureDiv">
<figure class="img">
<img ng-src="{{products.image}}" />
</figure>
</div>
<div class="description">
<h2 ng-bind="products.summary"></h2>
<summary ng-bind="products.description"></summary>
</div>
<table class="productTable">
<tbody>
<tr><td><b>Product Name</b></td><td ng-bind="product.merchantName"></td></tr>
<tr><td><b>Valid:</b></td><td>{{products.validityStart}} to {{products.valididtyEnd}}</td></tr>
<tr><td><b>Product Type:</b></td><td>Appliance</td></tr>
<tr><td><b>Testing:</b></td><td>Yes<a class="testLink" href="">Show More ></a></td></tr>
</tbody>
<tbody class="test">
<tr><td><b>Extra</b></td><td>Extra</td></tr>
<tr><td><b>Extra</b></td><td>Extra</td></tr>
<tr><td><b>Extra</b></td><td>Extra</td></tr>
<tr><td><b>Extra</b></td><td>Extra</td></tr>
</tbody>
</table>
</div>
</div>
jQuery (current implementation):
function init() {
jQuery(document).ready(function(){
$(document).on("click", ".productTable .testLink", function (ev) {
ev.stopImmediatePropagation();
$(this).closest('tr').find('.test').slideToggle();
$(".test").slideToggle();
});
}
Visually from Dynamic content (3 items):
Table class="productTable"
tbody
anchor tag class="testLink"
tbody class="test"
Table class="productTable"
tbody
anchor tag class="testLink"
tbody class="test"
Table class="productTable"
tbody
anchor tag class="testLink"
tbody class="test"
Ending
As you can see visually there are 3 tables created each having same classes. So for the first table if the user clicks the anchor tag then the body tag right after in that specific table will be displayed with toggle. Only that one should be shown not all of them which is the current problem.
I tried many solutions however nothing is working, every implementation is making all of them toggle which is horrible.
I think something like this.
$(".productTable .testLink").on("click", function() {
$(this).parents('.productTable').children('.test').slideToggle();
});
.testLink {
color: blue;
text-decoration: underline;
}
.test {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="productTable">
<tbody>
<tr>
<td><b>Product Name</b>
</td>
<td ng-bind="product.merchantName"></td>
</tr>
<tr>
<td><b>Valid:</b>
</td>
<td>{{products.validityStart}} to {{products.valididtyEnd}}</td>
</tr>
<tr>
<td><b>Product Type:</b>
</td>
<td>Appliance</td>
</tr>
<tr>
<td><b>Testing:</b>
</td>
<td>Yes<span class="testLink">Show More ></span>
</td>
</tr>
</tbody>
<tbody class="test">
<tr>
<td><b>Extra</b>
</td>
<td>Extra</td>
</tr>
<tr>
<td><b>Extra</b>
</td>
<td>Extra</td>
</tr>
<tr>
<td><b>Extra</b>
</td>
<td>Extra</td>
</tr>
<tr>
<td><b>Extra</b>
</td>
<td>Extra</td>
</tr>
</tbody>
</table>
I think the problem is in this line of your jQuery $(".test").slideToggle(); as it will execute slideToggle on all .test try removing it. Also update.closest('tr'); to .closest('table'); as the .test is in the table tag not the tr
From what I make out, you are looking for JQuery's .next() method. Just for the parent tbody and call .next()
Example would be
$('.testLink').parentsUntil('tbody').next().show();

jQuery accordion menu, CSS HTML

what im trying to achieve is the following.
I have an accordion menu. Now I want to Build an accordion Menu(I call this now Top) inside an accordion Menu(I call this now Bottom).
Im doing this, to present loads of data from a database in a clean way.
Now im trying to adapt the accordion menu that I already got on this.
The data of both, top and bottom, are presented in tables. So first i builded tables inside tables.
If the users clicks on the first Element of each row, the “bottom” menu with the table should slide down.
HTML
<!-- 2016 -->
<div id="sh_details">
<div class="sh_wasserzeichen"></div>
<article>
<dl id="sh_accordion">
<dt id="sh_2016">Headline1</dt>
<dd><table>
<tr>
<th>Überschrift1</th>
<th>Überschrift2</th>
</tr>
<tr>
<td class="inhalt">Inhalt1</td>
<td>Inhalt2</td>
</tr>
<!-- Untertabelle1_1 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift1</th>
<th>Sub_Überschrift2</th>
</tr>
<tr>
<td>Sub_Inhalt1</td>
<td>Sub_Inhalt2</td>
</tr>
</table>
</td>
<tr>
<td class="inhalt">Inhalt3</td>
<td>Inhalt4</td>
</tr>
<!-- Untertabelle1_2 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift3</th>
<th>Sub_Überschrift4</th>
</tr>
<tr>
<td>Sub_Inhalt3</td>
<td>Sub_Inhalt4</td>
</tr>
</table>
</td>
</table></dd>
<dt id="sh_january">Headline2</dt>
<dd>125153226262</dd>
</dl>
</article>
</div>
CSS
/***************************************
************ Details *****************/
#sh_details {background-color:#fff;position: relative; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:none;flex-direction: column;}
.table2 {display:none;}
/***************************************
************ Accordion *****************/
.sh_active {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
article {position:absolute;color: black;width: 90%; height: auto;margin: 0 auto 0 auto;padding-top:75px;padding-left:75px;}
dt, dd {padding:0.5%;width: 50%; height:auto;float: left; margin:0;border-top:1px solid #222;}
dt {font-weight:bold;text-transform: uppercase; background-color:black; color:#ff6600; cursor:pointer;}
dt:first-child {border:none;}
dt:hover {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
dd {background-color:#444; line-height:25px; word-spacing:3px;color:#999; display:none;}
**jQuery (only the accordion stuff) **
/*SUBTABLE*/ <<<---- not working
$(document).on('click', 'td', function (event) {
if($(this).hasClass('inhalt')) {
$(this).next('.table2').removeClass('table2');}
event.stopPropagation();
});
$('#sh_accordion dt').stop().click(function(){
<--- Working
if($(this).hasClass('sh_active')) {
$(this).removeClass('sh_active');
$(this).next().slideUp(300);
} else {
$(this).parent().children().removeClass('sh_active');
$(this).addClass('sh_active');
if($(this).next().is('dd')) {
$(this).parent().children('dd').slideUp(300);
$(this).next().slideDown(300);
}
}
});
https://jsfiddle.net/u4y2o270/1/ (dont know why the code is not working, i disabled the display:none's beacause of this)
So every "Sub..." Menu should be hidden by default. If i click on "Inhalt1", the first "bottom" menu should appear and so on.
Hide and Show the top Menu works fine (Headline1, Headline2), but not the bottom menu (table inside table)
Example: Default is this:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
User clicks "Inhalt1":
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1 Sub_Inhalt2
Inhalt3 Inhalt4
//EDIT:
Start:
Everything is hidden, besides the Headlines (Headline1, Headline2) (this is already working, but not in the fiddle)+
It looks like this:
Headline1
Headline2
User is clicking on Headline1,
The user can only see the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
Headline2
The user is now clicking on "Inhalt1"
The user now sees this the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1_1 Inhalt2_2
Inhalt3 Inhalt4
Headline2
//EDIT2:
Updated the fiddle http://jsfiddle.net/u4y2o270/7/
This is what is working so far.
If the user is now under Headline1 clicking Inhalt1 the table under it should slideDown // should be showed, the table has the class .table2 which is by default on display:none to be hidden. My idea was, to find the next Item with class table2 and remove the class or slide it down. But its not working.
Same obv. for Inhalt3

Using mouseover and mouseout in a element makes a hover blinking continuously

I am rendering two elements on a JSP page dynamically, with dynamic IDs. On mouse over of each element I am rendering a div, and on mouse out I am making the same display value none. The issue is when I hover on the div, the div is keeping on blinking. How can I solve this?
Example code:
<table>
<tr>
<td>
<div onmouseover="showblock(hoverdivid)" onmouseout="hideblock(hoverdivid)">india</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
<td>
<div onmouseover="" onmouseout="">america</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
</tr>
</table>
<script>
var showblock;
var hideblock;
$(document).ready(function (e) {
showblock = function (id) {
$("#" + id).show();
}
hideblock = function (id) {
$("#" + id).hide();
}
});
</script>
Extending my question
i mentioned that am inserting checkboxes in the hover using ajax, in the same hover i have an add button which adds the values that i checked in the hover to some other div outside the table. i have two countries so two hovers with their cites so when i checked and click on add the values of two hovers to be displayed which are checked should display individually suggest me the approach to follow to solve the above requirement
This is happening because when the hoverdiv is shown your mouse is on it thus the mouseleave event is triggered so the hoverdiv disappears and then your mouse is on the first div again so the mouseenter event is triggered so hoverdiv appears again.... and so on.. this causes the flickering
My best suggestion will be to nest the hoverdiv: (You'll have to tweak the css a bit)
<table>
<tr>
<td>
<div onmouseover="" onmouseout="">
india
<div class="hoverdiv"></div>
</div>
</td>
<td>
<div onmouseover="" onmouseout="">
america
<div class="hoverdiv"></div>
</div>
</td>
</tr>
</table>
When the hoverdiv is inside the other div, mouseleave will not be triggered when you hover the hoverdiv
Working Demo http://jsfiddle.net/cse_tushar/FKacT/1
HTML
<table border="1">
<tr>
<td>
<div class="div">india</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
<td>
<div class="div">america</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
</tr>
</table>
css
td{
vertical-align: top;
}
js
$(document).ready(function () {
$('.div').hover(function () {
x = $(this).css('width');
$(this).parent().find('.hoverdiv').show();
$(this).css('width', $(this).parent('td').width());
}, function () {
$(this).css('width', x);
$(this).parent().find('.hoverdiv').hide();
});
});

Displaying table as pop up/ on the top of HTML

I have a link in my datalist
details
<table style="display: none; background-color:AntiqueWhite; border-color:Black;
direction:rtl;" class="MyTable">
<tr>
<td>
<asp:Label ID="lblShowHide" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem,"Description")%>'></asp:Label>
</td>
</tr>
</table>
On click of the link I am displaying the assciated table related to the link by the below function:
<script type="text/javascript" language="javascript">
function showHideDesc(link)
{
var table = link.parentNode.getElementsByTagName("TABLE")[0];
if (table.style.display == "none")
{
table.style.display = "";
link.innerHTML = "details";
}
else
{
table.style.display = "none";
link.innerHTML = "details";
}
}
</script>
Till now it is working fine, but the issue arises that the description which I am showing is of 10-15 lines and the table is hiding because of the other records in the datalist. I need to show this on the top of every HTML.. some Pop up kind of stuff.
Please help
To display your table above other HTML content, you should use the z-index CSS attribute. This enables some kind of layering of your content.
Take a look at http://w3schools.com/css/css_positioning.asp for some more info

Categories

Resources