Transform Ajax Refresh into Client Server Logic/JS

Transform Ajax Refresh into Client Server Logic/JS

  

Hi,


I've been working on implementing JavaScript in an application to call a Random Number using JavaScript, and put the result into a Web Service (A statistics one I found) and automatically update the page. 

I got it to work using the Ajax Refresh but some feedback given to me is that it is all run on the server side and refreshing the page each time.

 I've been asked to try and use Ajax to update the screen on the client side and querying the server (entities?) to see if there are any changes and just posting the inputs, kind of like the BBC does with its news feeds.

 Needless to say I am confused. Any ideas.

Here is my code. Well, I downloaded this from the forge and I created a page called JS Result.

Any questions, let me know . :)



I didn't get the idea of using JavaScript for that.

If the number is given by user or even if it is generated randomly, why don't you use a page with an input and a button set to Ajax Submit (or only the button and generate the number server-side), then call the web service from the action attached to the button and get the response, save to database and refresh whatever you want to refresh in the page, to show the result?

Consuming a web service is very easy in OutSystems.

Sorry, I can't look into your code right now and thus I may be missing something important.

Hi,

My code is sort of similar. The random number is called server side and refreshed through JavaScript in a hidden I input box and does that. The problem is when I call the web service and get the result, the page (Table List) is being Ajax Refreshed rather than updated by JavaScript and this is causing slow performance.


Edward

Eddy,


so, what is the question exactly?

What you are writing is confusing me.


I still don't get why are using JavaScript and hidden inputs at all...

What's the purpose? 

I would use a more standard approach. I'll associate a screen action with a button (set to Ajax Submit)

1. In the screen action, called by the user when clicking the button, the number is generated and the web service is called using it. 

2. The response is stored in the database

3. You refresh the data source, probably an aggregate (using data refresh) that is in the preparation and used as source to the table records

4. You refresh the table records in the screen, with an Ajax refresh.

And that's it. :)

What's the purpose of the hidden input and the JavaScript you are using?

Hi,

I want to use JavaScript or CLient Server Logic so every 60 seconds:

A Random Number is Generated, passed to a Statistics Web Service and updates the Outputs of that Service, e..g Average, Sum, Standard Deviation.

This works, but each time this action is called, the page does a full refresh as this is in the preparation.


"setInterval(function(){ refreshNotifications() }, 10000);

 

function refreshNotifications() {


    OsNotifyWidget('" + FakeNotifyRefresh.Id + "','')


}"


But you know on the BBC Website it just updates the page with new content rather than refreshing the whole page? That's what has been asked for.

It looks like this, and as you see in the bottom right, the page refreshes (Loading...) each time a random number is called and I have been told.

https://marvinmiddleplace.outsystemscloud.com/JavaScriptDemo/JSResultAjaxRefresh.aspx


I have been told JavaScript makes this refresh much faster!

Edward



You can use your JavaScript to click a hidden button that is set to Ajax Submit every 60 seconds and do as I told you before in the screen action. Using Ajax refresh you can select which widgets you want to refresh in the page. There is no need to refresh the entire page.

I will give that a go! Thanks. I probably misunderstood your original response!

No problem. Try it and than if it do not work we try to figure out what is happening :)

Hi,

It's getting there. I have Javascript to click the button, not Widget click and this is running a little quicker! Quick question. The JavaScript to call the FakeNotify Widget every 60 seconds, does this go in the Preparation, or can it be called somewhere else? I think because it's in the preparation this is causing a page refresh? 


Edward



is the button set on submit?

if so, set it to ajax-submit.

and how do you refresh in the action? if you set it on page, well you refresh the whole page...


Like J. Said, set the button to Ajax Submit.

No need to use the fake notify. Just click the button with your JavaScript and in the action do what you need. In the end, refresh the table records source (aggregate/sql query) and than Ajax refresh the table records in the screen (from the action).


Hi,

Oooh this is getting closer.

I have this in the preparation.

"setInterval(function () {document.getElementById('" + CalculateRandomNumber.Id + "').click();}, 10000);"

It calculates the random number after 10 seconds and it just appeared. :)This is good :) However, it didn't do it again. :/


