I am starting to learn javascript.
Controller file:
public function index(){
$this->load->view('crud_view.php');
$this->load->model('pushnotification_model');
$data['jsonData'] = json_encode($this->pushnotification_model->search_user());
$this->load->view('pushnotification_group_wise_view',$data);
}
search_user is a method in the model pushnotification_model which retrieves data from the database and returns back to the controller for json encoding.
Now in the pushnotification_group_wise_view I have a table like below:
<div id="showUserData" data-bind="visible: records().length > 0">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>GCM REG ID</th>
<th>EBL SKY ID</th>
<th style="text-align:center"><button data-bind="click :$root.processAll" class="btn btn-primary">Select All</button></th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td data-bind="text:gcm_regid"></td>
<td data-bind="text:eblSkyId"></td>
<td style="text-align:center"><input type="checkbox" data-bind="checked: isProcessed"></td>
</tr>
</tbody>
</table>
Now I want to populate the table with the $data using javascript. How can I do that?
Since your pushnotification_group_wise_view is already have the jsonData you can do it using php no need to use javascript, but To do it using JavaScript you will need an endpoint to access the data result in json format
in controller
public function notification(){
$this->load->model('pushnotification_model');
//return data as json
$this->output
->set_content_type('application/json')
->set_output( json_encode($this->pushnotification_model->search_user()) );
}
in JS using jQuery
$.getJSON( "/notification", function( data ) {
$.each( data, function( key, val ) {
//do the iteration and built the rows of table for population here
});
//and at last append it to `$('#showUserData table')`
});
Related
I've a separate javascript code which is fetching data from api and inserting in browsers localStorage.
API is fetching ETA data and saving in localStorage as id_ETA(e.g 12342_ETA) key.
When the values in local storage gets updated then my html table ETA column values should also get updated without refreshing the page.
Right now I need to refresh the entire page in order to view the updated ETA in the html.
HTML Table:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
<script>
var data = getPlanData();
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
for(var i=0;i<data.length;i++){
document.write("<tr>");
document.write("<td>"+data[i]['id']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
document.write("<td>"+data[i]['departure']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
if (localStorage.getItem(data[i]['id']+'_ETA'))
{
document.write("<td>"+localStorage.getItem(data[i]['id']+'_ETA')+"</td>");
}
else
{
document.write("<td>-</td>");
}
document.write("</tr>");
</script>
</tbody>
</table>
</div>
getPlanData():
function getPlanData() {
localData = localStorage.getItem('plan');
result = csvToJSON(localData);
return result;
}
Note: ETA is coming from separate API
Is there a way to update the ETA column when there is new ETA value in localStorage without refreshing the page?
Assuming getPlanData() does the writing to localStorage, you need to do two things
Don't use document.write, certainly not after load since it wipes the page
save to localStorage in getPlanData() AND
call this update with the data in the getPlanData function - this script can be copied to the head of the document inside script tags and called as update(data)
const update = data => {
const html = data.map(item => (
`<tr>
<td>${item.id}</td>
<td>${item.arrival}</td>
<td>${item.departure}</td>
<td>${item.arrival}</td>
<td>${localStorage.getItem(item.id+"_ETA") || "-"}</td>
</tr>`));
document.querySelector(".table tbody").innerHTML=html.join("")
}
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
If you post an example of your data, I am sure we can find a better way to get the ETA than localStorage.getItem(item.id+"_ETA")
UPDATE: You CAN do
var data = getPlanData();
update(data)
In my web, when hovering over a row, I show a popup table with data.
What I want to be able to do is to get these data from the database.
Currently it looks like this :
<td id="popupContent" data-trigger='hover' data-container="body"
data-toggle="popover"
data-content="
<div class='table-responsive'>
<table class='sastable table-striped table-bordered' data-toggle='table' data-height='150' data-classes='table table-striped table-bordered'>
<thead id='head'>
<tr>
<th class='col-md-6'>Value</th>
<th class='col-md-6'>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td class='col-md-6'>0</td>
<td class='col-md-6'>1</td>
</tr>
<tr>
<td class='col-md-6'>10</td>
<td class='col-md-6'>2</td>
</tr>
<tr>
<td class='col-md-6'>20</td>
<td class='col-md-6'>3</td>
</tr>
</tbody>
</table>
</div>"
data-html="true"></td>
</tr>
And the js function :
$(function() {
$('#popupContent')
.popover({
container : 'body'
});
});
In my database I have a table like this :
Type Value Score
type1 0 1
type1 10 2
....
type2 0 1
based on the Id of the td I want to be able to call a certain type and all of the values and scores to put them on the popup table.
How do I achieve this ?
In a Spring Controller I have a RestController that returns a JSON file with the tables
#RequestMapping(path="/scores", method=RequestMethod.GET)
public List<Scores> getAllScores(){
return scoreService.getAllScores();
}
Maybe I could have a function like :
function getClientResults(type) {
// if type=="popupContent"
var url "/scores/"+type1 or something ?
$.getJSON(url, function(data) {
\\change table values ??
}
Am I on the right track ? or is there a better way to do this ? Any help would be appreciated ! Thank you
Way 1 You will be injecting a php into top of your page where You will connect to your database and do a query to get the data and write it into that popup table like <? echo $query['whatever']; ?>.
Way 2 You will create autonomus query page and when you hover the row it will send ajax request to that page receive data and will load it into the popup.
i am new to mvc so please help
please see the fiddle https://jsfiddle.net/shaswatatripathy/9d0oknyt/2/
here i have a table and I have to write a jquery function which will get all the rows which have status as modified and send data to controller action and access this data to create datatable in controller action
the table is dynamic -many rows can come up there so need a jquery function which will be invoked on a button click and get rows details with status modified
html
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>us</td>
<td>male</td>
<td>static</td>
</tr>
<tr>
<td>joana</td>
<td>washington</td>
<td>female</td>
<td>static</td>
</tr>
<tr>
<td>steve</td>
<td>belgium</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>jimmy</td>
<td>angola</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>lisa</td>
<td>india</td>
<td>female</td>
<td>modified</td>
</tr>
</tbody>
</table>
<br />
<input type="button" onclick="sendDetailsToControllerAction()" value="get details"/>
css
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
i can use jquery ajax method to send data to my controller action
server side
public actionResult GetDetails()
{
return view();
}
how to get details of every row with status modified and send it controller .
table header names and column names in my data table which i will create in action will be different .
i dont need that much help creating datatable out of data , but dont know how to send that data and get it
Using below function you will be able to get "modified" rows and save those row in array and then you can use $.ajax to call your Action in controller
<script type="text/javascript">
function sendDetailsToControllerAction() {
var tableData = document.getElementById('mytable');
var numberOfRows = tableData.rows.length;
for (var i = 1; i < numberOfRows; i += 1) {
var row = tableData.rows[i];
if (row.cells[3].innerText == 'modified') {
//Rows which have modified status
console.log(row)
}
}
}
</script>
I'm currently trying to fill dynamically a table with content retrieved from a JSON Object.
Here is the table:
<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Nom</th>
<th data-hide="phone">Commentaires</th>
<th data-hide="phone,tablet">Date</th>
<th data-hide="phone,tablet">Attachements</th>
<th data-hide="phone,tablet">Actions</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
I have multiple interesting features in the table such as a search option, a filter, sort, export as PDF, etc,....those features are working properly if I'm including static content such as:
<tr>
<td>33</td>
<td>Bevis</td>
<td>1-955-717-0835</td>
<td>Est Ac Inc.</td>
<td>7424</td>
<td>Ichtegem</td>
</tr>
but as soon as I retrieve data table content from My JSON object, I'm not able to use those features anymore, sort doesn't work, search neither.
Here is the JavaScript I'm using:
$(document).ready(function() {
$.get('getAllDocuments', function(responseJson) {
if (responseJson != null) {
var table1 = $("#table");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['id']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['commentaire']);
rowNew.children().eq(3).text(value['date']);
rowNew.children().eq(4).text(value['id']);
rowNew.children().eq(5).html("Voir Supprimer");
rowNew.appendTo(table1);
});
}
});
});
My table is filled correctly, but not all the functions associated. any idea on how I can fill my table with JSON content in a proper way?
I think you can use ajax option of DataTables like:
var table = $('#example').DataTable( {
ajax: 'data.json'
});
P.S. here is the documentation
i created a table with one editable column. i want users to be able to save changes in this column cells, but though the call executes and sends the correct data before the change, it won't recognize changes in the table after data loaded.
this is how i create table:
<table class="table table-bordered table-hover" ng-controller="tableCtrl"
ng-controller="Ctrl">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody ng-repeat="(user_id, row) in data | filter:search">
<tr ng-repeat="(script_id, cron_format) in row ">
<td ng-model="user_name">{{user(user_id)}}</td>
<td ng-model="script_name">{{script(script_id)}}</td>
<td ng-model="cron_format">
<span contenteditable="true"
ng-repeat="l in letters(cron_format) track by $index"
>{{l}}</span>
<button class="save"
ng-click="saveCron(user_id,script_id,cron_format)">save</button></td>
</tr>
</tbody>
</table>
the result is this table:
and cron format is editable. but when i call saveCron(user_id,script_id,cron_format)
it sends the values initialized the table.
this is the saveCron function:
$scope.saveCron = function(userId,scriptId,cronFormat){
$.post("updateCronChange.php","user_id=userId&script_id=scriptId&cron=cronFormat", function(data){
//function gets correct params
document.getElementById("demo").innerHTML = userId + scriptId +cronFormat;
});
}
how can i make it send the modified cron_format after end user changed it? thanks..