App refreshes after an AJAX call, how to stop it?

[pilps]

Hey guys, now i'm developing an app for Series 40 devices, and yes, it is a Web App.

I've noticed this app development will be much difficult 'cause only few things work on device.


But, now I will explain what is happening.

I have an HTML, called index.html, and each "content" div is a screen, so I have the HOME div, the OPTIONS div, and LOGIN div. Each of them work perfectly... but, in this login div, i have a button called SUBMIT, that has to do an AJAX call, catch the response, save it (persistance - widget.preferences) and show a message to the user.


All of this really works, except one thing: The page REFRESHES, so the LOGIN div is hidden and the HOME div shows again, cause it is the one who has to show in the beggining of the app.

The function, AJAX call and the treatment of its response are too big to put inside the onclick="" event, so i call the function in a JS archive... and it works well! But with this "server-side" way to treat the functions it refreshes my app. and i don't want it to happen.

Anyone got tips, workarounds and such thing??

Best regards,
Van

[pilps]

index.html:

BLAH BLAH BLAH -- HTML gibberish here - no importance (the requests.js and jquery.js are DECLARED in HEAD)
<div id="wrapper">
   <div id="home">Welcome! Go to <a onclick="mwl.show('#login');mwl.hide('#home');">LOGIN</a></div>

    <div id="login" style="display:none;"><input id="user" /><a onclick="GetResponse(document.getElementById('user').value)">Submit</a></div>
</div>

<div id="msg"  style="display:none;"></div>

requests.js

function GetResponse(user){
$.ajax({
				url:'http://blahblah.net/json?user=' + user,
				dataType: 'json',
				async: true,
				crossDomain: false,
				success: SuccessLogin,
				error: Fail
			});
}

function Fail(data){ /*DO nothing awhile. This is not causing any error!*/}
function SuccesLogin(data){
   mwl.show('#msg');
   mwl.hide('#login');
   $('#msg').html(data.message  + 'IT WORKS');
}

This code represent what my app code is. And this works perfectly, no errors, but this functions are in the proxy server, and i think this is what causes my app to refresh... and i don't want this.

[sperelson]

A full refresh of the web app should not reset your current element's class+style settings. If it is doing that then something else is wrong and is causing the web app to reload.

All of this really works, except one thing: The page REFRESHES, so the LOGIN div is hidden and the HOME div shows again, cause it is the one who has to show in the beginning of the app.

Your login div hides again because you tell it to:

mwl.hide('#login');

I don't know why your home div shows again.

Regarding something else that may be happening. A full page refresh versus partial page refresh:
I asked one of the Nokia Browser team members a similar question once. The response was that the page would do a full refresh if there was too much content changing. I didn't believe this answer and I think the truth is far more involved to explain easily. Or the truth is that the Nokia Browser triggers a full refresh to be safe even though you know better and wished it didn't.

Everyone's aim is to try to only have the Nokia proxy return the changes to the client web app and not a full refresh. I've achieved this on one view in a web app once! And I don't know why it was different to any of the other views. You should be trying to use the MWL functions as much as possible and limit the changes that need to be made to the web app's html. Also, I know this might be a tough one, but try to reduce your use of helper libraries like jquery. Using standard Javascript DOM manipulation instead may help. Maybe.

Stephen

[pilps]

Hi Stephen!

Thanks for the reply, you helped me a lot to understand this lame environment. And I was thinking that Symbian development (QT) was odd and unpredictable.

The page was really doing a full page refresh. Because my app can't make one request at startup (and only one round-trip). When I click on a link, it is essencial that it triggers an specific AJAX request, get the response, and create something (lists of DOM elements, persistence settings).

But I have a workaround for this... when you don't need that freaking full refresh, simply use this code:

event.preventDefault();

Use this in a specific point of the code and the browser will simply cancel the refresh. I tried return false; and it works too, but if you put in the end of your function, maybe the navigation will stop in a strange point (ex: Home screen, but with some other page elements inside it), and if you put it in an specific point of your code, you'll simply will finish your function, "turning a blind-eye" to all the rest of the code.

I hope that it makes some use for anyone.


Van