CODEWITHSUNDEEP
jquery-mobileanchorhyperlink
shinax
shinax

Reputation: 319

JQuery mobile handling links (return false)

I'm planning on using JQM to make a simple mobile web app, and I'm having problems getting this simple functionality to work: when I click on some links (not all of them), I want to be able to first process some data, and then depending on that outcome, sometimes continue the link action (I like the whole transitions and ajax things), and sometimes don't.

The important part is that I want to preserve the normal JQMobile transitions and stuff for the links, just sometimes prevent them (for example for validation and things like that).

I've tried with: return false, preventDefault (and in combination with stopPropagation), and data-ajax="false", and none hav worked, they all redirect.

Could somebody tell me the correct way to to this in JQMobile? Just in case it's important: I'm using anchor links, using this to test.

Thank you in advance, Jennifer.

RESOLVED: Added answer below.

Upvotes: 0

Views: 243

Answers (2)

shinax
shinax

Reputation: 319

OK, so I figured out a pretty decent way to do this, without it feeling like a kludge. I'm simply going to avoid using tags, and use buttons instead, this way I normally intercept them and if I want to transition, I use the changePage JQM method. Works like a charm. Thanks Littm for that tip, and I hope this is useful for somebody else in the future.

Upvotes: 0

Littm
Littm

Reputation: 4947

You may try to set a click event on the links for which you want to prevent a default behavior.

In the example below, we add a class special_link to the link for which we want to do something special before being redirected to another page.

When we click on the "special" link, we check if a given condition is followed or not before deciding to redirect the user to another page.

The redirection (with all the transitions stuffs) to another page (page_2 in our example), is done manually, with the following code:

$.mobile.changePage( "#page_2", {
  transition: "slide",
});

Fo more information about the method $.mobile.changePage, you can check the online doc:

http://api.jquerymobile.com/jQuery.mobile.changePage/

In following example, if you type a 1 in the text input, you'll not be redirected. Otherwise, you'll change page.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script>
    $(function() {

        // Setting the click event for our special link
        $(".special_link").click(function() {

            // IF SOME CONDITION THEN... (Here, if we typed a 1 in the text input)
            if($('#my_value').val()=='1') {

                // We do not change page
                alert("We stay where we are");

            } else { 

                // We change page. In this example: page 2
                $.mobile.changePage( "#page_2", {
                transition: "slide",      // You can define the transition 
                                          // you want + other parameters

                });
            }
        });
    });
</script>

</head>
<body>
    <!-- PAGE 1 -->
    <div data-role="page" id="page_1">
        <div data-role="content">
            <h1>Page 1</h1>

                <input type="text" id="my_value"/>

                <!-- A SPECIAL LINK -->
                <a href="" class="special_link">Special link</a>

        </div>
    </div>

    <!-- PAGE 2 -->
    <div data-role="page" id="page_2">
        <div data-role="content">
            <h1>Page 2</h1>
            <a href="#page_1">Go back to page 1</a>
        </div>
    </div>
</body>
</html>

I hope this helps. Let me know if you have any questions.

Upvotes: 2

Related Questions