CODEWITHSUNDEEP
dynamichyperlinkjquery-mobile
e382df99a7950919789725ceeec126
e382df99a7950919789725ceeec126

Reputation: 5981

Add Dynamically Links to jQuery Mobile

I read a lot about how to add stuff dynamically in jquery mobile, but I couldn't figure out how to add links.

Currently my solution looks like this:

  1. Add a new Page - with id (id="list-1")
  2. Creating a Link for it (href="#list-1")

This solution works perfectly in static pages, but I want to do it dynamically. I have tried a lot with page() and stuff like that but nothing helped me.

My questions are:

  1. How do I add dynamic links & pages?
  2. Did I choose the right way to use ids & anchors (#list-1) as links or is there another solution for jquery mobile?

Let me know if you need more information

Upvotes: 3

Views: 4838

Answers (2)

msapkal
msapkal

Reputation: 8346

Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.

Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    $(document).ready(function() {

        //add a link.
        $("#page1 div[data-role='content']").append('<a href="#page2">Next Page</a>');

        //add a page.
        $('body').append('  <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header">  <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3><a href="#page1">Back</a></div><footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer></div>');

    });

    window.onload = function() {
        $.mobile.initializePage();
    };

</script>
</head>
<body>
    <div data-role="page" id="page1">   
        <header data-role="header" class="header">
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <form method="get" action="" data-transition="slideup">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" value=""/>              
            </form>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer>
    </div>
</body>
</html>

Upvotes: 0

Spike
Spike

Reputation: 5130

To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.

(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');

Then your event listener would look something like:

$('#my-page').delegate('li', 'click', function() {
    passedParameter = $(this).get(0).getAttribute('passed-parameter');
});

When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:

$('[data-role=page]').live('pageshow',function(e, ui){ 
    page_name = e.target.id;
    if (page_name == 'my-page-2'){
        (do something with passedParameter)
    }
});

This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.

Upvotes: 4

Related Questions