Prevent default navigation when making ajax call

[PromptAlert Inc.]

The initial view of our application displays a login page. The user is required to login. We validate the login in javascript making an ajax call to the server.

Our login button looks like this:

<a href="#main" data-role="button" data-click="loginClick">Login</a>

If login succeeds the app should navigate to #main. If not, stay on the login view. 
 
In our loginClick processing, we make an ajax call. If the login is not valid, we call e.preventDefault(); (which does not work)

The problem is that the ajax call is asynchronous (of course) and the view has already changed to #main even if the login failed.

How can we best implement the login failed logic?

[Iliana Dyankova]

Hello,  

To achieve the needed functionality I would suggest the following approach: 

• Remove the href attribute from the link;
• Hook up the ajax request success event and then use the navigate() method of the Kendo UI Mobile Application. 

For convenience, I created a simple jsFiddle example which illustrates such approach in action.

Kind regards,
Iliana Nikolova
the Telerik team

[PromptAlert Inc.]

Thank you. That solved our issue.