How To Write a JavaScript Event?

[ShaneStump]

Howdy All!

 I am trying to hook to a bootstrap region OnScroll event and then have it fired back to a C Builder OnEvent to let me know if the use has scrolled to the bottom of the window.

The problem is that I am obviously not calculating the scroll position with the right object in my javascript event. My question is how do I in a generic OnEvent() in javascript reference the object that the event is executed for (i.e. like the Delphi Sender object)?

Here is what I have:

1) In my form's OnCreate() event, I have the following code:

  // this is the JavaScript function that we want to call.
  // This function, in turn, will call IWForm2.DoMyAjaxFunc()
  TStringList * pJS = new TStringList;
  pJS->Add(L"function OnWindowScroll()");
  pJS->Add(L"{");
  pJS->Add(L"  var myData;");
  pJS->Add(L"  if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 20)");
  pJS->Add(L"  {");
  pJS->Add(L"    myData = 'eof = true';");
  pJS->Add(L"  }");
  pJS->Add(L"  else");
  pJS->Add(L"  {");
  pJS->Add(L"    myData = 'eof = false';");
  pJS->Add(L"  }");
pJS->Add(L"executeAjaxEvent(\"&data=\"+myData, null,\"" + UpperCase(Name) + L".OnWindowScroll\", false, null, false);");
  pJS->Add(L"return true;}");
  PageContext->ExtraHeader->Add ( UnicodeString().sprintf ( L"<script language=\"javascript\" type=\"text/javascript\">%s</script>",
  pJS->Text.c_str()
                                                        )
                            );

  // If we want to call IWForm2.DoMyAjaxFunc, then we have to register it as a Callback
  WebApplication->RegisterCallBack(UpperCase(Name) + L".OnWindowScroll",OnWindowScroll);


2) In a button OnAsyncClick event, I attach the above event to the region that I want to check the scrolling of:

// Create dialog
pTermsAndConditionsFrame_ = new TTermsAndConditionsDialogFrame(this);
pTermsAndConditionsFrame_->Name = L"TermsAndConditionsDialogFrame" + IntToStr((int) GetTickCount());

// Hook region's onscroll event...
pTermsAndConditionsFrame_->ModalBodyRegion_->ScriptEvents->HookEvent(L"onscroll",L"OnWindowScroll();");


pTermsAndConditionsFrame_->Parent = this;

3) The registered OnWindowScroll() is always called.

Thanks in advance,

Shane

[Alexandre Machado]

Hi Shane,

Add a parameter "event" to your function OnWindowScroll() and use event.target to obtain the element which triggered the event. So you should have:

function OnWindowScroll(event) {
var theObject = event.target;
...
}

Please let me know if it does what you want.

Kind regards

[ShaneStump]

Hi Shane,

Add a parameter "event" to your function OnWindowScroll() and use event.target to obtain the element which triggered the event. So you should have:

function OnWindowScroll(event) {
  var theObject = event.target;
   ...
}

Please let me know if it does what you want.

Kind regards

Howdy Alexandre!

I am finally getting back to this and it still doesn't work. 

I have a region with a long string of text and I just want to know when the user scrolls to the end of it so I can enable an Accept Terms button.

Any chance for a quick small demo  ?

Thanks in advance,

Shane

[Jose Nilton Pace]

Hi Shane, put the button at the end of the region, after long string. When users goes to the end, the button is there.

[ShaneStump]

Howdy Jose!

Thanks for the suggestion but I would prefer my original solution. If I start the button off hidden, I will get more UNWANTED phone calls than I usually do !

All the best,

Shane