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.
Related
I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>
Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.
<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table
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.
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>
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