Jump to content
mongoose00318

jQuery UI Dialog Not Working with Tabulator or Handsontable

Recommended Posts

I've got a big table of data and I've got 5 columns with bootstrap buttons that when clicked open a dialog box which allows the user to affect an order status. The code works fine until it's put into Handsontable...I couldn't get that to work and it had a lot more functionality than I really needed since all I really need is pagination and an ability to search the data with an ajax search.

I switched over to Tabulator hoping the issue could be solved. But it's doing the exact same thing. If I inspect the code and copy one of the pre-generated buttons out of the table and paste it outside the tables div container; the dialog opens just fine. I don't see much on the web about trying to do this either. 

Here is a couple screenshots: 

If I click the two buttons up top, which are copied right from the source code, they work fine. Any of the buttons in the table don't work (not counting the ones which are disabled).

Here's the code which opens the dialog:

		//on document load
		$(document).ready(function() {
			$( '#datepicker-container' ).hide(); //hide datepicker-container
			$( '#delay-container' ).hide(); //hide delay-container
			$( '#finish-container' ).hide(); //hide finish-container
			$( '#datepicker' ).datepicker(); //initialize datepicker
			
			//disable change order status dialog by default
			$('#change_order_status_dialog').dialog({
				autoOpen:false,
				width:600
			});

			//open change order status dialog when user clicks change status button(s)
			$('.btn_change_order_status_dialog').click(function(){
				//get data from button
				var from_order_id 			= $(this).data('order-id'); //get order id
				var from_order_number 		= $(this).data('order-number'); //get order number
				var from_order_enterprise	= $(this).data('order-enterprise'); //get enterprise
				var from_dept_code			= $(this).data('dept-code'); //get dept code
				
				//dialog box data containers
				var to_order_id 			= $('h5 span#order_id'); //get order id
				var to_order_number 		= $('h5 span#order_number'); //get order number
				var to_order_enterprise		= $('h5 span#enterprise'); //get enterprise
				var to_dept_code			= $('h5 span#dept_code'); //get dept code
				
				//update values in dialog box before showing user
				to_order_id.text(from_order_id); //set order id
				to_order_number.text(from_order_number); //set order number
				to_order_enterprise.text(from_order_enterprise); //set enterprise
				to_dept_code.text(from_dept_code); //set dept code
				
				//hide all containers
				$( '#datepicker-container' ).hide(); //hide datepicker-container
				$( '#delay-container' ).hide(); //hide delay-container
				$( '#finish-container' ).hide(); //hide finish-container
				
				//open dialog box
				$('#change_order_status_dialog').dialog('open');
			});

 

Share this post


Link to post
Share on other sites

Okay...I was on the right track. I thought it had to do with my event binding. I fixed it like so...

$('body').on('click', '.btn_change_order_status_dialog', function() {
			//get data from button
			var from_order_id 			= $(this).data('order-id'); //get order id
			var from_order_number 		= $(this).data('order-number'); //get order number
			var from_order_enterprise	= $(this).data('order-enterprise'); //get enterprise
			var from_dept_code			= $(this).data('dept-code'); //get dept code

			//dialog box data containers
			var to_order_id 			= $('h5 span#order_id'); //get order id
			var to_order_number 		= $('h5 span#order_number'); //get order number
			var to_order_enterprise		= $('h5 span#enterprise'); //get enterprise
			var to_dept_code			= $('h5 span#dept_code'); //get dept code

			//update values in dialog box before showing user
			to_order_id.text(from_order_id); //set order id
			to_order_number.text(from_order_number); //set order number
			to_order_enterprise.text(from_order_enterprise); //set enterprise
			to_dept_code.text(from_dept_code); //set dept code

			//hide all containers
			$( '#datepicker-container' ).hide(); //hide datepicker-container
			$( '#delay-container' ).hide(); //hide delay-container
			$( '#finish-container' ).hide(); //hide finish-container

			//open dialog box
			$('#change_order_status_dialog').dialog('open');
		});

If I were to reload the data in that table with ajax on an interval will my events become unbinden again? If so, how can I rebind them?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.