Develop Reference

Code gets stuck in infinite loop unless I'm debugging it / set a breakpoint

I have a form with a number of DropDownList controls and a single TextBox. Depending on the selected values in the DropDownList controls, the software should either:
Sum the DDL's values and put it in the textbox, and make it read-only
Enable the textbox for user input
When they tab out of the textbox, it validates their input to make sure it's a valid value (must be X, Y, or Z and if it's Z it has some 'extra' logic).
Each of my DropDownList controls calls a method, SumValues(), when its selected value changes.
SumValues() performs the logic dictated in the bullets above. After it assigns the sum to the textbox, or enables it for free-form user data entry, it calls BlurMyTextbox (which is also assigned to the textbox's onblur event / attribute) because when this value changes, it will modify another set of controls depending on the textbox's value.
BlurMyTextbox() does the following:
function BlurMyTextbox()
{
var cmb = $("#cmbV14").data("kendoDropDownList"); //get reference to 'child' drop down
var val = $("#txtMyTextbox").val(); //get this value
if (val == 'x' || val == 'y')
{
//set data source on child drop down if textbox value is valid
// this condition occurs when SumValues() auto-enters the value
// this functionality works fine
var OneAndDash = [{ "Text": "1", "Value": "1" }, { "Text": "-", "Value": "-" }];
cmb.dataSource.data(OneAndDash);
}
else
{
if (val != someGlobalVar && someOtherGlobalVar > 0)
{
// if value is outside of a particular range, show error
var template = kendo.template(validationTemplate)({
text: 'Invalid input; field must be X, Y, or Z'
, buttons: [{ id: 'btnOk', text: 'Ok', click: 'ClosePopup("Validation");' }]
});
OpenWindow('Validation', 'Information', { content: template, actions: '', confirm: true, draggable: true });
//clear textbox and give it focus so they enter the correct value
$("#txtMyTextbox").val('');
$("#txtMyTextbox").focus();
}
// assign different datasource to dependent drop down
var ZeroToOneAndDashData = [{ "Text": "0", "Value": "0" }, { "Text": "1", "Value": "1" }, { "Text": "-", "Value": "-" }];
cmb.dataSource.data(ZeroToOneAndDashData);
// this drop down does not effect the textbox in any way
// nor does it call BlurMyTextbox or anything like that
}
}
So it checks the value assigned to it, then it does either:
Assigns a data set to the child control
Conditionally shows an error and clears + re-focuses the textbox, and assigns a different data set to the child control
When I run my software, as soon as I change a value in any of the dropdowns that calls SumValues() (which in turn calls BlurMyTextbox), it repeatedly shows the popup over and over and I can't click it to dismiss it. If I set a breakpoint on the OpenWindow call in BlurMyTextbox, it only pops up once and I can dismiss it and the software behaves as expected.
I see no indication in the Call Stack as to what could be causing this infinite loop. There's got to be some sort of logical error, but I can't identify it...

Naturally, as I finally decide to ask the question I find my solution:
Displaying the popup causes the Textbox to lose focus, which calls Blur, which sees the value is invalid and shows the popup... which causes the textbox to lose focus etc. etc.
Removing the $("#txtMyTextBox").focus() call fixes this behavior, as it no longer tries to alternate between focusing on the textbox and the popup.

tablesorter does not work when i add more columns

I have a table where i sort on the second column. by default i have 8 columns
and the rows can vary, depending on how many things i add.
The sorting works when i have the standard 8 columns but when i mark a checkbox and save which indicates that more info will be generated dynamiclly in my table then the sorting does not work anymore.
code:
$.tablesorter.addParser({
id: 'input_text',
is: function (s) {
// return false so this parser is not auto detected
return false;
},
format: function (s) {
return s;
},
type: 'text'
});
// Tablesorter
if ($(".attendanceList tbody tr").length > 0) {
$(".attendanceList").tablesorter({ headers: { 1: { sorter: false },
2: { sorter: 'input_text' },
3: { sorter: false },
4: { sorter: false },
5: { sorter: false },
6: { sorter: false },
7: { sorter: false },
8: { sorter: false },
9: { sorter: false },
10: { sorter: false }
},
sortList: [[2, 0], [0, 0]]
});
}
I used firebug to see what the problem was and my "s" paramater(check above) is allways an empty string ("").
step by step:
i mark a checkbox and press a save button. when that is done i press on another button that triggers a popup and gets me my table, now the table has 10 columns but the second column will no longer perform the sort as it did before.
Have i missed something? I have read up on the tablesorter plugin and I have not found anyone with similar issues,
Thanks!

I see two issues with what you are describing; and hopefully you're using my fork of tablesorter.
1) To get the value of a checkbox, you'll need to search the cell for an input and check for updates. Note this parser will work with the original tablesorter, but it won't update (using the updateCell method) properly. Note this code is from the parser-input-select.js file, and can be seen working in this demo.
// Custom parser for including checkbox status if using the grouping widget
// updated dynamically using the "change" function below
$.tablesorter.addParser({
id: "checkbox",
is: function(){
return false;
},
format: function(s, table, cell) {
// using plain language here because this is what is shown in the group headers widget
// change it as desired
var $c = $(cell).find('input');
return $c.length ? $c.is(':checked') ? 'checked' : 'unchecked' : s;
},
type: "text"
});
// update select and all input types in the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'), instead of $('table')
$(window).load(function(){
// resort the column after the input/select was modified?
var resort = true,
// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
alreadyUpdating = false;
$('table').find('tbody').on('change', 'select, input', function(e){
if (!alreadyUpdating) {
var $tar = $(e.target),
$table = $tar.closest('table');
alreadyUpdating = true;
$table.trigger('updateCell', [ $tar.closest('td'), resort ]);
// updateServer(e, $table, $tar);
setTimeout(function(){ alreadyUpdating = false; }, 10);
}
});
});
2) The only thing that isn't clear from the question is if the table is being built dynamically within the popup, or if the table with the checkbox is being modified, then copied to a popup?
Note that the above method only updates the state of the checkbox within the table. It won't include any dynamically added columns to an already initialized table. In that case, you'll need to use the updateAll method, but it will need to be triggered after the table contents have been updated.
$table.trigger('updateAll', [ resort ]);
If you could share the code that is run between the time of "saving" your checkbox choices and initializing the popup, it would help make the issue more clear.
Update: to parse an input, you need to get the value of the input element. The s within the parser format function only contains the text found within the table cell. When there is only an input within the table cell, no text is returned because the input element doesn't contain text, it has a value. So instead of using the "checkbox" parser I shared above, use this "input" parser; but as stated before, this parser will work with the original version of tablesorter (v2.0.5) but will not work properly if the "updateCell" method is used.
$.tablesorter.addParser({
id: "inputs",
is: function(){
return false;
},
format: function(s, table, cell) {
return $(cell).find('input').val() || s;
},
type: "text"
});
This parser also requires the code within the $(window).load(...) shown above to allow updating the parsed input for sorting when the user changes it.

