I am using Jquery Data table to show my data, which cames from an ajax call and a json file.
I'm using two tables, the first one (#list1) shows data from sql, the second one (#list2) is filled when I click on one of the rows in the first table (a click event). I was strougeling with the reload data, I used clear() and draw() to reload the table, but after using this, the second table (#list2) stop displaying the info, only if you go and click on it will appear the data. I guess ist the way I'm reloading the tables but no other method has work for me.
Here is my jquery code:
$(document).ready(
function()
{
$('#list1').DataTable(
{
dom: 'lfrtipB', //elementos del DOM y orden
buttons: ['csv', 'excel', 'pdf', 'print']
});
$('#list2').DataTable(
{
responsive: true,
searching: false,
});
$("#list1 tr").click(
function ()
{
var cod = ($(this).find("td:first").text());
$.ajax({
url: 'https://www.urlblabla.php',
data: {
action: 'usuario',
idfiltro: cod
},
type :'post',
success: function(sql)
{
var t= $('#list2').DataTable().clear().draw();
$.each(JSON.parse(sql), function(idx, opt)
{
t.row.add([ opt.1, opt.2,opt.3,opt.4]).draw(); //this was my mistake I add the draw() method
});
}//endsuccess
}); //endajax
}//end function
);//end click
}
);//fin document ready
I tried to use the reload() function but the browser gives me a function not found error
And here is my html code (quite simple)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<link href="libreriasWS/dataTables.bootstrap5.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/jquery.dataTables.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/datatable_style.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/buttons.dataTables.min.css"rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="libreriasWS/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div id="content" class="container">
<div class="datatable-inner table-responsive ps ps--active-x">
<h4>Users</h4>
<table id="list1" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>name</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<?php
$cli = $soapClient->getData("","array_data","");
$result_array = json_decode($cli);
for ($i=0; $i < count($result_array); $i++)
{
print '<tr>';
print '<td>'.$data_array[$i]->{'Id'} .'</td>';
print '<td>'.$data_array[$i]->{'name'} .'</td>';
print '<td>'.$data_array[$i]->{'line'} .'</td>';
print '</tr>';
}//finfor
?>
</tbody>
</table>
</div>
<div class="datatable-inner table-responsive ps ps--active-x">
<h6>Users</h6>
<table id="list2" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>Descripcion</th>
<th>MAC</th>
<th>Cliente</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br/>
</div> <!--Fin Tab Content-->
</div> <!--Fin Tab Content contaniner-->
</center>
</body>
If you're trying to clear and repopulate the second DataTable when you click on a different row in the first table, you'll need 'destroy: true' in your initialisation. You can add an Ajax call in the DataTable initialisation as well.
It might be better to have the second table initialised in a separate function, then pass the variable from table 1 as a parameter e.g.
$(document).ready(function () {
$("#list1 tr").click( function () {
var cod = ($(this).find("td:first").text());
SecondTableInitialise(cod);
});
});
function SecondTableInitialise(cod) {
$("#table2").DataTable({
"ajax": {
"url": "methodURL" + cod,
"dataSrc": "tableSource"
},
"columns": [
{ "data": "Column1Data" },
{ "data": "Column2Data" },
{ "data": "Column3Data" }
],
"destroy": true
});
}
Related
I am using fullcalendar plugin and when i click a button it's passing event values to the calendar and calendar is displayed correctly. But when ever I click the button always a new calendar is displayed. I want to display only one calendar and it should display the passed event values accrodingly. please find the below code. Please note that I am not using any jquery libraries
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.calendarEl = "";
$scope.calendar = "";
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
$scope.calendarEl = document.getElementById('calendar');
$scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ]
});
$scope.calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
This can be achieved by using $scope.calendar.addEventSource('name_of_the_array_ofEvent_values')
I'm trying to create a single page app (using ng-sho and ng-hide) displaying buildings. Currently, my code looks like this
index.html
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<title>Happy Building Company</title>
</head>
<body ng-controller="MainCtrl">
<!--BUILDING DIRECTORY-->
<div id="directory" class="mainDiv" ng-show="buildingDirVisible">
<form>
<fieldset>
<legend>Building Directory</legend>
<div id="directoryTable" style="overflow-x:auto;">
<table class="table table-responsive" id="dirtable">
<tr>
<th>Building ID</th>
<th>Owner</th>
<th>Address</th>
<th>View</th>
</tr>
<tr class="rowHover" ng-repeat="item in buildings" >
<td> {{item.ID}}</td>
<td> {{item.Owner}}</td>
<td> {{item.Address}}</td>
<td> <button type="button" value="View Building" ng-click="viewBuilding()">View Building</button></td>
</tr>
</table>
</div>
app.js
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'Happy Building Company';
$scope.buildings = null;
$scope.target1 = '/building_dir.json';
$scope.building = $http.get($scope.target1)
.then(
function successCall(response) {
$scope.buildings = response.data.buildings;
},
function errorCall(response) {
$scope.feedback = "Error reading building directory";
$scope.buildings = null;
}
);
//View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
$scope.viewbuilding = function(){
$scope.buildingDirVisible = false;
$scope.buildingFormVisible = true; // Building form visible
};
building_dir.json
{"buildings":[{"ID":"123",
"Owner":"Joe Doe",
"Address":"20 Lambton Quay",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
},
{"ID":"222",
"Owner":"John Smith",
"Address":"20 Dixon Street",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
}]}
I am trying to have it so that when you select View Building in the table in the building directory that the buildingDirVisible div is hidden and another div is opened displaying information only related to that building ID (ie. Building ID 222's Building Type and Construction date). Currently, my app switches between the divs using show and hide but does not display data specific details. My understanding is that I will have to develop a for loop to iterate through the JSON file and then display buildings that match the building ID. I am relatively new to angular js so any help would be hugely appreciated! Thanks!!
Some observations as per your code review :
$scope.viewbuilding = function() { ... } should be $scope.viewBuilding = function() { ... } as in view we are triggering viewBuilding not viewbuilding.
Div having buildingFormVisible is not available in the view where you want to display the data specific to building ID that you selected from the table.
Your approach is correct !!
You can loop to iterate through the buildings JSON and then display buildings that match the building ID.
For this approach, you can use Array.filter() method with ES6 Arrow operator.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.buildingDirVisible = true;
$scope.buildingFormVisible = false;
$scope.buildings = [{"ID":"123",
"Owner":"Joe Doe",
"Address":"20 Lambton Quay",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
},
{"ID":"222",
"Owner":"John Smith",
"Address":"20 Dixon Street",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
}];
//View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
$scope.viewBuilding = function(itemID) {
$scope.buildingDirVisible = false;
$scope.buildingFormVisible = true; // Building form visible
var record = $scope.buildings.filter(item => { return item.ID == itemID });
$scope.buildingDetail = record[0];
};
});
table,tr,th,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-responsive" id="dirtable" ng-show="buildingDirVisible">
<tr>
<th>Building ID</th>
<th>Owner</th>
<th>Address</th>
<th>View</th>
</tr>
<tr class="rowHover" ng-repeat="item in buildings" >
<td> {{item.ID}}</td>
<td> {{item.Owner}}</td>
<td> {{item.Address}}</td>
<td> <button type="button" value="View Building" ng-click="viewBuilding(item.ID)">View Building</button></td>
</tr>
</table>
<div ng-show="buildingFormVisible">
<p>Building ID : {{buildingDetail.ID}}</p>
<p>Building ID : {{buildingDetail.Owner}}</p>
<p>Building ID : {{buildingDetail.Address}}</p>
<p>Building ID : {{buildingDetail.ConstructionDate}}</p>
</div>
</div>
i want to use the bootstrap-table library from wenzhixin (http://bootstrap-table.wenzhixin.net.cn/) but my skills seem not be as good enough that i can get the script running.
I want the table to be supplied with data via ajax.
Here's the code which works (example from the source page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SL Time</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Table -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Table -->
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-de-DE.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
<script>
// your custom ajax request here
function ajaxRequest(params) {
// data you need
console.log(params.data);
// just use setTimeout
setTimeout(function () {
params.success({
total: 100,
rows: [{
"nummer": 0,
"name": "Item 0",
}]
});
}, 1000);
}
But i want the data coming from my page "ajax_loader.php" which looks like this:
<?php
$data=array();
array_push($data, array('nummer' => '1', 'name' => 'daniel'));
array_push($data, array('nummer' => '2', 'name' => 'thomas'));
echo json_encode($data);
?>
But how do i get the following piece of code get to fill the table (as the sample function does):
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
success: function(data) {
// At this position my knowledge ends ;-(
}
});
Can anyone help me, get the thing working?
Best regards
Daniel
The documentation is your friend ^^ (moreover with an example : http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/custom-ajax.html).
Seriously, here is the solution :
The HTML :
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
The script :
// your custom ajax request here
function ajaxRequest(params) {
// data you may need
console.log(params.data);
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
// You are expected to receive the generated JSON (json_encode($data))
dataType: "json",
success: function (data) {
params.success({
// By default, Bootstrap table wants a "rows" property with the data
"rows": data,
// You must provide the total item ; here let's say it is for array length
"total": data.length
})
},
error: function (er) {
params.error(er);
}
});
}
params.success is function! You need more params, like this
function ajaxRequest(params) {
$.ajax({
type: "POST",
url: "/gruzin/getdb",
success: function (data) {
console.log(data);
params.success({
"rows": data,
"total": data.length
},null,{});
},
error: function (er) {
params.error(er);
}
});
}
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I'm starting a small web project using ember and a json api.
It contains currently a single page with following content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<div class="container">
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>{{#each controller}}
<div class="span-4">{{title}}
<p>{{description}}</p>
</div>{{/each}}
</script>
<script type="text/javascript" src="/javascripts/require.js" data-main="javascripts/main"></script>
</div>
</body>
</html>
My ember code is the following :
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Bookmark.find();
}
});
App.Bookmark = DS.Model.extend({
title: DS.attr('string'),
link: DS.attr('string'),
description: DS.attr('string'),
});
App.Store = DS.Store.extend({
revision: 13,
});
And /bookmarks return a this json result :
{
"bookmarks": [
{
"_id": "51ebd06a5810509f703e2504",
"title": "Stackoverflow",
"link": "http://stackoverflow.com/",
"description": "Q&A"
}
]
}
Most of my handlbars's template works as expected, and only a thing does not, the {{link}} part creates content such as <script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>
You can see the application running there : http://sleepy-bastion-5858.herokuapp.com/
Does anybody have a clue ?
For binding HTML attributes (such as href, src, title, etc.), use the bind-attr helper. So your template should be:
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>
{{#each controller}}
<div class="span-4">
<a {{bind-attr href="link"}}>{{title}}</a>
<p>{{description}}</p>
</div>
{{/each}}
</script>