Hi I have a table dynamicaly filled (via php and jquery) but the tablesorter does not work
Scripts initialization at the end of the page
<!-- JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Page Specific Plugins -->
<script src="js/tablesorter/jquery.tablesorter.js"></script>
<script src="js/tablesorter/tables.js"></script>
<script>
function dynamicRefresh()
{
//generic
$(".pm-count").load("php-scripts/dynamic/pm-system/countU.php");
$(".pm-ddmenu").load("php-scripts/dynamic/pm-system/menu.php");
$(".com-count").load("php-scripts/dynamic/com-system/countU.php");
$(".com-ddmenu").load("php-scripts/dynamic/com-system/menu.php");
//Page Specific
var lpage = page - 1;
$("#new_msg").load("php-scripts/data/setlist/table.php", {'page':lpage});
//Refresh Rate
setTimeout("dynamicRefresh()",60000);
}
window.onload=dynamicRefresh;
</script>
Table Code
<table class="table table-hover table-striped tablesorter">
<thead>
<tr>
<th>Ordem # <i class="fa fa-sort"></i></th>
<th>Nome <i class="fa fa-sort"></i></th>
<th>Banda <i class="fa fa-sort"></i></th>
<th>Original/Cover <i class="fa fa-sort"></i></th>
<th>Acção <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody id="new_msg">
</tbody>
</table>
I only click to sort the table when the table is filled with data I know if the table has no data this error occurrs.
Can it be because of the plugin initialization?
The plugin is loaded faster then the table data.
UPDATE #1
After close look at the debug console I see this
Built headers:,1ms jquery.tablesorter.js:147
[th.header, th.header, th.header, th.header, th.header, prevObject: x.fn.x.init[1], context: table.table.table-hover.table-striped.tablesorter, selector: "thead th", jquery: "1.10.2", constructor: function…]
I think it's safe to assume that when the plugin is initialized it builds the headers but also loads the data to faster sorting, if this is correct is there a function to "update" the initialization process?
UPDATE 2
After reading some more I found that I just need to add a trigger
in this case
$('.tablesorter').trigger('update');
It's working fine now
Related
My team and I are making a project wherein we need to pass on variables to a modal. How do I pass the data to the modal using loan id as parameter from the table row that I selected?
example:
loan id
name
view
0964
charles
button
0562
ultor
button
when you press the button of that particular row, a modal will show up wherein the details of that row will be loaded.
In addition, the modal will also have information that would be needed, but is from a different database table, but the parameter is name instead of loan id
Is there a way to do that? I don't have a lot of experience in jquery and ajax, but i read that it might be a solution to my problem.
here is my table view that shows the button and the row information.
<?php foreach($open_applications as $row): ?>
<tr>
<td><?php echo $row->col_full_name; ?></strong><td>
<td><?php echo $row->col_loan_assignid; ?></td>
<td>
<button class="btn btn-secondary btn-xs" data-bs-toggle="modal" data-bs-target="#loanDecision">Pending</button>
<a href="<?php echo site_url('Users/borrowerdetails')?>" role="button" class="btn btn-link btn-xs">View</button>
</td>
</tr>
Here is my modal where it would need to show information that are in the row and information from a different table
<div class="modal fade" id="loanDecision" tabindex="-1" aria-labelledby="loanDecisionLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title" id="loanDecisionLabel">This would be where the name is from the row</h5><br>
</div>
<div class="modal-header">
<h5 class="modal-title" id="loanDecisionSubtitle">this would be where the person's job is from the row</h5>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead class="thead">
<tr>
<th scope="col">title of the column from a different table</th>
<th scope="col">title of the column from a different table</th>
<th scope="col">title of the column from a different table</th>
</tr>
</thead>
<tbody>
<tr>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
<td>data from the column from the different table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I have created a controller and a model, but I don't know how to connect them to the modal, but here is my controller and model:
public function fetchDetails($col_loan_assignid, $col_borrower_id)
{
$data['getloandetails'] = $this->Users_model->getingloandetails($col_loan_assignid);
$data['getactiondetails'] = $this->Users_model->getingactiondetails($col_borrower_id);
}
public function getingloandetails($col_loan_assignid){
$sql = "select * from $this->tbl_loan_application where col_loan_assignid like '%$col_loan_assignid%'";
$query = $this->db->query($sql);
return $query->result();
}
public function getactiondetails($col_borrower_id){
$sql = "select * from $this->tbl_action where col_loan_assignid like '%$col_borrower_id%'";
$query = $this->db->query($sql);
return $query->result();
}
Step 1 : set unique id to data attributes in view button.
Example data-loanid='".$row->loanid."'
Step 2 : add a common class to view button and add event-listner to it.
Example view-btn
Step 3 : after adding event listener get data attributes from its. So you can able to access unique.
$(".view-btn").click(function(){
let loan_id=$(this).data('loanid');
console.log(loan_id);
});
Step 4 : after getting unique id so can able send a request via ajax or fetch api.
Step 5: on ci3 create a route and validate data in controller and pass data to model and fetch data from database and return response.
Fetch api Example
let ApiRequest = async function(Url,param) {
try {
const url = Url;
const options = {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: param,
//body:field1=Value1&field2=value2
}
const response = await fetch(url, options);
// response as json
return await response.json();
} catch (error) {
console.error('Error:', error);
return false;
}
}
let url="http://www.example.com/api/getdata";
let parameter=field1=Value1&field2=value2;
let Result=ApiRequest(url,parameter);
console.log(Result);
I have a list (displayed in a tabulated format). The list consists of names of various departments.
The same appears as below:
-------------------------------------------------------
Sr. No. Department Name Action
-------------------------------------------------------
1 Department A EDIT | DELETE
2 Department B EDIT | DELETE
3 Department C EDIT | DELETE
4 Department D EDIT | DELETE
5 Department E EDIT | DELETE
-------------------------------------------------------
Now I am trying to open a single modal when "EDIT" or "DELETE" is clicked. In the modal I want to display the EDIT Form (for the particular Department) or DELETE Form (for the particular Department).
Please Note: I am using CouchCMS so even a custom PHP code can be helpful which can be changed to fit the CouchCMS Purview.
I have generate a clonable template with custom routes using CouchCMS. The tag helps me generate the table (as shown above). Where in the buttons for EDIT and DELETE are also generated. I can easily provide to the button the page id using the of CouchCMS (if that helps).
I am using the native code of bootstrap to popup the Bootstrap v3 modal. Wherein, a single modal opens for every button that is clicked, hence saving me the memory issue that i might run into if I generate as many modals as the rows in the table.
The code for Bootstrap v3 modal that i am referring to is available here.
In CouchCMS we have a edit form (for editing the data queried from the database) where the page_id parameter needs to be set in order to edit that particular data item. I need to set this page_id. But am unable to figure out how to?
Code to generate the Table list:
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<cms:pages masterpage='department/department.php' limit='10' paginate='1' show_future_entries='1'>
<tr>
<td><cms:show absolute_count /></td>
<td><cms:show k_page_title /></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
EDIT
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
DELETE
</button>
</td>
</tr>
</cms:pages>
</tbody>
</table>
Code to open a single modal for every button that is clicked, EDIT or DELETE button:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var page = button.data('id') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
var modal = $(this)
modal.find('.modal-title').text('New message to ' + page)
modal.find('.modal-body input').val(page)
})
Code for the modal is:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<!-- Edit Form Content Here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
<button type="button" class="btn btn-primary">SAVE</button>
</div>
</div>
</div>
</div>
An edit form in CouchCMS is defined as:
In this form I need to have the page_id=k_page_id set. The k_page_id is available to the button in the table under the data-* (data-id) attribute. If only this data-id could be supplied to the page_id, the rest can be taken forward from there using CouchCMS.
I am also open to the option of using AJAX, if required. But if it is possible without AJAX, it would still be fine.
Any help in this regards will be greatly appreciated. If any clarification or post editing is required or any more inputs are required, I shall do show if someone points out the short coming in my description/code.
Thanks to the community, in advance.
how to get data from table and pass it in controller in json format and get those data in view using angularjs
I want to get data from json encoded variable from controller and show it to view page using angularjs
view page using angularjs
<div class="card" ng-app = "myApp">
<table class="table table-hover" ng-controller = "menuController">
<thead>
<tr>
<th>Name</th>
<th>Parent menu</th>
<th>Order</th>
<th>Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "x in values">
<td>{{x.name}}</td>
<td>{{x.parent_name}}</td>
<td>{{x.orders}}</td>
<td>{{x.status}}</td>
<td class="text-right">
<button type="button" class="btn btn-icon-toggle"
data-toggle="tooltip" data-placement="top"
data-original-title="Edit row">
<i class="fa fa-pencil"></i>
</button>
<button type="button" class="btn btn-icon-toggle"
data-toggle="tooltip" data-placement="top"
data-original-title="Copy row">
<i class="fa fa-copy"></i>
</button>
<button type="button" class="btn btn-icon-toggle"
data-toggle="tooltip" data-placement="top"
data-original-title="Delete row">
<i class="fa fa-trash-o"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
var app = angular.module('myApp');
app.controller('menuController',function ($scope,$http) {
$scope.values = ["Milk", "Bread", "Cheese"];
});
PHP controller code
public function getmenu(){
$records=Menu::all();
return json_encode($records);
}
route code
Route::group(['prefix'=>'admin'],function(){
Route::get('/form','HomeController#form');
});
ErrorException (E_ERROR)
Use of undefined constant x - assumed 'x' (this will throw an Error in a future version of PHP) (View:form.blade.php)
I think it might be because you are serving your view which contains the angular code with Laravel, and in the file form.blade.php you use the angular syntax, which is the same as the blade one.
To solve that, you can try to remove blade word from the view filename, so it would become form.php or (alternative way instead of modifying the filename) each time you have to print something with the JavaScript framework instead of blade, use: #{{ variableToPrint }}.
So for example, part of your loop would become:
<tr ng-repeat="x in values">
<td>#{{x.name}}</td>
<td>#{{x.parent_name}}</td>
<td>#{x.orders}}</td>
<td>#{{x.status}}</td>
<!-- ... -->
You get the error as blade uses the same syntax to evaluate and print values, so if you write: {{ x.name }} blade finds a string literal x which gets interpreted as a constant.
If you prefix the # sign, blade will recognize that as an instruction not to be parsed, but that needs to be left as it is, it would just remove the #, leaving you with the correct code for you JavaScript loop
My situation is as follows:
PHP script retrieves data from a database. This information is shown in the first tab. This tab will always stand and can not be closed. This is fine, see me code.
try {
print '
<div class="clientTabs">
<ul class="nav nav-tabs" id="navTabs">
<li class="active" id="li0">Alle clienten</li>
</ul>
</div>';
$selectTabbladen = $gebruiker_data->runQuery("SELECT * FROM clients ORDER BY clients_id");
if (!$selectTabbladen->execute()) return false;
if ($selectTabbladen->rowCount() > 0) {
print '
<div class="tab-content" id="tabContent">
<div id="client0" class="tab-pane active">
<div class="bootstrap-table">
<div class="fixed-table-toolbar">
<div class="bars pull-left">
<button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled">Vervijderen</button>
</div>
</div>
</div>
<table class="table table-bordered" id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="false"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-pagination="true"
data-id-field="id"
data-minimum-count-columns="2"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false">
<thead>
<tr>
<th class="text-center" width="1">#</th>
<th>Name</th>
<th>Address</th>
<th>Zip</th>
<th>City</th>
<th>Tel.</th>
</tr>
</thead>
<tbody>';
while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['clients_id'];
$name= $aRow['name'];
$adress= $aRow['address'];
$zip= $aRow['zip'];
$city= $aRow['city'];
$tel= $aRow['tel'];
print '<tr class="tabData" id="'.$id.'">
<td>
<label class="cr-styled">
<input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/>
<i class="fa"></i>
</label>
</td>
<td>'.$name.'</td>
<td>'.$address.'</td>
<td>'.$zip.'</td>
<td>'.$city.'</td>
<td>'.$tel.'</td>
</tr>';
}
Double-click creates a dynamic tab that retrieve other data from the database associated with this ID. This is also good, a new TAB is created and the data retrieved.
//Tabs
$('body').on('dblclick', '.tabData', function () {
var tab_id = $(this).attr("id");
addTab(tab_id);
});
function addTab(tab_id) {
// If tab already exist in the list, return
if ($("#li"+tab_id).length != 0) {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
$("#li"+tab_id).addClass("active");
$("#client"+tab_id).addClass('active').show();
//return;
} else {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
// add new tab and related content
$('ul#navTabs li:last-child').after('<li class="active" id="li' + (tab_id) + '">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button>');
loadClientData(tab_id);
//$('div#tabContent div:last-child').after('<div class="tab-pane" id="client' + (tab_id) + '"><p>Content tab ' + (tab_id) + '</p></div>');
// set the newly added tab as current
$("#client"+tab_id).addClass('active').show();
}
}
function loadClientData(tab_id) {
$("#tabContent").empty();
$.ajax({
type: "GET",
url: "clienten_data_load.php?id='+tab_id",
success: function(data) {
//empty(data);
$("#tabContent").text(data);
}
});
}
});
From here it goes wrong and I do not know how to solve this.
If I go back to the first TAB after first created dynamic tab, then this contains same data as the dynamically created tab.
What am I trying to do:
First tab: Provides an overview of all clients with a number of client data.
Dynamic tabs: There will be a maximum of 10 tabs. Each double click creates a dynamic tab to maximum of 10. The contents of the tab have to be all other client data associated with the corresponding ID.
How can I make sure that an additional tab is created with each double click without replacing the contents of other tabs?
Hope I explained it clearly.
Your PHP should be returning an array (JSON) of rows with sub-arrays as the row content, NOT HTML. So build your return as an array then return using json_encode. Next you'd need to run through the array in your AJAX success method and simply fill in the content. I am on my phone, so I cannot provide an example as of right now, I will update this later if it is still needed. For now, concept should work.
I have table in which data comes from the database.and I have the form on the same page which insert the data in the table.but when I insert data using $.ajax , it inserts record in database , but after reloading table in same function is not working, means it doesn't reload the table.
below is my code.
HTML
<div class="col-lg-8" id="value_table">
<div class="panel-body">
<div class="table-responsive">
<?php
$q=$db->query('select attr_val_id,attr_val,sortorder,status from db_attribute_value where attr_id="'.$attr_id.'"' );
?>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Edit/Delete</th>
</tr>
</thead>
<tbody>
<?php $c=1; while($r=$q->fetch_assoc()){?>
<tr class=" gradeX">
<td><?php echo $c; ?></td>
<td><?php echo $r['attr_val']; ?></td>
<td><a href="add_attribute_val.php?id=<?php echo $r['attr_val_id']; ?>&attr_id=<?php echo #$r['attr_id']; ?>">
<button type="button" class="btn btn-default btn-circle"><i class="fa fa-pencil-square-o"></i></button>
</a>
<button type="button" class="btn btn-danger btn-default btn-circle" id="<?php echo $r['attr_val_id']; ?>" name="deleteRecord"><i class="fa fa-times"></i></button></td>
</tr>
<?php $c++;}?>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
JQuery
$('#attr_val_form').submit(function(event) {
//$('.form-group').removeClass('has-error'); // remove the error class
//$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'attr_val' : $('input[name=attr_val]').val(),
'attr_id' : $('input[name=attr_id]').val(),
'sortorder' : $('input[name=sortorder]').val(),
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'admin_operation.php?mode=add_attr_value', // the url where we want to POST
data : formData, // our data object
cache: false,
success: function(data)
{
if($.trim(data)== 'yes')
{
$("#value_table").html($("#value_table").html());
$("#notice")
.show()
.html('<div class="alert alert-success"<strong>Successfully !</strong> record added.</div>')
.fadeOut(3000);
}
else
{
$("#notice")
.show()
.html('<div class="alert alert-danger"<strong>Error !</strong>Record already exist.</div>')
.fadeOut(10000);
}
}
})
// using the done promise callback
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
I guess what you think this line should do is get the data from the response and substitute the same tag in your DOM:
$("#value_table").html($("#value_table").html());
You should use something like that instead:
$("#value_table").html($.parseHTML(data).find("#value_table").html());
This code has not been tested, but the main idea is to parse the data parameter and the find the #value_table element.
More info here: http://api.jquery.com/jquery.parsehtml/
As you say it seems like 'admin_operation.php?mode=add_attr_value' not success, try to call to always function instead success (for debugging it).
if the always function called successfully you have to return true from admin_operation.php
if not you have a problem on admin_operation.php after the insertion.