After inserting the dynamically-generated content, you just need to trigger an update. It looks like your table is identified with the "attendanceList" class, so the command after the dynamic update would be:
$(".attendanceList").trigger("update");

I need sme help automating jqGrid filters, please

Okay, so in a nutshell, what I need to do is to automatically apply a set of sorting criteria and data filters to the jqGrid when it loads. The intent is that the user will start with about 10 pre-filled filters and then, if they so choose, they can alter those filters or the sorting however they see fit.
So far, with much Google-ing, trial and error and sweat, I have the following working:
-> I can load/save the sort column & sort order in a session cookie.
-> I can load the search dialog with pre-defined search filters. After the grid loads, I can open the modal dialog and see the proper filters and if I click "Find" the appropriate data is posted to the server and the right results are returned to the screen.
The thing that is biting me in the butt right now is, I think, the easy part, but it escapes me. I can't seem to do either of the following:
( A ) The ideal thing would be if I could attach these filters to the grid and it's post data in advance of the initial load so that there is only a single trip to the server.
( B ) The workable solution, though less ideal, would be for the grid to load the first page of the unfiltered data first, and then apply the filters and re-query the server for the filtered data.
Since I can manually click the "find" button today and it works, I thought that "B" would be a good next-step. So, in my gridComplete function, I have the following code:
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
NOTE: "clearFilter" and "addFilter" are extension functions I have added to jqGrid to simplify adding and removing filters on the grid. They work exactly as desired at this point.
As you can see with those last three lines of code, I have tried using the built-in function, as well as going after the find button directly and even just forcing the entire grid to refresh. Either way, there is no attempt by the grid to go get new data (I am using Fiddler to watch for it).
What am I doing wrong in trying to force the grid to reload with the new filters?
And, if you know how, can you give me some direction on how to get the initial load of the grid to respect these filters?
TIA
Tony
Here is the full grid configuration (minus the extra columns and some colModel "cruft"):
jQuery('#AccountGrid').jqGrid({
url: '<my URL>',
width: 950,
height: 330,
shrinkToFit: 'true',
datatype: 'json',
mtype: 'POST',
multiselect: true,
multiboxonly: true,
multiselectWidth: 20,
colNames: [
'Account ID'
],
colModel: [
{ name: 'AccountID', index: 'AccountID', sortable: false, hidden:false, search:true }
],
gridComplete: function () {
// add the search criteria to the grid
if (initialLoad == true){
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
initialLoad = false;
}
},
jsonReader: {
repeatitems: false,
id: 'AccountID'
},
pager: jQuery('#AccountPager'),
rowNum: 50,
rowList: [10, 15, 25, 50, 75, 100],
onSortCol : function (sortname, indexColumn, sortorder){
$.cookie('AccountGrid_sortname', sortname);
$.cookie('AccountGrid_sortorder' , sortorder);
},
sortname : $.cookie('AccountGrid_sortname') ? $.cookie('AccountGrid_sortname') : 'AccountID',
sortorder: $.cookie('AccountGrid_sortorder') ? $.cookie('AccountGrid_sortorder') : 'asc',
viewrecords: true,
imgpath: ''
});
$('#AccountGrid').jqGrid('navGrid','#AccountPager',
{ view: false, add: false, edit: true, del: false,
alertcap:'No Account Selected',
alerttext: 'Please select an Account from the grid before performing this operation.',
editfunc: showAccountEditDialog },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{}
);
And, by request, here is the code I have for add/clear filter:
/*
This is a grid extension function that will insert a new filter criteria
on the specified grid with the provided field, operation & data values
*/
(function ($) {
jQuery.jgrid.addSearchFilter =
{
// get/set the parameters
addFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
field: '',
data: '',
op: ''
}, options || {});
// get the column model object from the grid that matches the provided name
var colModel = grid.getGridParam('colModel');
var column;
for (var i = 0; i < colModel.length; i++) {
if (colModel[i].name == options.field){
column = colModel[i];
break;
}
}
colModel = null;
if (column){
// if the last filter has a value, we need to create a new one and not overwrite the existing ones
if ($('#fbox_' + options.gridName + ' .sf .data input').last().val()){
$('#fbox_' + options.gridName).searchFilter().add();
}
// assign the selections to the search dialog
$('#fbox_' + options.gridName + ' .sf .fields select.field').last().val(column.index).change();
$('#fbox_' + options.gridName + ' .sf .data input').last().val(options.data);
$('#fbox_' + options.gridName + ' .sf .ops select.default').last().val(options.op).change();
}
}
}
})(jQuery);
jQuery.fn.extend({ addFilter: jQuery.jgrid.addSearchFilter.addFilter });
/*
This is a grid extension function that will clear & reset the filter criteria
*/
(function ($) {
jQuery.jgrid.clearSearchFilter =
{
// get/set the parameters
clearFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
pagerName: ''
}, options || {});
// clear the filters and "pop" the dialog to force the HTML rendering
$('#fbox_' + options.gridName).searchFilter().reset();
$('#' + options.pagerName + ' .ui-icon-search').click();
$('#fbox_' + options.gridName).searchFilter().close();
}
}
})(jQuery);
jQuery.fn.extend({ clearFilter: jQuery.jgrid.clearSearchFilter.clearFilter });

