JQuery table sorter pager with AJAX - sorting not working ok - tablesorter

I have a problem with JQuery table sorter pager plugin.
I am trying to use paging with AJAX call. It seems to work OK for most cases, but I am unable to get the sorting working.
The problem is that when the request is made it always looks like (assuming the code from example here):
http:/mydatabase.com?page=0&size=100&{sortList:col}
just like the last parameter {sortList:col} is never actually replaced with proper sorting column.
If I'm reading the example correctly the request for sortList = [[2,0],[3,0]] should actually look like:
http:/mydatabase.com?page=0&size=100&col[2]=0&col[3]=0
But in my case it never is. Also when I click on the header the sorting is performed, but no request is made.
Is there anything I am missing in the linked example?
EDIT
The first part of my problem has been solved by replacing the plugin with the newest version.
For the second part, I still cannot get a request when clicking (sorting) columns. The ajaxProcessing function is almost exactly the same as in the example here, only headers variable is renamed.
As Mottie sugested I am posting an example result from AJAX call (MS MVC JsonResult):
{
"total_rows":1,
"headers":["Id.","Date","User name","File name","status","Hash","Link"],
"rows":[
{
"Id":"21",
"ReceiveDate":"02.12.2012",
"UserName":"John Doe",
"FileName":"test.txt",
"Status":"",
"Hash":"4A71FD2E12F7E04ED0C04E17476BD1BC5F823C8F",
"FileNameLink":"\u003ca style=\"padding-left:10px\" href=\"GetFile?Id=21&fileName=test.txt\"\u003eSave\u003c/a\u003e"
}]
}
Regards

I apologize, but I didn't get a chance to thoroughly test the latest changes to the pager. Some of the code was written by someone else, so I might have missed something obvious.
Anyway, this might be the bug that is causing you problems. It resets the table to the first page after each sort... I'll have fixed in the next update.
In the pager plugin, lines 460-470 is this code:
.bind('filterEnd.pager sortEnd.pager', function() {
//Prevent infinite event loops from occuring by setting this in all moveToPage calls and catching it here.
if ($.data(table, 'pagerUpdateTriggered')) {
$.data(table, 'pagerUpdateTriggered', false);
return;
}
c.page = 0;
updatePageDisplay(table, c);
moveToPage(table, c);
changeHeight(table, c);
})
Just change the c.page = 0 to this:
if (e.type === 'filterEnd') { c.page = 0; }
and add an e to the function(e).

Related

if the original JS has many functions, how dart to initiate them?

after several rounds of research, I found there is no clear answer about the situation like below:
I have a js file called 'AAA.js', and there is simple code in side like this:
var AAA = {
listenForMenuLayer: function () {
console.log("menu initiated");
$('.nav-menu').on('click', function() { console.log("menu clicked")});
}
init: function(){
this.listenForMenuLayer();
}
};
And in the dart, I wrote like below (using 'dart:js'):
js.context['AAA'].callMethod('init');
Then, when I run it, everything looks fine, the "menu initiated" shows properly, which means the 'listenForMenuLayer' is initiated, but when click on the '.nav-menu', there is nothing happened. (I check many times, there is no spelling error or else)
My question is: Can Dart accept this kind of initiating of external JS event? or we should re-write those JS events at all, please advise, many thanks.
Updates:
I found that if we write the js code like above, the jquery will not be initiated properly, which means all the features begin with '$' will not be functional.
guys, I update it to using 'package:js/js.dart';
#JS('AAA.init')
external void aInit();
then some where, just simply call after including:
aInit();

Issue with paging when deleting object when using DeletObject (Entity Framework)

