Window Initialization Best Practice

[realtekParticipant]

Hi,

I have a window called ‘#window0’.

This window by default is closed when the page loads.

The user can click a link which will open the window and then when they click a submit button on the Window it is then closed.

 $('#lnk_form').click(function(event){
		 $('#window0').jqxWindow('open');
		 $('#btn_selectForm').jqxButton({ width: '80', theme: theme });
		 $('#btn_selectForm').on('click', function () { 
			var selectedID = $("#combo_selectForm").jqxDropDownList('getSelectedItem').value; 
			var selectedFormTitle = $("#combo_selectForm").jqxDropDownList('getSelectedItem').label; 
			
			$('#jqxTabs').jqxTabs('addLast', 'Form: ' + selectedFormTitle, '<div id=new' + index + ' style="height:100%"></div>');
			loadTabData('./admin/form.php?seq=' + selectedID,index);
			//Destroy Second Window on close
			$("#new" + index).on('remove', function (event) {
			$("#window").jqxWindow('destroy');		    
		    });    
			
			//End Destroy
			index++;
			$('#window0').jqxWindow('close');
		});
		

So basically, when the user selects an item in my dropdown, the #window0 is closed and it adds a tab on the jqxTabs with the index number.

The problem is my code is being triggered again when the user clicks the link a second time, which is assigning a second ‘onClick’ event. – resulting in two tabs.

The onClick event needs setting up at this point because of the variables are only available at that time.

Any idea’s? Thanks

[realtekParticipant]

Basically I want the code to fire but almost ‘replace’ the current onClick event, not add a second one 🙂

[DimitarParticipant]

Hello realtek,

To achieve this, please call the jQuery .off() method before the .on(), i.e.:

$('#lnk_form').click(function(event){
		 $('#window0').jqxWindow('open');
		 $('#btn_selectForm').jqxButton({ width: '80', theme: theme });
   		 $('#btn_selectForm').off("click");            
		 $('#btn_selectForm').on('click', function () { 
			var selectedID = $("#combo_selectForm").jqxDropDownList('getSelectedItem').value; 
			var selectedFormTitle = $("#combo_selectForm").jqxDropDownList('getSelectedItem').label; 
			
			$('#jqxTabs').jqxTabs('addLast', 'Form: ' + selectedFormTitle, '<div id=new' + index + ' style="height:100%"></div>');
			loadTabData('./admin/form.php?seq=' + selectedID,index);
			//Destroy Second Window on close
			$("#new" + index).on('remove', function (event) {
			$("#window").jqxWindow('destroy');		    
		    });    
			
			//End Destroy
			index++;
			$('#window0').jqxWindow('close');
		});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[realtekParticipant]

Brilliant thank you Dimitar 🙂 I didn’t realise you could remove an event handler like that.

Perfect, thank you it resolved my issue

[Author]

Posts