bootstrap carousel on two div's - javascript

As you can see below I have two div's one is by the id By Senate and the other is 2nd div. I have a button on first div called view details. My requirement is when i click the view details button I want it to do a carousel and go to the 2nd div. I want to use bootstrap carousel.
I have tried some ways but it did not work out. Can somebody please help me.
<div id="BySenate" style="display: none">
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Party</th><th>Name</th><th>Chamber</th><th>District</th><th>State</th></tr>
</thead>
<tbody>
<tr dir-paginate="senate in senate|orderBy:['fullname']|filter:search|itemsPerPage:10" pagination-id="bySenate">
<td> <img src="{{senate.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{senate.fullname}}</td>
<td > <img src="{{senate.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{senate.chamber_name}} </td>
<td>{{senate.district_name}}</td>
<td>{{senate.state_name}}</td>
<td> <button type="button" class="btn btn-primary" id="{{senate.bioguide}}" value="{{senate.bioguide}}" ng-click="getLegislatorDetails($event);">View Details</button></td>
</tr>
</tbody>
</table>
</div>
<div id="2nd div">
</div>

Related

Div gets cloned multiple times instead of the required amount

I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->
It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.

JS JQuery Bootstrap datatables resize

Hi I have a datatable that displays 10 columns but the problem is it dont fit the screen properly. I still need to scroll horizontally and vertically to see the other columns/rows. What I want to do is to make the table smaller. How can I achieve that? Refer to the screenshots here and here . I have tried setting table width = "100%" but unfortunately nothing happens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Member
</button>
<br /> <br /> <br />
<table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Contact Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Per the HTML spec, a <table> and its children are auto-sized. Put simply, other rules are thrown out the window to make the table itself look good, by default.
Bootstrap does have an answer for this, with responsive tables. Just add the table-responsive class to your table element and it'll handle any scrollbars within the table rather than allowing your entire page to scroll.
<table class="table table-responsive">
...
</table>

How to pass data-key value of clicked Table row when click on Button

I have a table with some rows and each tow has an data-key value. Now I select one of those rows and want to click on a button in order to forward this data-key value as an GET value. I don't really know how to capture this selected data-key. Kindly asking for help.
Here is a fiddle: fiddle
Below is my snippet so far.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row" data-key="12">
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr class="clickable-row" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
You could try to implement this code.
I will add modified version of your code, but I will mark out where I modified it.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
Now I will show you the implementation of the function test.
function test(element){
console.log(element.innerHTML);
}
Now, you could do anything with this element callback. For example, you could store it in a variable and send that to a PHP page using AJAX, when you press a button.
Edit 1
First, I want to point out that you cannot use <button> as a link.
First, there are a few modifications to the HTML.
<button id="submitButton" class="btn btn-sm btn-secondary" onclick="addEvent();" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
Here we added an id, "submitButton" and an onclickEvent which will call the function addEvent.
This is the function addEvent:
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.cells[0].innerHTML;
}
This link variable can easily be implemented using an AJAX call with jQuery or just plain javascript.
Sidenote
The function test has also been edited.
function test(element){
currentRow = element;
}
I recommend editing the name on the function test so that the code will look more organised.
Edit 2
If I have understood what you want out of this, this will be the new fix.
So you will have to edit the HTML again.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);" data-key="12"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
You will need to make a slight change to the javascript as well.
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.getAttribute("data-key");
}
You still use this address for anything you like, for example an AJAX request.

Angular directive for changing image source in a table

I have a table, in the row, the element is an image
Upon hover it changes colour.
1) I am new to Angular, and I am not sure how to write a directive to dynamically change the image to a custom one depending on which table row has been hovered on. So for example if there are 5 table row, the hover colour will be different depending on which one has been hovered over.
Here is my table code:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2">
<span></span>
</th>
<th class="col-xs-8" ng-click="sort('firstName')">
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-xs-2">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>
<!--img class="round" src="/images/profile-placeholder.jpg" width="50" height="50">
</img> -->
<img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
</td>
<!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></img></td> -->
<td>
<div style="padding-top:1em"><span>{{user.firstName}}</span>
<br>{{user.lastName}}
<br>{{user.profession}}</div>
</td>
<td>
<div style="padding-top:1em">
<img src="images/arrow-right-pink.png" width="50" height="50"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my directive:
app.directive('hoverBgImage',function(){
return {
link: function(scope, elm, attrs){
elm.bind('mouseenter',function(){
]
});
elm.bind('mouseleave',function(){
})
}
};
});
In my directive I am not sure how to only select and apply changes to the image element for the row I have hovered over.
I can do this
$('img').image = 'new path'
in the mouse enter function but that will affect all images.
How can I do this, thanks.

get classname of a last <tr> element in a div

I have a table like below. As you can see first <tr> element's class is "success" and second "active" and third is "success"...etc..
Now I want to do this dynamically. But I can't get last <tr> element's classname for add some condition.
How can I do this in JavaScript?
<div id="masterContainer" class="bs-example">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr class="success">
<td><b>First Name</b> <br> som</td>
</tr>
</thead>
<tbody>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="success">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
</tbody>
</table>
</div>
</div>
You can use :last selector:
$('.table tr:last').attr('class');
The querySelectorAll method lets you pass CSS selectors to find nodes you're interested in
var nodes = document.querySelectorAll('div tr'); // all <tr> descendants of <div>s
nodes[nodes.length - 1].className; // "active" // the last of these

Categories