I'm having an issue with paging when I delete an object using the DeleteObject method (Entity Framework). The deletion works fine, as it is supposed to, but the page number is updated to the next page. I mean, if I'm deleting a record that is on page 3 of my search results, after the deletion is completed, the page number is updated to "page 4", even though the search results still correspond to page 3!
I have checked everything I could think of, but I can't figure out what is wrong. Has anyone had this problem before? (I'm pretty new to MVC, Razor, etc).
Thank you!
Thanks for the reply, Gert Arnold and Moeri; I posted in a hurry going to a meeting and didn't add enough details.
As I went to grab the code to post here, I found the solution:
function DeleteRecord(SubscriptionID){
var URL = "#Url.Content("~")PubSub/DeleteSubscriber/" + SubscriptionID;
if(confirm("Are sure you want to delete this record?")){
$.get(URL, function (data) {
if(data=="True")
{
$("#SubscriptionContainer"+SubscriptionID).show();
$("#Subscription"+SubscriptionID).html("<b><i>Delete Successful! Refreshing list please wait........</i></b>");
window.setTimeout(function () {
GetPage($("#PageNumber").val() - 1); //Adding the "- 1" solved the issue
}, 2000);
}
});
}
}
To fix the code all I did was replacing GetPage($("#PageNumber").val(), with GetPage($("#PageNumber").val() - 1);

How to delete a jqgrid row without reloading the entire grid?

I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.

ASP.net MVC - IE9 has an extra item with an empty key in forms collection

I have a bit of an odd problem, and I'm struggling to track down the root cause...
I have an ASP.net MVC site, and recently one of my colleagues started using IE9, and noticed a problem with one of the pages - it wasn't updating on click of save.
I figured that this would probably be a script issue, as there is a fair bit of jQuery used on this page, and it may still be, but:
If I submit this page in Chrome (or in IE8/7/6), then I get a forms collection with 11 items in it, as I would expect. If I submit the same page in IE9, I get an extra item at the end of the collection which has an empty string as key and an empty string as the value. This causes the call to UpdateModel() to not work (but not throw an exception) - none of these values are updated in my object, and the ModelState is still showing as valid.
So far, I've only found this one page, but I'm curious if anybody might know what is causing this?
Update 04/04/2011 - Narrowed down the culprit:
I removed bits of code until this worked and narrowed it down to some code in my validation. I use the jQuery validate plugin, and had the following as a submit handler (some redaction performed on names...):
submitHandler: function (form) {
var submitForm = true;
var newValue, originalValue;
newValue= $("#newValue").val();
originalValue= $("#originalValue").val();
if (newValue!= originalValue) {
//affectedValues is an array populated at the top of the page.
if ($.inArray(originalValue, affectedValues) != -1 &&
$.inArray(newValue, affectedValues) == -1) {
submitForm = confirm("Are you sure you want to do this");
}
}
if (submitForm) {
form.submit();
}
},
Removing this from the code (which I can thankfully do, as it's a bit of legacy code), seems to make this work, my empty item in the forms collection is gone. If anybody has any idea why this might have been happening, that'd be great.
Might be worth checking all the form fields in firebug to see if you have any un-named elements? I know I got caught out by the Select behaviour in IE before.
pdate 04/04/2011 - Narrowed down the culprit:
I removed bits of code until this worked and narrowed it down to some code in my validation. I use the jQuery validate plugin, and had the following as a submit handler (some redaction performed on names...):
submitHandler: function (form) {
var submitForm = true;
var newValue, originalValue;
newValue= $("#newValue").val();
originalValue= $("#originalValue").val();
if (newValue!= originalValue) {
//affectedValues is an array populated at the top of the page.
if ($.inArray(originalValue, affectedValues) != -1 &&
$.inArray(newValue, affectedValues) == -1) {
submitForm = confirm("Are you sure you want to do this");
}
}
if (submitForm) { form.submit(); }},
Removing this from the code (which I can thankfully do, as it's a bit of legacy code), seems to make this work, my empty item in the forms collection is gone. If anybody has any idea why this might have been happening, that'd be great.
I had some problems with my MVC sites due to the caching features introduced for IE9. My work around was to disable caching in my controller by adding an attribute:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class FaxController : Controller
FF, Chrome, Opera sends just value of FORM elements (button, input,..) with NAME.
IE always sends elements to server, even Submit with empty name and value which causes error.
So to be sure, always name elements.

ie9: annoying pops-up while debugging: "Error: '__flash__removeCallback' is undefined"

I am working on a asp.net mvc site that uses facebook social widgets. Whenever I launch the debugger (ie9 is the browser) I get many error popups with: Error: '__flash__removeCallback' is undefined.
To verify that my code was not responsible I just created a brand new asp.net mvc site and hit F5.
If you navigate to this url: http://developers.facebook.com/docs/guides/web/#plugins you will see the pop-ups appearing.
When using other browsers the pop-up does not appear.
I had been using the latest ie9 beta before updating to ie9 RTM yesterday and had not run into this issue.
As you can imagine it is extremely annoying...
How can I stop those popups?
Can someone else reproduce this?
Thank you!
I can't seem to solve this either, but I can at least hide it for my users:
$('#video iframe').attr('src', '').hide();
try {
$('#video').remove();
} catch(ex) {}
The first line prevents the issue from screwing up the page; the second eats the error when jquery removes it from the DOM explicitly. In my case I was replacing the HTML of a container several parents above this tag and exposing this exception to the user until this fix.
I'm answering this as this drove me up the wall today.
It's caused by flash, usually when you haven't put a unique id on your embed object so it selects the wrong element.
The quickest (and best) way to solve this is to just:
add a UNIQUE id to your embed/object
Now this doesn't always seem to solve it, I had one site where it just would not go away no matter what elements I set the id on (I suspect it was the video player I was asked to use by the client).
This javascript code (using jQuery's on document load, replace with your favourite alternative) will get rid of it. Now this obviously won't remove the callback on certain elements. They must want to remove it for a reason, perhaps it will lead to a gradual memory leak on your site in javascript, but it's probably trivial.
this is a secondary (and non-optimal) solution
$(function () {
setTimeout(function () {
if (typeof __flash__removeCallback != "undefined") {
__flash__removeCallback = __flash__removeCallback__replace;
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
});
function __flash__removeCallback__replace(instance, name) {
if(instance != null)
instance[name] = null;
}
I got the solution.
try {
ytplayer.getIframe().src='';
} catch(ex) {
}
It's been over a months since I last needed to debug the project.
Facebook has now fixed this issue. The annoying pop-up no longer shows up.
I have not changed anything.

Resources