Slow Response in Javascript checkbox

[kikz4life]

My problem is below. I'm trying to optimize a website. The problem is when i check/unchecked a checkbox it took 5-6sec. Could anyone help me to rewrite this code.

 

function checkAccess(celDiv,id)
{
var celValue = $(celDiv).html();

if (celValue==1) $(celDiv).html("<input type='checkbox' value='"+$(celDiv).html()+"' checked disabled>")
else $(celDiv).html("<input type='checkbox' value='"+$(celDiv).html()+"' disabled>")	


$(celDiv).click
(
 	function()
	{
		$('input',this).each(
			 function(){

				tr_idx = $('#detFlex1 tbody tr').index($(this).parent().parent().parent());	
				td_idx = $('#detFlex1 tbody tr:eq('+tr_idx+') td').index($(this).parent().parent());
				td_last = 13;
				if ($(this).attr('checked') == true) 
				{
					df[0].rows[tr_idx].cell[td_idx] = 1;

					if (td_idx==3) 
					{
						for(var td=td_idx+1; td<=td_last;td++)
						{
							df[0].rows[tr_idx].cell[td] = 1;
						}

						df[0].rows[tr_idx].cell[2] = 1;
					}

					if (td_idx > 3)
					{
						df[0].rows[tr_idx].cell[2] = 1;
					}

				}
				else 
				{
					df[0].rows[tr_idx].cell[td_idx] = 0;

					if (td_idx==2) 
					{
						for(var td=td_idx+1; td<=td_last;td++)
						{
							df[0].rows[tr_idx].cell[td] = 0;
						}
					}
					else if (td_idx==3) 
					{
						for(var td=td_idx+1; td<=td_last;td++)
						{
							df[0].rows[tr_idx].cell[td] = 0;
						}
					}	

					if (td_idx > 3)
					{
						df[0].rows[tr_idx].cell[3] = 0;
					}
				}

				$('#detFlex1').flexAddData(df[0]);
				$('.toolbar a[title=Edit Item]').trigger('click');
			 });	
	}
);
}

 

Checkbox Output

$('#detFlex1').flexigrid
(
{
	autoload: false,
	dataType: 'json',
	height: 300,
	url: root + mod + '/detaillistview',
	colModel : [
		{display: '', name : '', width : 1, align : 'left'}
		,{display: '<?=lang("access_modules")?>', name : 'module_name', width : 150, align : 'left'}
		,{display: '<?=lang("access")?>', name : 'm_access', width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("full_access")?>', name : 'full_access', width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("access_new")?>', name: 'm_new', width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("access_edit")?>', name : 'm_edit' , width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("access_delete")?>', name : 'm_delete', width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("access_cancel")?>', name : 'm_cancel', width : 50, align : 'center', process: checkAccess}
		,{display: '<?=lang("access_print")?>', name : 'n_print', width : 50, align : 'center', process: checkAccess}	
		,{display: '<?=lang("access_approve")?>', name : 'n_approve', width : 50, align : 'center', process: checkA[b][/b]ccess}	
		,{display: '<?=lang("access_disapprove")?>', name : 'm_disapprove', width : 50, align : 'center', process: checkAccess}	
		,{display: '<?=lang("serve")?>', name : 'm_serve', width : 50, align : 'center', process: checkAccess}	
		,{display: '<?=lang("accounts_affected")?>', name : 'm_accounts_affected', width : 50, align : 'center', process: checkAccess}	
		,{display: '<?=lang("reference")?>', name : 'm_reference', width : 50, align : 'center', process: checkAccess}	
		,{display: '', name : 'module_id', hide:true}
		,{display: '', name : 'access_level_id', hide:true}
		],
	showToggleBtn: false,
	singleSelect: true,
	preProcess: df_load_1,
	usepager: true,
	useRp: true,
	rp: 10,
	sortname: "access_level_id",
	sortorder: "asc",
	resizable: false
}
);

 

 

I tried to simplify the code or modify it but nothing works. grrrRr. Hope anyone can help me with this...

[Psycho]

Well, without understanding the whole process it is a little difficult to provide a lot of feedback. but, I notice that the first block of code has functions nested two levels deep. If you are running that function at any time other than initial page load, that is where I would start. In most instances you should not need to redefine functions. You can just change the parameters used when calling a function to change the behavior.

[kikz4life]

ive already done that mjdamato. could anyone help me with this. im stuck to it. i'll attach the whole code.

 

thanks

-dean

 

[attachment deleted by admin]

[Psycho]

You say you've already done that, but the "whole code" you just posted shows the same process of defining functions inside of functions. Every time the function checkAccess() is called you are again redefining functions. If that function is called (or the first sub-function which is assigned to a click event) you are redefining functions dynamically. Not only that but the click function is iterrating through every input element on the page and redefining a function for each element. That is most likely the cause of your problem.

 

I don't work with JQuery and I can't tell what the functinos actually do without the HTML content, but I know that the logic is not efficient.