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(); }',
Related
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");
}
});
';
I have HTML page which contains a Editable table, Where I am fetching the data from database using PHP and inserting into the that table. As my table is Editable, I want to update the values into the database when the user update any row value.
Please suggest me,because I don't know how to make AJAX call when user edits and click anywhere on browser.
You have to catch the moment where the datas are saved in your datatable: Often a click on a button.
So you need a code like that :
$(document).ready(function(){
$('#save-row-4').on('click', function(){
// Your ajax call here
});
});
The ajax have to be like :
$.ajax({
url: '/path/to/php/script.php',
type: 'POST',
data: {
variable1: 'val1',
variable2: 'val2',
variable3: 'val3'
},
error: function(return) {
alert("error");
},
success: function(return) {
console.log("Datas saved");
},
});
Don't forget to replace val1, val2 with the value of your inputs. Then, in your php script, you will be able to get these datas with $_POST['variable1'] .
I have a simple table (created with DataTables), with a final column filled with 2 buttons. These buttons are connected to jquery. The problem is next: If I'm on first page of table and I press one of the buttons, everything works fine. If I press same button on second / third /etc page, function doesn't work anymore... Can you explain me why ? It's first time when I meet this problem. Thank you !
Buttons call jQuery with class, not Id (just a little note)
EDIT:
$('.generare_diploma').click(function(){
var user_id = $(this).attr('id').split('-');
if(user_id[1] != ''){
$.ajax ({
url: "./genereaza.php",
type: "POST",
data: {user_id:user_id[1],todo:'generare_diploma_admin'},
cache: false,
success: function(){
$('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}
});
And this is how my anchor looks like:
<a id="diploma-'.$user['user_id'].'" class="btn btn-sm btn-success generare_diploma" data-toggle="tooltip" title="Genereaza diploma !"><i class="fa fa-calendar-check-o"></i></a>
$(document).on('click', '.generare_diploma',function(){
var user_id = $(this).attr('id').split('-');
if(user_id[1] != ''){
$.ajax ({
url: "./genereaza.php",
type: "POST",
data: {user_id:user_id[1],todo:'generare_diploma_admin'},
cache: false,
success: function(){
$('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}
});
EDIT: jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.
You use .click event on element who are not yet on the dom when you init it.
So you have to init that fonction each time you get new lines in your DataTable or to add a listener with .on(
Since newest jQuery version .on( event has change. Now your principal element have to be present in your DOM when you init the fonction, you can add listener on new elements who gonna be made with DataTable (when you change page with a pagination for example).
so your code : $('.generare_diploma').click(function(){
has to be : $(document|'body'|selector).on('click','.generare_diploma',function(){
But in case that you have to init more than one time , often better to had a .off before your .on( like : $(document|'body'|selector).off('click','.generare_diploma').on('click','.generare_diploma',function(){
So I am using Yii and full calendar as a widget which is called in a view of CalendarController. Uppon call for a widget, the widget retrives existing events from the DB and puts them inside the full calendar to display. Now I have also made a simple filter for filtering out events by category they are in ( dropdown with a submit ), so I want to send request to a calendarController method called actionEvents() which then takes what is passed to it ( the category of events for which we want to retrieve events ), gets them back to the jQuery which then calls the calendar again passing it a json_encode(d) array of needed properties to correctly render events under the selected category in the dropdown. The problem I have is that it seems fullcalendar is doing my wanted call ( POST ) as well as one another GET call along with it for some reason so it does return properly formatted json to the jQuery from the method of controller, but just shows an empty calendar without events in it on return. This is how the console looks like after the returned data.
This is the code that calls ajax call
$(document).ready(function() {
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('form.eventFilter').submit(function() {
var selectedOption = $('form.eventFilter select').val(),
eventContainer = $('.fc-event-container');
var objectToSend = { "categories" : [selectedOption],"datefrom" : "september2013"/*month + "" + year*/ , "dateto" : "september2013"/*month + "" + year*/};
$.ajax({
url: '<?php echo Yii::app()->createUrl('calendar/events'); ?>',
type: "POST",
async:false,
data: {data : JSON.stringify(objectToSend)},
success: function(data) {
$('#fc_calendar').html('');
$('#fc_calendar').fullCalendar({
events: data
});
console.log(data);
},
error: function() {
console.log(data);
}
});
return false;
})
})
The code that renders initial calendar events on first page load ( open ) is this
<div id="fc_calendar"></div>
<script class="fc_calendar_script">
// gets calendar and its events working and shown
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fc_calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: [
<?php foreach ($eventItems as $event): ?>
{
title: '<?php echo htmlentities($event['eventItems']['title']); ?>',
start: new Date(y,m,d + <?php echo $event['eventItems']['startdate_day_difference']; ?>),
end: new Date(y,m,d + <?php echo $event['eventItems']['enddate_day_difference']; ?>),
url: '<?php echo $event['eventItems']['url']; ?>',
className: [
<?php foreach($event['eventCategories'] as $category) { echo ''.json_encode($category['slug']).','; }?> // and categories slugs as classnames, same purpose
]
},
<?php endforeach; ?>
]
});
</script>
The code in controller is not that important since you can see what it returns in the screenshot :) If someone has an idea of how to get around this I would really be grateful :) Tried everything I know
Ok so bounty goes to whoever answers this question :)
I am having problems with full calendar month rendering when ajax data is returned and events populated. Since I have checkboxes for each category ( events have MANY_MANY relation with categories ) and each time a checkbox is checked or unchecked, JSON array of chosen categories of events is passed on to PHP method which queries DB for all events that go under chose categories and returns all events in a jquery encoded array to the view which then takes that events array and rerenders the calendar like shown in the upper code.
Problem is that when a checkbox is checked or unchecked and ajax returned the calendar always renders on the current month ( so right now it would always rerender itself to show events for september, untill the end of the month, then always for Ocbober and so on ), but what if a user was on lets say November 2013 when he checked event category for which he wanted to filter the events? The calendar would rerender on September still. How could I make it rerender on the month the user was on when he checked / unchecked a checkbox ?
The code that I have which keeps track ( or at least it should ) of the current month when prev or next month buttons are clicked is this
$('.fc-button-next span').click(function(){
start = $('#fc_calendar').fullCalendar('getView').visEnd;
console.log(start);
});
$('.fc-button-prev span').click(function(){
start = $('#fc_calendar').fullCalendar('getView').visStart;
console.log(start);
});
However this code is not tracking properly, sometimes it skips a month, sometimes it stays on the month without change and sometimes it returns propper month, which is bugging me so I cant call this function of the calendar properly which should set calendar to propper month on rerender.
$('#fc_calendar').fullCalendar('gotoDate', start);
I think what you might be looking for is something like
jQuery(function($){
$('form.eventFilter').submit(function() {
$('#fc_calendar').fullCalendar( 'refetchEvents' );
return false;
});
$('#fc_calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: function(start, end, callback) {
var selectedOption = $('form.eventFilter select').val(),
eventContainer = $('.fc-event-container');
//create the data to be sent
var objectToSend = {
"categories": [selectedOption],
"datefrom": start.getDate() + '-' + start.getMonth() + '-' + start.getYear(),
"dateto": end.getDate() + '-' + end.getMonth() + '-' + end.getYear()
};
//use jsonp based jQuery request
$.ajax({
url: 'events.json',
data: objectToSend,
cache: false
}).done(function(data){
//on success call `callback` with the data
callback(data)
})
}
});
});
Demo: Plunker
Note: The date param formatting and jsonp is not used here, you will have to change it to match your requirements
I see that you use JSON.stringify(data); this is what i tought your error was
maybe you need a jsonp, and below you have my example
$.ajax({
'url': 'http://domain.com/index.php/api/news?callback=?',
'data': {'data': JSON.stringify(data), callback: 'jsonPCallback'},
'success': function(data) {
// console.log(data);
},
jsonpCallback: jsonPCallback,
dataType: 'jsonp'
});
function jsonPCallback(cbdata){
console.log('callback2')
// console.log(cbdata);
return false;
}
now, do you also use something like
echo $_GET['callback'].'('.CJSON::encode(array('status_live' => 1, 'data' => $data_decoded)).')';
in the controller to return the results ?
also, createUrl might be wrong, because you need a absolute path
Actualy the problem solution is as weird as the problem itself and it is the following. You must use designated way of doing an ajax call to fetch json that is in the plugin documentation, any other way you send your own call ( GET or POST ) and the calendar after that makes yet another call ( hence the another GET call ) if you are using just a "regular" $.ajax, $.post or $.get call using jQueries native functionality
This should really be posted somewhere on the website in some section so that people do not get confused why their calendar is not making ajax calls and I wonder how noone else had similar problem before . So this is the "correct" documentation way of calling it with full calendar which you can find HERE
$('#fc_calendar').html('');
$('#fc_calendar').fullCalendar({
eventSources: [
// your event source
{
url: '?r=calendar/events',
type: 'POST',
data: { data : JSON.stringify(objectToSend)},
error: function(data) {
alert(data);
},
}
// any other sources...
]
});
So it will automaticly fetch any returned ( properly formatted data ) and use it to rerender new calendar with those events. It is very weird way of doing it, but the only way that will work.
I can't comment so, you have an assignment to variable:"nothing" in your last query parameter
double check if you have looked for ajax request in your controller(important!),
and also if this is this a 404 by the apache, you have url rewriting problems,
and it looks like index.php is missing from url?!
I have been tearing my hair out over the last couple of days. Just as a quick outline of the problem. I am using JqGrid 4.2.0 (latest version at the time of writing). In a single page, I have two grids. One on the left, looking to act as the navigator. I want to load the data on the right-hand grid with data determined by the row ID of the item clicked on the left hand side.
My problem is that the first selected row ID gets "stuck" and all ajax calls in future are the same identical rowid (for example: if first selected row was 514, every other selected row will output 514 on the ajax call to load the other grid, if first selected was 513, all others 513, etc)
I suspect it might be some kind of variables crossing or somesuch as I placed alert calls for testing throughout the execution and they all alert the correct ID number until the point where the next grid is loaded, at which point the row ID becomes the erroneous one.
Here is my code below:
First segment is the initial list on the left with the OnSelectRow call, and the second section of code is for the data grid on the right hand side which actuall holds the data)
renderImportsList = function(url, data, firstrow) {
var cnames = data.names;
var cmodel = data.model;
currentrow = firstrow;
$("#imports_grid").jqGrid({
url: url + "&type=list",
//caption: "Imports",
datatype: "json",
colNames: cnames,
colModel: cmodel,
recordtext: "<b>Imports: {1}</b>",
autowidth: true,
rowNum: 10000,
toolbar: [true,"top"],
pager: "#imports_grid_pager",
pgbuttons: false,
pginput: false,
viewrecords: true,
multiselect: false,
sortorder: "desc",
sortable: true,
onSelectRow: function(rowid) {
if (rowid != firstrow) {
if ($("#" + firstrow).hasClass("ui-state-highlight"))
$("#" + firstrow).removeClass("ui-state-highlight")
}
setTimeout(function() {
// Display import items
var itype = "checkpoint";
alert(rowid); // This returns the right row ID so far
renderImportItems(url, rowid, itype);
}, 500);
},
loadComplete: function() {
$("#imports_grid tr").css("border-color", "#666");
$("tr.jqgroup").css("background", "#e9efff");
$("tr.jqfoot").css("background", "#ced5e9");
$("#imports_grid tr.jqfoot td").css("border-right", "none");
$("#t_imports_grid").css("padding-bottom", "3px");
$("#imports_grid").setSelection(firstrow, true);
$("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
}
});
$("#imports_grid").jqGrid('navGrid','#imports_grid_pager',{edit:false,add:false,del:false,search:false});
$("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
sizeGrid("imports_grid");
}
This part executes fine, the rowid at this stage is what I clicked on, according to the alert placed above. Below is the second function which is called from inside OnSelectRow in the function above.
renderImportItems = function(url, rowid, itype) {
$.ajax({
url: srvrname + "applications/PMS/views/view/imports/" + itype + ".php",
success: function(data) {
var cnames = data.names;
var cmodel = data.model;
alert(rowid); // Here, the code still executes the right row ID
$("#checkpoint_grid").jqGrid({
url: url + "&rid=" + rowid + "&type=" + itype,
// This is where it breaks. No matter what, I keep getting rowid to equal whichever row was selected the very first time the grid was clicked (or loaded programatically onload)
datatype: "json",
colNames: cnames,
colModel: cmodel,
recordtext: "<b>Total: {1}</b>",
autowidth: true,
rowNum: 500,
pager: "#" + itype + "_grid_pager",
pgbuttons: false,
pginput: false,
viewrecords: true,
multiselect: false,
sortorder: "desc",
sortable: true,
loadComplete: function() {
$("#" + itype + "_grid tr").css("border-color", "#666");
$("tr.jqgroup").css("background", "#e9efff");
$("tr.jqfoot").css("background", "#ced5e9");
$("#" + itype + "_grid tr.jqfoot td").css("border-right", "none");
$("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
}
});
$("#" + itype + "_grid").jqGrid('navGrid','#' + itype + 'grid_pager',{edit:false,add:false,del:false,search:false});
$("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
sizeGrid(itype + "_grid");
}
});
}
As you can see above: at the point at which the first alert is called; it is still outputting the correct ID number, but as soon as the second grid is initialized; the ID returns to whatever it was inintially set on the very first call.
Any help provided would be greatly appreciated. If it helps, here are some firebug outputs to demonstrate the issue...
(Domain name removed for privacy)
(First load: programmatic: firstrow selected = 514)
Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336809180&rows=500&page=1&sidx=&sord=desc
(Clicked row: selected row = 503)
Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336863994&rows=500&page=1&sidx=&sord=desc
(Clicked row: selected row = 510)
Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336864848&rows=500&page=1&sidx=&sord=desc
I've experienced the same problem myself. I recommend you define your grid outside the onSelectRow function with datatype set to "local" and only change the parts that change between each load within onSelectRow:
$("#checkpoint_grid").jqGrid('setGridParam', {
url: null
}).jqGrid('setGridParam', {
url: url + "&rid=" + rowid + "&type=" + itype,
datatype: "json"
}).trigger("reloadGrid");
I usually do this with postData: null, but I think the underlying problem is that jqGrid caches some grid params.
You should include GridUnload for the $("#checkpoint_grid") inside of renderImportItems (for example after var cmodel = data.model;):
$("#checkpoint_grid").jqGrid('GridUnload');
The problem is that the code which create grid should be executed once. The code create for example grid headers, pager and some other areas excepting the grid body. Then the Ajax request will be made to get the data for the grid and to fill the body. If the user click on the column header to sort the data by the column or if the user click on the "Next page" button only the data will be refreshed in the grid. So one should create grid only once. If the next call will be done to already existing grid the call will be just ignored. It's the line of code (the internal property grid will be set here).
Additionally I would be included cache: false parameter at least in the second $.ajax call (the call inside of inside of renderImportItems).
Here you will find a demo which uses GridUnload.
I think the following steps should work:
Call the onRowSelect function. Set async: false for your ajax call (optional) and rowid should be kept as a global var
Reload the 2nd grid based on the primary key data from the 1st grid using This