I am using the onclick extended property to get the Random Number.


"document.getElementById('" + ResultInput.Id + "').value = GetRandomNumber(); return true;"


I just called the set interval in the action the button related to and added the rest. It seems to be working a lot better.

I just need to check whether it needs any more javascript/speedening up.

Here it is so far.


https://marvinmiddleplace.outsystemscloud.com/JavaScriptDemo/JSResultClientServer.aspx

Hi Eddy.

Your page is not using ajax, and I think it's because of the javascript that you placed in the extended properties of the button.

The problem is with the return true - it prevents the Ajax request from happening. Look at the HTML generated:

<input onclick="document.getElementById(...).value = GetRandomNumber(); return true;if (OsPage_ClientValidate(...)) OsAjax(...); return false;" type="submit" ... />

The return true from your code is preventing the OsAjax function to execute, and it falls back to making a submit request.

You can remove the return true and it should be much faster. Or, preferably, remove this javascript altogether and do this logic on the action (you can generate a random number with the GetRandomDecimal). Like many people said, you only need a very simple javascript: use a setInterval to periodically click a button (which you already have).


You might also take a look at this component, since I think it would simplify your use case even further:

https://www.outsystems.com/forge/component/2134/auto-refresh-utils/

Hi Leonardo!

It's getting there!

I removed the true and it seemed to perform quicker but there is one tiny thing that I am not sure of. 

It's the FeedbackAjaxWait cursor progress Icon that appears in the bottom right corner.


https://marvinmiddleplace.outsystemscloud.com/JavaScriptDemo/JSResultClientServer.aspx?(Not.Licensed.For.Production)=

Is it to do with the theme? Because I have the same logic on this screen based on what was in the forge.


https://marvinmiddleplace.outsystemscloud.com/AutoRefreshUtils/Entry1.aspx?_ts=636356299297644434


However on there, there is no Loading... When I had the True removed, I got the same thing, it performed quicker but has the Loading sign in the bottom. Is there anyway to remove it?


I removed the button as you suggested but use JavaScript to generate the random number rather than use the Outsystems Widget. I want to try and use as much JavaScript as possible.


Edward

Hi Edward.

Yes, the loading is added automatically by the theme to give feedback to the users during ajax requests. You can hide it with CSS.

You should really be trying to reduce your javascript code, not increase. It's hard to reason about javascript code, and much harder to maintain.

Hi Leonardo,

Hiding it just made the page blank out so it looks like it is still doing a full page refresh which is not what my boss wants.

I feel I haven't explained AJAX Refresh very well as my boss has asked for something which makes an asynchronous call (calls the Web Service, returns the Stats information etc) during the set interval method and to update the relevant elements on the screen.

All the help so far has been invaluable and it is so much quicker than what I did before, but we want something that changes like a character count. 

http://www.smartwebby.com/DHTML/textbox_characters_counter.asp

I think I am refreshing elements of the page not all of it. Do I need to look for OSAJAX in Dev Tools to be certain of this?

I understand your point about javascript but we have chosen to try and incorporate more of it due to its power in improving speed and performance. I agree it can be hard to read and maintain at times! This is why I keep asking for help. :)

Thanks to all who have helped :)


Edward


Hi Edward.

Hiding the ajax wait should not have any effect in other parts of the screen. This is the CSS for hiding it:

.Feedback_AjaxWait { display: none; }

I'm looking at your output and you are setting the values in the input fields through javascript, with something like:

document.getElementById('RichWidgets_wt3_block_wtMainContent_wtAverage1').value = '45.8181818181818';

You don't need to do that, just by refreshing the input it will be updated with the value that is held in its variable.


You are also refreshing lots of things in your screen. You can also simplify that by refreshing a container that just includes everything you need to update.


With regards to using javascript or not. I still don't understand what you are trying to achieve. If it doesn't require any data from the server, like the character counter on your last reply, then definitely you should do it with javascript. But if it does require data from the server, you will not gain any performance by doing some things in javascript (like generating the random number) and other things on the server (like retrieving data).

And if you want a simple character counter, take a look at SilkUI: https://silkui.outsystems.com/Patterns_Web.aspx#Web_Utilities_CharacterCount