How to retain jQuery settings post a server refresh

[kotinkarwak]

Put together a short jing video to show the query.
http://screencast.com/t/zypjRZsWBL
Regards

[Jon]

I think the problem is that you are using the document.ready event to set up your jquery bindings. This runs only when the page is first loaded. I think you are also using Ajax as well - click on Form Properties on the form editor toolbar and look on the General tab. So what happens is that when you click on something which sends a request to the server (retrieve previous application?) the page is refreshed using Ajax (but not replaced) and your jquery bindings are lost. This combination of document.ready and Ajax frequently causes problems.

The solution is to use the ready event on one of the controls on the page instead of document ready. For example you might move the date picker binding to the date field that it is working on. Or you might move all the jquery code to the Page Panel Control containing all your fields. To configure this, right click on the control in question and select Html Element Properties. In this dialog, provide an id (this is required to bind the event) then add a jquery ready event with your code.

P.S. I liked the video!

[Steve James]

The other way is to keep it on the document ready but have a flag to set it only on initial load eg get/set field value.

We've occasionally had issues where we know we've attached html element properties but finding the actual element can be time consuming.

Hopefully v5 will make it easier to see in the tree what has got 'stuff' attached to it.

Thanks

[kotinkarwak]

Thanks Jon, Steve,
Steve, please expand your answer on how you do this sine it appears document ready only runs one when I try.

[Steve James]

Hi kotinkarwak, sorry but I think I misunderstood the issue, we've put the flag on in situations where the code was called multiple times.

[Wai]

Hi,

Instead of using the standard JQuery document.ready which will only execute when the whole page is refreshed, you can use the Ebase Ready event.
Each control, for example the Page control, or a field control has a JQuery Ready event which can execute your code when the control is refreshed by Ebase (when form is using Ajax).

Therefore after Ebase server execution, when a control is refreshed, it will fire the Ready event on the control.

You can place your datepicker JQuery code into the Page control Ready event.

For example:

Code: Select all

$(".datepicker2").datepicker({
		showOn: "button",
		buttonText: 'Select Date',
		buttonImage: "images/calendar.gif",
		buttonImageOnly: true,
		dateFormat: 'dd/mm/yy',
		showButtonPanel: false,
		changeMonth: true,
		changeYear: true
	});

[kotinkarwak]

Implementing jsTree and utilising a tab control. As per this thread, I have added the initialisation of the jsTree from within the controls "onready" setting but does not appear to be working.

Initial load of the page correctly sets the tree in TAB A, but if you navigate to another tab and return, the setting is not being done again.

v501 export file
https://mega.nz/#!jMRyQYhI!mtKht7hklZkz ... b9iWT1p_9Y

[Wai]

Try putting the initialisation on the Page control's Ready event.

[kotinkarwak]

Hi,
Thanks Wai, works with the pages onready control. just for info: need to remove all entries elsewhere that does this same operation i.e. I had the same code added to the the pages onready in the tab control itself and that caused whole operation to fail.

a side note

i understand you can chain "methods" in javascript api's. Had untold inconsistencies when running my ebase code once I run this bit of code as chained. After unchaining, all works ok. Might help someone when they encounter some errors, try unchaining the code and see what happens

Code: Select all

jQuery('#jstree_demo_div').jstree().on("changed.jstree", function (e, data) {
  console.log(data.selected);