Popover on hover, fill out from Mysql Database - javascript

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.

Related

how to send a html table rows to controller action from jquery function

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>

How to display data inside table by ng-repeat using Angular.js

I need one help i need to display data inside table using Angular.js.I am explaining my code below.
$scope.listOfData=[
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
my html table is given below.
<div class="table-responsive dashboard-demo-table">
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">Name</td>
<td rowspan="2">Email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Order status</td>
</tr>
<tr>
<td>date</td>
<td>name</td>
<td>email</td>
<td>orderid</td>
<td>orderstatus</td>
</tr>
</tbody>
</table>
</div>
expected output result.
date name email order
order_id order_status
2016-01-25 raj raj#gmail.com 1111 1
to 2016-02-04 2222 0
The above table is for serial no-1 again for sl no-2 the data will display accordingly.
Here i need suppose 0th index of $scope.listOfData has two set of data some field value like name,email are same so these two sate of data will join and it will display in 1st index of the table.Here date column will contain lower date to higher date like(from date to todate),name and email filed will contain the value one but here different is for order column order_id and order_status is different for each set of data of 0th index from $scope.listOfData so these will again move in a another loop.Please help me.

The following may help you
<div ng-repeat="data in listOfData">
<!--<Do whatever you need here with data.name, data.date etc...>-->
<!--You can keep your table here.-->
</div>

<tr ng-repeat="data in listOfData">
<td>{{data.date}}</td><td>{{data.name}}</td>....
</tr>
PS for header you can use a <thead> tag
Edit :
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
}
You can't with your json format like this, flatten it in a one level array with even index containing "from" and odd containing "to" datas then do the following
<tr ng-repeat="data in listOfData">
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
...
</tr>
EDIT : can't really make a plunker, here is what by flatten I mean transform this
$scope.listOfData=[
[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
]
]
Into this :
$scope.listOfData=[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222},
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
So your "from" lines will have even index (0,2,4...) and your "to" lines will have the odds ones (1,3,5,...).
Using $index you can now built properly your lines : $index is given by ng-repeat. ng-if is a directive that won't build the dom element if the condition is not true.
So this
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
Will always build only one <td> element.

Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery

Here is my html table that is used in the Asp.net MVC razor view
<table class="table-striped table-bordered">
<thead>
<tr>
<th class="col-md-2">
Id
</th>
<th class="col-md-4">
Description
</th>
<th class="col-md-3">
Quantity
</th>
<th class="col-md-3">
AssetType
</th>
</tr>
</thead>
<tbody>
#foreach (var i in Model)
{
<tr>
<td class="col-md-2">
#i.Id
</td>
<td class="col-md-4">
#i.Description
</td>
<td class="col-md-3">
#i.Count
</td>
<td class="col-md-3">
#i.AssetType
</td>
<td>
<a onclick="getId()">Edit</a>
</td>
</tr>
}
</tbody>
</table>
My Js Code
<script type="text/javascript">
var getId = function () {
//get current row
var currentRow = $(this).closest('tr');
// get the id from the current row. or is there any better way ?
}
</script>
Hi In the above code. all i want to do is when the user selects the edit link of the given row in the table. i want to extract id value of the selected row.
Could anyone please guide me in this one? I have seen articles that says how to get a given cell value from each row but didnt have any luck in finding articles that explains how to extract the data cell value from a given row.

You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it.
<td>
<a onclick="getId('#i.Id')">Edit</a>
</td>
function getId(id) {...}
or if you prefer you can use something like this:
<a onclick="getId(this)">Edit</a>
function getId(dom){
var id = $(dom).parent().find('.col-md-2').html();
}

You can put the id value to data-id attribute in the Edit link as below
<a data-id="#i.Id" class="edit-button" href="#">Edit</a>
Add the click event handler to the edit link, you can get the id value by using $(this).data('id')
<script type="text/javascript">
$('.edit-button').on('click', function (e) {
e.preventDefault();
alert($(this).data('id'));
});
</script>
Working fiddle: http://jsfiddle.net/ds4t6jur/

ng-click function not recognzing changes inside table data

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..

Populating a datatable with json data using javascript in codeigniter

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')`
});

Categories

Resources