How to detect changes in entry field?

[t4nu]

Hi,
I have several pages in a form, and within each form I have edit controls.
I want to detect each change on each edit control, how to do it?
TIA for the help.

Note:
The control can be text edit, check box, radio button or combobox.

[Dave]

Hi - when you say detect, do you mean that you want an event to fire when there is a change of data entered/selected/clicked in any of the edit controls?

If so, one way would be to bind click or change events to the edit controls when the page loads. For example:

Code: Select all

$(document).ready(function(){

   $("*").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
}

If you want to track just certain edit controls you can restrict the event binding by adding a custom attribute value like trackerID=123 in each of the controls (of interest) HtmlElementProperties (Editor Input tab).

Then add that restriction to the bind code above, e.g.

Code: Select all

$(document).ready(function(){

   $("[trackerID]").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
   // or maybe using the trackerID value for something, which by the way is $(element).attr("trackerID")
}

We do this sort of thing when we want to globally track events to pass to Google Analytics.

Dave

[t4nu]

Hi,
Thanks for the respond.
Actually what I want is quite simple (I think). I want to detect the changes in any edit control and then make changes to global variable, so if the user want to leave that page, the data can be save. Something like this:

Code: Select all

  if (isSomethingChange)
      UpdateTheTable();

so if nothing change, the UpdateTheTable() will never be called.

Hi - when you say detect, do you mean that you want an event to fire when there is a change of data entered/selected/clicked in any of the edit controls?

If so, one way would be to bind click or change events to the edit controls when the page loads. For example:

Code: Select all

$(document).ready(function(){

   $("*").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
}

If you want to track just certain edit controls you can restrict the event binding by adding a custom attribute value like trackerID=123 in each of the controls (of interest) HtmlElementProperties (Editor Input tab).

Then add that restriction to the bind code above, e.g.

Code: Select all

$(document).ready(function(){

   $("[trackerID]").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
   // or maybe using the trackerID value for something, which by the way is $(element).attr("trackerID")
}

We do this sort of thing when we want to globally track events to pass to Google Analytics.

Dave

[/code]

[Dave]

Sure, so a generic way to do that would be do what's suggested above, i.e. bind an event to every editable control, and then when you detect one of these events just call a function on the server (via the client API) to update your global variable...something like:

Code: Select all

function trackElement(element) {
   $eb.executeFunction("updateMyTableFunction");
}

then later on when the user leaves the page you can do

Code: Select all

if ($eb.executeFunction("hasSomethingChanged")) {
   updateTheTable();
}

[t4nu]

May I say that the event when the page loads is the same with Before Page event?

Hi - when you say detect, do you mean that you want an event to fire when there is a change of data entered/selected/clicked in any of the edit controls?

If so, one way would be to bind click or change events to the edit controls when the page loads. For example:

Code: Select all

$(document).ready(function(){

   $("*").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
}

If you want to track just certain edit controls you can restrict the event binding by adding a custom attribute value like trackerID=123 in each of the controls (of interest) HtmlElementProperties (Editor Input tab).

Then add that restriction to the bind code above, e.g.

Code: Select all

$(document).ready(function(){

   $("[trackerID]").each (function() {
      if ($(this).get(0).tagName == 'INPUT') {
         $(this).click(function() {trackElement(this);});
      }
      if ($(this).get(0).tagName == 'SELECT') {
         $(this).change(function() {trackElement(this);});
      }
   });

});

function trackElement(element) {
   // do something with element, like maybe a $eb call passing in element.val() or $("option:selected", element).text()
   // or maybe using the trackerID value for something, which by the way is $(element).attr("trackerID")
}

We do this sort of thing when we want to globally track events to pass to Google Analytics.

Dave

[Dave]

Sorry - not sure I understand the question.

The Before Page event is an Ebase server-side event, i.e. is executed by the Xi server before a page of HTML is returned to the browser, whilst the $(document).ready() is a client-side event, i.e. executes on the browser after a page of HTML has been received (but before it is presented).

Does this help?