First of all because you don't post the code which define the jqGrid I make some assumption myself. I try to base on indirect information from your question.
1) I suppose that you use server side datatype parameter of jqGrid like 'json' or 'xml'.
2) You don't use loadonce:true parameter. In general if would be possible to make server reload from the grid having loadonce:true, but in the case you have to reset the value of datatype parameter to initial value (one from the value 'json' or 'xml').
The following three old answer: this (in case of single value searching) and this (in case of advanced searching or the toolbar searching with additional parameter stringResult:true) will give you enough information about setting the searching filters and reloading the grid corresponds to the new filters. Another answer shows how to clear the searching filter if it is no more needed.
Loading of the grid at the first time with the filters is another question. It can be very easy implemented. You should just use datatype:"local" instead of datatype:"json" or datatype:"xml" which you really need. In the case the url parameter of jqGrid will be just ignored at the first load and jqGrid send no request to the server. Then you set the filters like you as need and only then use $("#youGridId").trigger("reloadGrid");
The reason why the reloadGrid didn't work in your case I could not know exactly, but I suppose that you didn't set the search:true parameter of the jqGrid which one confuses frequently with the _search property of the postData parameter (see here).

How to disable tabs in JqGrid at runtime?

Two Default Grids Defenition:
initialise(){
$("#ExpenseTable").jqGrid({
datatype : "local",
mtype : 'GET',
colModel : [ {name:'expnsId',label:'ID', width:150 },
{name:'userName',label:'NAME', width:150 },
{name:'catName',label:'CATEGORY', width:150 },
{name:'date',label:'DATE', width:150 },
{name:'amount',label:'AMOUNT', width:150 },
{name:'status',label:'STATUS', width:150 }],
pager : '#ExpPager',
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'invid',
sortorder : 'desc',
viewrecords : true,
autowidth : false,
caption : 'Expenses Details',
onSelectRow : function(expnsId) { dispExpensData(expnsId); }
});
$("#tabs").tabs();
getTokens();//Gets the tokens for the logged in user.
refreshExpenseGrid();//Populates data to the grid
dispLeaveGrid();// It ll call the next default grid
}
}
$("#LeaveTable").jqGrid({
datatype : "local",
mtype : 'GET',
colModel : [ {name:'leaveId',label:'ID', width:150 },
{name:'userName',label:'NAME', width:150 },
{name:'fdate',label:'DATE', width:150 },
{name:'tdate',label:'DATE', width:150 }
{name:'status',label:'STATUS', width:150 }],
pager : '#ExpPager',
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'invid',
sortorder : 'desc',
viewrecords : true,
autowidth : false,
caption : 'Leave Applications',
onSelectRow : function(leaveId) { displeaveData(leaveId); }
});
refreshLeaveGrid();//Populates data to the grid
securedUI();//This ll call the below function, to check whether the remaining tabs can be visible or not
Secured UI Function:
function securedUI(){
var secToken = "DELETEUSER";
if(!checkRoleToken(secToken)){//If users dont have token to delete user, the buttons ll be disabled
$('#expDelete').attr('disabled', 'disabled');
$('#lveDelete').attr('disabled', 'disabled');
$('#delUser').attr('disabled', 'disabled');
$('#roleDel').attr('disabled', 'disabled');
$('#tokenDel').attr('disabled', 'disabled');
}
var secToken= "VIEWUSER";
if(checkRoleToken(secToken)){
showUserdetails();//3rd Grid Defn:Contains the table definition for user grid.
initialiseRole();//4th Grid Defn: Role grid
showtokens();//5th Grid Defn: token grid
}
Check Token:
function checkRoleToken(newToken){
for( var i = 0; i<tokens.length; i++ ){
var token = tokens[i];//Tokens is like cache, which contains all the tokens that are assigned for the current user.
if(newToken == token.tokenName){
return true;
}
}
return false;
}
The html page:
<script type="text/javascript">
$(document).ready(function() {
initialise();
});
</script>
The LeaveTable is 2nd grid and i have 3 more grids. But i dont want to show them to all of the users, instead admin users should able to see them. Tokens are the key to find the user have the right to do any operation in the Application. Tokens, that are assigned for the user will be loaded to a client-Side Cache like Array tokens.
Every function like ADD, DELETE, UPDATE & VIEW have their tokens at the start of the function that stored in a variable. That token variable will sent to CheckToken() as argument. There it will check that token against the token cache. It ll return true or false. The operation will cancelled or continued according to that result.
In the above code, at the end of the LeaveTable grid defenition, you can see a function call securedUI();. Inside that function i am doing two things. 1.Disabling Delete Buttons, 2.Disabling the 3rd, 4th & 5th grids, for those who dont have tokens DELETEUSER & VIEWUSER.
Actually what i am getting now is, the 3rd, 4th & 5th grids are not getting displayed for those who have token VIEWUSER. Look at the functions securedUI() & checkToken(), what they should do!!! securedUI() have VIEWUSER token and the current user also, so the checkToken() should return true, so it should get into the if block and execute the functions calls inside the if block. But its not doing it. I cant able to get any clue about where i am going wrong.
So, i turned on the firebug and checked it step by step. Magically, now its going into the if block and shows the grid for admin users. Now i felt that it worked then i turned turned off the firebug and reloaded the page again. Ooops, again that 3 remaining grids are not displaying. Can you now able to get an idea about my problem!!!
Any suggestions!!!

It seems to me that you should just place all your JavaScript code inside of jQuery(document).ready handle: jQuery(document).ready(function() {/* place your code here */});
If you do use this handle, please post more full code of your example inclusive full HTML code. You can reduce the code example to have example more compact. Important is only that the problem stay in the code and everyone can reproduce the problem.

ExtJS Change Event Listener failing to fire

I was asked to post this as a question on StackOverflow by http://twitter.com/jonathanjulian which was then retweeted by several other people. I already have an ugly solution, but am posting the original problem as requested.
So here's the back story. We have a massive database application that uses ExtJS exclusively for the client side view. We are using a GridPanel (Ext.grid.GridPanel) for the row view loaded from a remote store.
In each of our interfaces, we also have a FormPanel (Ext.form.FormPanel) displaying a form that allows a user to create or edit records from the GridPanel. The GridPanel columns are bound to the FormPanel form elements so that when a record is selected in the GridPanel, all of the values are populated in the form.
On each form, we have an input field for the table row ID (Primary Key) that is defined as such:
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true
} /* other fields removed */
];
So, that is all fine and good. This works on all of our applications. When building a new interface, a requirement was made that we needed to use a third-party file storage API that provides an interface in the form of a small webpage that is loaded in an IFrame.
I placed the IFrame code inside of the html parameter of the FormPanel:
var editForm = new Ext.form.FormPanel({
html: '<div style="width:400px;"><iframe id="upload_iframe" src="no_upload.html" width="98%" height="300"></iframe></div>',
/* bunch of other parameters stripped for brevity */
});
So, whenever a user selects a record, I need to change the src attribute of the IFrame to the API URL of the service we are using. Something along the lines of http://uploadsite.com/upload?appname=whatever&id={$id_of_record_selected}
I initially went in to the id field (pasted above) and added a change listener.
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true,
listeners: {
change: function(f,new_val) {
alert(new_val);
}
}
} /* other fields removed */
];
Nice and simple, except that it only worked when the user was focused on that form element. The rest of the time it failed to fire at all.
Frustrated that I was past a deadline and just needed it to work, I quickly implemented a decaying poller that checks the value. It's a horrible, ugly hack. But it works as expected.
I will paste my ugly dirty hack in an answer to this question.

"The GridPanel columns are bound to
the FormPanel form elements so that
when a record is selected in the
GridPanel, all of the values are
populated in the form."
As I understand it from the quote above, the rowclick event is what actually triggers the change to your form in the first place. To avoid polling, this could be the place to listen, and eventually raise to your custom change event.

Here is the ugly hack that I did to accomplish this problem:
var current_id_value = '';
var check_changes = function(offset) {
offset = offset || 100;
var id_value = document.getElementById('id_field').value || '';
if ( id_value && ( id_value != current_id_value ) ) {
current_id_value = id_value;
change_iframe(id_value);
} else {
offset = offset + 50;
if ( offset > 2500 ) {
offset = 2500;
}
setTimeout(function() { check_changes(offset); }, offset);
}
};
var change_iframe = function(id_value) {
if ( id_value ) {
document.getElementById('upload_iframe').src = 'http://api/upload.php?id=' + id_value;
} else {
document.getElementById('upload_iframe').src = 'no_upload.html';
}
setTimeout(function() { check_changes(100); }, 1500);
};
It's not pretty, but it works. All of the bosses are happy.

If you took a moment to read the source, you would see that the Ext.form.Field class only fires that change event in the onBlur function