Prevent default navigation when making ajax call

3 posts, 0 answers
  1. PromptAlert Inc.
    PromptAlert Inc. avatar
    5 posts
    Member since:
    Sep 2011

    Posted 20 Jun 2012 Link to this post

    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?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. PromptAlert Inc.
    PromptAlert Inc. avatar
    5 posts
    Member since:
    Sep 2011

    Posted 27 Jun 2012 Link to this post

    Thank you. That solved our issue.
Back to Top