Customize On Click Event to run after client side script

[mkushwaha]

On submit button, I have configured jQuery onclick event on HTML Element Properties assistant. It pops up a message box with ok and continue button. Client Side Script has function to process ok and continue buttons scripts.On clicking continue, it calls a client callable function which further calls some functions in shared functions.

What I want to accomplish is instead of using client callable function, I want to be able to use "on click" event to call server side script after jQuery is finished processing on client side (using HTML element properties ). So after continue is pressed, fire the server side script using "on click" event on submit button

How can I customize On click events so that it runs after jQuery is processed on client side and continue has been pressed ?

[Jon]

If your submit button has both client-side events and server-side events configured, the server-side side event should be run automatically after the client-side event has finished. So if I've understood your scenario correctly, the submit button's server-side on-click event should run when your ok/continue popup closes. You control this (the running of the server-side event) by returning true or false in the client-side javascript code e.g. at the end of the client-side popup:

Code: Select all

if (continue)
  return true;        // run server-side on-click
else
  return false;

But the way you're doing it at the moment with the client callable scripts also sounds fine to me.

[mkushwaha]

I tried it. It doesn't work.

MY HTML looks likes this:

<div id="Overlay">
</div>
<div id="SpecialBox">
<p id="Validate">Some Message Goes Here</p>
<input id="btnEnter"
type="button"
value="Enter"
onclick="IntakeAfterPopup('Enter')" />
<input id="btnContinue"
type="button"
value="Continue"
onclick="IntakeAfterPopup('Continue')" />
</div>

My IntakeAfterPopup look like this

Code: Select all

function IntakeAfterPopup () {
	var overlay = document.getElementById("Overlay");
	var specialBox = document.getElementById("SpecialBox");
	overlay.style.opacity = 0.8
 	overlay.style.display = "none";
	specialBox.style.display = "none"
	console.log("Inside POPUP Function");
	if (arguments[0].toString() == 'Enter'){
		console.log("Processing Enter");
		return false;
		}
	else {
		console.log("Processing Continue");
		return true;
		}

}

If haven't clicked anything on pop, my server scripts still process. Please let me know how to diagnose this problem. Thanks Jon

[Jon]

You've defined your own button using HTML - this isn't going to work. Instead, what you want to do is use an Ebase Button Control. You can then add your onclick function to it by clicking on Html Element Properties and configuring an onclick event. You can style the button if you want to.

This is a fundamental principle behind Ebase Xi: the HTML is generated by the system, not by the designer. You can change the layout, add style and events (client side and/or server side). And on some occasions you can add your own HTML, but not for something as fundamental as a button - where you want to run server events.

[mkushwaha]

OK Thanks. I tried couple of different things.

I created two panels, one has main page other has just the pop up with two buttons ok and continue

The main page has a field and submit button

For submit button What I have now is submitClick() function called on jQuery on click event through HTML element properties

similarly ok and continue button have okButtonClick() and continueButtonClick() function called on jQuery on click event through HTML element properties

my functions are in client script and it looks like this.

Code: Select all

function submitClick(element1){
	console.log("Submit Click Enter");
	$(".classMain").hide();
	$(".classOverlay").css('visibility', 'visible');
	console.log("Submit Click Finish");

	
	}
function okButtonClick(element2){
	console.log("OK button clicked");
	$(".classMain").show();
	$(".classOverlay").css('visibility', 'hidden');
	return true;
	}
function continueButtonClick(element3){
	console.log("Continue Button clicked");
	$(".classMain").show();
	$(".classOverlay").css('visibility', 'hidden');
	return false;
	}

And server script still runs even though I haven't pressed ok or continue button. Please clarify.

I tried putting return on jQuery on click Code but says invalid return. If I directly put in client script same thing invalid return.

When you say if (continue) what do you mean exactly ? if when continue has been clicked ? Please clarify. Thanks in advance Jon, you have been a great help.

[Jon]

By if(continue) I just meant that "continue" is replaced by some condition in your code.

To fix your problem, you have to add the "return false" to the the code in the HTML element properties onclick handler. So it would look something like this:

Code: Select all

submitClick();
return false;       //stop server event from running

The code editor will show the return false as an error, but just ignore this, it will work. If you like you can replace "return false" with "e.preventDefault()" - they both stop the event being submitted to the server.

[mkushwaha]

Thanks Jon that works. One last question,

I tried putting return true in HTML element properties to run the server side script after continue has been pressed but it doesn't seem to work.

Code: Select all

continueButtonClick();
return true;

Could you clarify what could be the problem ?

just like you used e.preventDefault() for stopping the script. Is there any similar way to explicitly call server side scripts from client side or through HTML element properties.

On the side note: Do you have more information on using "e." methods, I did love to explore the documentation surrounding it and play around with it. It seems very powerful feature. Thanks Jon

[kotinkarwak]

Hope this clarifies requirement

http://screencast.com/t/FOmnlnNNf

[Jon]

I've never actually used "return true" so I'm not too sure what it does. I advise just use "return false" when you don't want the server event to run, otherwise don't add a return statement at all.

I don't have any info on the e methods, but this is standard Javascript so should be googlable.

There is another technical option in this client/server interaction story which we haven't yet discussed. Ebase Xi offers a client API - this is a way for client-side Javascript to call directly to server-side Javascript ie. a Javascript <>Javascript connection. This gives you much more control over what processing is performed on the client and/or on the server and when it is performed. It can be used to perform some action on the server or to fetch some data and return it to the client or to refresh the page with some added data or any other purpose. If you want to use a lot of client-side effects this is an essential part of your toolkit. For example from the client you can say something like this to run a function on the server and return a result:

var result = $eb.executeFunction("fetchdata");

Documentation on this is at: Help > Help Index > Client API Guide