I am loading all content on a page at once. Upon a selection of the tree I want to show only 1 grid. What my code is doing is not totally getting rid of the hidden grid nor moving the selected grid to the top (probably because the hidden grid is not totally gone I assume)
The code below seems to hide everything then keep "gridWrapper2" visible but the table in it is hidden.
How do I modify the following line of code to hide all the contents but whats in the specified id. In other words dont hide any tag thats nested in "gridWrapper2"
$('#contents div').not("#gridWrapper2").hide();
Here is where I am using the code
$(function() {
$("span.dynatree-edit-icon").live("click", function(e) {
alert("Edit " + $.ui.dynatree.getNode(e.target));
});
$("#tree").dynatree({
onActivate: function(node) {
$('#contents div').not("#gridWrapper2").hide();
$("#info").text("You activated " + node);
},
children: [{
title: "Item 1"
}, {
title: "Folder 2",
isFolder: true,
children: [{
title: "grid2"
}, {
title: "grid"
}]
}, {
title: "Item 3"
}]
});
<body>
<div class="container-fluid text-left">
<div class="row content">
<div class="col-sm-2 sidenav" id="tree">
</div>
<div class="col-sm-8" id="contents">
<div id="gridWrapper"> <table id="grid"></table> </div>
<div id="gridWrapper2"> <table id="grid2"></table> </div>
</div>
<div id="info"> </div>
</div>
</div>
</div>
</body>
</html>
Make sure contents inside table are in proper/valid html. See below example for more info. display:none will be applied to table tag & only valid html inside it could be hidden everything else would come out of it if not valid.
$(function() {
$("#tree").click(function() {
$('#contents table').not("#grid2").not("#grid4").hide();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid text-left">
<div class="row content">
</div>
<div class="col-sm-8" id="contents">
<table id="grid">
<tr>
<td>grid</td>
</tr>
</table>
<table id="grid2">
<tr>
<td>grid2</td>
</tr>
</table>
<table id="grid3">grid3</table>
<table id="grid4">grid4</table>
</div>
<div id="info"></div>
</div>
</div>
<button id="tree">Tree</button>
This is the solution
$("#contents > *").css('display','none');
$("#gridWrapper2").show();
Related
I have an ng-repeat div to dynamically display a set of div tags based on a dynamic list of items, that each have a unique Id , a type and a "title" value which are both strings and I have a click function assigned to each of them. When I want to click on one of these divs , I want to display an separate div associated to that clicked div and I want to do that using an ng-show which at the moment has a condition where the id of this item/div should be equal/equivalent to a
scope variable I've defined in a controller associated with the html for this new div to be displayed.
The problem I'm getting is that every one of these separate divs is showing and assuming that all the ng-shows are true which shouldn't be the case and I'm not sure why this is happening as all the id's for the items are unique. I've printed out to the console and can't see anything wrong with the assigning of the variable but not sure if I've missed something with regards to the ng-show condition.
Here is what I have so far in html with 2 div examples (don't worry about replicating all the styling, i just want to figure out what is going on with the html/angular stuff):
<div class="col-md-12 col-sm-12 col-xs-12 " ng-repeat="item in items track by item.id" ng-click="onClick(item.id)">
//first type div that is clickable
<div class="row">
<div>
<header class="text">
<h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
</header>
</div>
</div>
//div to be displayed after associated first div type is clicked
<div class=" col-sm-11 row" ng-show="displayMessage===item.id" >
<header class="col-sm-12 text">
<h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
</header>
<p class="col-sm-12" > text about {{item.id]} </p>
</div>
//2nd type of div
<div class="row" style=" background: linear-gradient(135deg, #156570, #1e9d8b);">
<h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
<i class="ms-icon ms-icon-heart-rate"></i>
<div class="clearfix"></div>
</div>
//div to be displayed after associated second div is clicked
<div class="col-md-11 col-sm-11 col-xs-11" ng-show="displayMessage===item.id">
<div style="background: linear-gradient(135deg, #156570, #1e9d8b);"></div>
<h1 class="col-sm-12 col-xs-12" data-ng-if="item.title" ng-bind-html="item.title" style="color:#000"></h1>
<p class="col-sm-12 col-xs-12 "> text associated with {{item.id}}
</p>
</div>
</div>
And here is the simple click function I have . $scope.displayMessage is defined earlier on during the controller setup where its set to an empty string:
$scope.onClick = function (itemId) {
$scope.displayMessage = itemId;
}
Let me know if I need to add more code.
It could be done in a simpler way without adding property to the items varible you have in scope.
Let the Controller be
app.controller('MainCtrl', function($scope) {
$scope.div_=[];
$scope.items = [
{
id: 1,
title: "first item"
},
{
id: 2,
title: "second item",
},
{
id: 3,
title: "third item",
}
];
$scope.onClick=function(index,row){
$scope.div_[index+'_'+row]=true;
}
});
HTML will be like
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<div style="color:red" ng-click="onClick($index,0)">DIV {{$index}}.0---click to show DIV {{$index}}.0_CHILD</div>
<div style="color:blue" ng-show="div_[$index+'_0']">DIV {{$index}}.0_CLILD</div>
<br>
<div style="color:red" ng-click="onClick($index,1)">DIV {{$index}}.1---click to show DIV {{$index}}.1_CHILD</div>
<div style="color:blue" ng-show="div_[$index+'_1']">DIV {{$index}}.1_CLILD</div>
<hr>
</div>
</body>
Here an array named 'div_' is maintained to trace all ng-show value of all div.
Working plunker https://plnkr.co/edit/uhFdCXkmS4gB95c9bjTR?p=preview
This will be easier for you to accomplish if you had properties on each item to key off of.
For example,
$scope.items = [
{
id: 1,
title: "first item",
isFirstDivSelected: false,
isSecondDivSelected: false
},
{
id: 2,
title: "second item",
isFirstDivSelected: false,
isSecondDivSelected: false
}
{
id: 3,
title: "third item",
isFirstDivSelected: false,
isSecondDivSelected: false
}
];
This will allow you to add an ng-click to your children items.
<div class="col-md-12 col-sm-12 col-xs-12 " ng-repeat="item in items track by item.id" ng-click="onClick(item.id)">
//first type div that is clickable
<div class="row" ng-click="item.isFirstDivSelected = true;">
<div>
<header class="text">
<h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
</header>
</div>
</div>
//div to be displayed after associated first div is clicked
<div class=" col-sm-11 row" ng-show="item.isFirstDivSelected" >
<header class="col-sm-12 text">
<h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
</header>
<p class="col-sm-12" > text about {{item.id]} </p>
</div>
//more divs.........
Right now, there is no good way to for your application to know that any of your children divs have been clicked. There are other ways you can do this, but in my opinion, adding properties that are well defined and straightforward is the best way.
if you want to show hide rows under loop
<div *ngFor="let client_obj of dashboard_data.data.items ;let i = index" >
<input type="checkbox" [(ngModel)]="div_['level_1_'+i]">
<div [class.hide]="div_['level_1_'+i]" >
{{client_obj.value}}
</div>
</div>
I want to call click function using JQUERY on the div containing text "Save as JPEG" . The div with ID= "graph1" is static and all other nested divs are dynamic. The dynamic div containing text has no class or ID.
<div id="graph1" class="col-sm-12" style="height: 250px">
<div class="contianer">
<div class="convascharttoolbar">
<div>
<div>save jpeg</div>
<div>save png</div>
</div>
</div>
</div>
</div>
Use :contains(TEXT) selector => Select all elements that contain the specified text.
$("div:contains('save jpeg')").on("click",function(){
console.log(this.textContent);
});
Working Demo
$(document).ready(function() {
$("#graph1").on('click','div', function() {
if($(this).text() == "save as jpeg"){
alert('Div clicked')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph1" class="col-sm-12" style="height: 250px">
<div class="contianer">
<div class="convascharttoolbar">
<div>
<div>save as jpeg</div>
<div>save png</div>
</div>
</div>
</div>
</div>
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I have multiple divs with same id , i need to get the content of child's div when the parent div is clicked, the divs are dynamically created. The following code explains that :
i have php file that generate the multiple divs with the same id as follows :
<div id="display" style="display: block;">
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahrish Rizwan</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahar Imtiaz</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
</div>
now i need to get the content of each display_box through jquery , can any one help me out this ?
Try this (see fiddle console)
$(document).on('click','#display',function(){
$(this).find('.display_box').each(function(){
console.log($(this).html()) // returns overall content
});
});
DEMO
OR
$(document).on('click','.display_box',function(){
console.log($(this).html()) // returns clicked content
});
DEMO
$(document).on('click','.display_box',function(){
alert($(this).html())
});
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.