I am working on a project that is almost done in my office, there are several pages that use plug-in datatable and use accordion, in this case the problem is that the searchbox I created is irregular. how to fix this?
Datatables Display so far
All processes are normal, but my production manager has asked to change the position of the searchbox to the right
here my Datatables code :
$current_script = '
$(".accordion-toggle").on("click", function () {
var table_key = $(this).data("index");
var table_tbody = $("#asset-"+table_key+" tbody");
console.log(table_tbody);
if(table_tbody[0].childElementCount == 0){
var table_aset = $("#asset-"+table_key).dataTable({
"pagingType":"simple_numbers",
"searching": true,
"AutoWidth":true,
"scrollY": "400px",
"ajax":{"url":"'.site_url($this->current_page.'/get/?get=1&lokasi=').'"+table_key,
"type":"post"}
});
//table_aset.ajax.url("'.site_url($this->current_page.'/get/?get=1&lokasi=').'"+table_key).load();
$.get("'.site_url($this->current_page.'/get/').'",{
get : 2,
lokasi : table_key
},
function(data){
$(".tot_perolehan-"+table_key).html(data.total_perolehan);
},"json");
}
});
';
Related
I am trying to reload data tables that have been inserted into tabs.
Please refer to question: AJAX Update DataTable after On Success
A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -> and the content of it table two. I am changing the status now using AJAX as this:
$(".changeStatus").click(function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var status = "In Production";
var id = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {status : status , id : id},
success : function(data){
$('tr#'+id+'').css('background-color', '#ccc');
$('tr#'+id+'').fadeOut('slow');
}
});
}
else{
return false;
}
});
In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.
The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.
$(document).on('click','#ChangeNext',function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var statusid = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {statusid : statusid},
success : function(data)
{
$('#exampleone').DataTable().ajax.reload();
}
});
}
else{
return false;
}
});
the best way for putting data in a DataTables with ajax requests, is DataTables ajax api that you can see it in following link:
DataTables Ajax sourced data
jQuery sample:
jQuery('.changeStatus').click(function(event){
$('#example').DataTable({ ajax: 'data.json' });
});
JSON Sample:
{
"data": [
[
"Roshan Zaid",
"Stackoverflow user",
"New member"
],
[
"AmirAli Esteki",
"Stackoverflow and AskUbuntu user",
"New member"
]
]
}
the response of your ajax requests should be json by default
This issue is reminiscent of a question I asked a few years ago:
jQuery dropdown option:first selected
Here is the jQuery function that successfully populates the dropdown id #namelist:
$('#edituserModal').on('show.bs.modal', function (e) {
initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) {
return {
value: item.name,
text: item.name
}
});
});
The code directly above successfully populates the HTML dropdown select here:
<select id="namelist">
</select>
Here is the code that creates the datatable:
$('#datatable').DataTable({
"searching": true,
"paging": true,
"serverSide": false,
"type": "POST",
"ajax": {
"url": "assets/process/getusers.php",
"dataSrc": ""
},
"columns":
[
{ "data": "null",
"render": function ( data, type, row, meta )
{
return "<i class='far fa-edit editUser'
title='Edit User' data-editdeptrepname='"+row.name+"'></i>";
}
},
{"data": "username"},
// few more columns
]
});
The user clicks on the icon with the class .editUser. That onClick event is here:
$('#datatable').on('click', 'tr > td > .editUser', function(e){
e.preventDefault();
var $dataTable = $('#datatable').DataTable();
var tr = $(this).closest('tr');
var rowData = $dataTable.row(tr).data();
var name = $(this).attr('data-name');
$('#namelist').val(name);
// $('#namelist').val(rowData.name); // <-- I tried this
// $('#namelist').val(rowData.name).text(rowData.name); // <-- also tried this
// $('#namelist option:first').val(rowData.name).text(rowData.name); // <-- this too
// $('#namelist option:first').val(name); // <-- this as well
$('#edituserModal').modal('show');
});
As stated above, the dropdown list is populated with a list of names. When a user opens the modal, the first name that should appear in the dropdown should be whatever the name is saved in the db.
Problem is, in the modal, the dropdown list doesn't initially display the name saved in the database. The dropdown does still display all of the selectable name options, but it's the name saved in the database that should initially be displayed.
As you will see in the last piece of code, I've tried several methods to make it work, all to no avail.
Here is a pic of the dropdown after the modal opens. It should initially read the name currently saved in the database. I can click on the dropdown and it shows a whole list of names. But I need it to initially display the saved name:
What on Earth am I missing? I've done this a hundred times, and it has never failed me until now.
Here it is:
$('#datatable').on('click', 'tr > td > .editUser', function(e){
e.preventDefault();
// Here is where sould go your initializeSelect call
initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) {
return {
value: item.name,
text: item.name
}
});
var row = $(this).parent().parent();
name = row[0].cells[0].innerText;
$('#namelist option:first').val(name).text(name);
$('#edituserModal').modal('show');
});
By doing this, you dont need your modal show event listener anymore.
Hope this helped.
I am using below link for sorting CGridview row,
http://www.yiiframework.com/wiki/238/creating-a-jqueryui-sortable-cgridview/
its working fine, but after grid update i cannot able to drag the grid row !
My code,
$('#basefilter-grid table').sortable({
forcePlaceholderSize: true,
forceHelperSize: true,
items: 'tr',
update : function () {
serial = $('#basefilter-grid table').sortable('serialize', {key: 'order[]', attribute: 'class'});
$.ajax({
'url': '" . $this->createUrl('baseContact/orderFilterRow') . "',
'type': 'post',
'data': serial,
'success': function(data){
$.fn.yiiGridView.update('basefilter-grid');
},
'error': function(request, status, error){
alert('We are unable to set the sort order at this time. Please try again in a few minutes.');
}
});
},
helper: fixHelper
}).disableSelection();
I have column 'order' after row dragged its gets updated, after grid refresh only updated value will be seen, so i need to update grid badly, can anyone say how to do this?
I think I know what the problem is. If you have any javascript or CSS added to the view where your grid lives, they may not be available after the ajaxUpdate. I suggest you re-activate the plugins or extra JS functionality used for drag'n'drop.
For Example, if you want to use bootstrap tooltips you need to re-activate them after the ajaxUpdate:
'afterAjaxUpdate' => 'function(id,data) { $("[rel=\"tooltip\"]").tooltip(); }',
I have a small problem that maybe you guys can help me. I want to add a button to the grid that changes value depending on the line ie:
onSelectRow: function(id)
{
jQuery('#organismos').jqGrid('navButtonAdd', '#pager1',{caption: "", buttonicon: "ui-icon-image", title: "AO",onClickButton: function() {window.open('Hierarquia/tree_objetivos.php?idorg=' + id, '_blank');
}
Problem is that it will keep adding buttons. And what I wanted was for him to change value so each time you select a row. Have googled and asked for help in the forum and nobody helped me jqgrid. Someone can help me?
I would suggest adding button only once (after initializing the grid) and getting the selected row id from jqGrid options:
jQuery('#organismos').jqGrid('navButtonAdd', '#pager1', {
caption: '',
buttonicon: 'ui-icon-image',
title: 'AO',
onClickButton: function() {
var selectedRowId = jQuery('#organismos').jqGrid('getGridParam', 'selrow');
if (selectedRowId) {
window.open('Hierarquia/tree_objetivos.php?idorg=' + encodeURIComponent(selectedRowId), '_blank');
} else {
alert('You need to select a row first!');
}
}
});
I have a table that when a row is clicked it sends the first 6 characters of that row (an ID) to a PHP page and loads the subsequent data into a div further down the page. The issue it seems is that once I click a row to load the div, The majority of the jQuery events stop working (.hover, .sortElements) these are attached to the original table. Is there anyone that would know a 'fix' or work around for this issue or is there something I am just missing.
<SCRIPT type='text/javascript'>
$(document).ready(function(){
$(".panel").hide();
$(".itemjobbutton").click(function(){
$(".panel").slideToggle("200");
return false;
});
var inverse = false;
$("#jobTable th").click(function(){
var header = $(this),
index = header.index();
header
.closest('table')
.find('td')
.filter(function(){
return $(this).index() === index;
})
.sortElements(function(a, b){
a = $(a).text();
b = $(b).text();
return (
isNaN(a) || isNaN(b) ?
a > b : +a > +b
) ?
inverse ? -1 : 1 :
inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
$('#jobTable tr').click(function(){
if($(this).index() != 0) {
var thistext = $(this).text().substring(0,6);
$("#joblistingDetail").load('jobview.php' , {jobID: thistext}).hide().slideDown('100');
$("#jobTable tr").css("background", "#fff");
$(this).closest('tr').css('background-color', '#C3D9FF');
}
});
});
$('#jobTable tr').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover')
}
);
Your jobview.php is more than likely including it's own version of jquery.js that is overriding the one on the parent page. Either remove it from jobview.php, or modify your .load to only pull in html from within a given selector such as
$("#joblistingDetail").load('jobview.php #target')
where #target is a selector selecting a specific container to pull in.