CODEWITHSUNDEEP
jqueryhtmljquery-mobile
reZach
reZach

Reputation: 9429

JQuery Mobile - How to add a link to a list element

I am designing a mobile webpage for use by college students. For simplicity, each student is assigned a unique id and an additional field. Both of these fields can be treated as strings, the unique id is unique while the second field may be unique, but isn't guaranteed to be. There is sample data to mimic a database of student information in the code below.

The webpage opens up and there is a search field to input either one of these fields. As you enter in a unique id or other field, the search field queries the elements stored and it will display the ones that match. If you click on one of these entries, it will take you to a second page where it will show you both fields (code not necessary to be shown). There is a back button on this second page to get you to the first page.

I have two questions:

1) First. I have two buttons on the top of the first page, the page with the search bar in it. These are radio buttons and only one can be selected at a given time. I would like when either of these buttons are hit to change the values I see in the search bar. For example, if I have "unique ID" radio box selected, I would only like the unique ID's to be in the search box. Likewise for the other field. This is accomplished by changing the text of the element in the listview (naturally), however there is a catch. If I change the text in one of my elements in my listview (in the script tag below my elements in my listview), I lose the html link (and spacing - the new box is smaller and more compact). How might I re-add the link to the button so it acts the same way as before (brings the user to the second page)

2) This one is optional but is there a way to reset the default (as chosen by the swatch selection) of the button that I click to simply change the text, and not resize & shrink the box? The suggestion here did not work: mobile navbar resizes on changing text of an item

<!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.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head>
<body>
    <div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Home</h1><!--Header text-->
    </div>
            <div data-role="content">
            <ul data-role="listview" data-filter="true" data-inset="true" data-filter-placeholder="Search" id="list" data-filter-reveal="true" data-prevent-focus-zoom="true">
            <li id="1234" lang="ILIKEFROGS"><a href="#student">1234567</a></li>
            <li id="9281" lang="LICENSE2"><a href="#student">9281736</a></li>
            <li id="0233" lang="PICKLES"><a href="#student">0233392</a></li>
            <li id="7732" lang="FOEREST"><a href="#student">7732825</a></li>
            <li id="2245" lang="BLASTOISE"><a href="#student">2245722</a></li>
            <li id="9956" lang="CHARMANDER"><a href="#student">9956353</a></li>
            <li id="2245" lang="BULBASAUR"><a href="#student">2245871</a></li>


            </ul>
            <script>
                $("li").bind("click", function() {

                    this.innerText = this.lang;
                });
                                $("li").unbind("click");
            </script>
            </div>
    </div>

    <div data-role="page" id="student">
            <div data-role="header" data-theme="b" data-position="fixed">
                <a href="#home" data-icon="back" class="ui-btn-left">Back</a>
                    <h1>Student info</h1>
            </div>
      </div>
    </body>
</html>

Upvotes: 1

Views: 1412

Answers (1)

hamstu
hamstu

Reputation: 1644

There are several ways to accomplish what you're asking for. Here's one idea.

First add both properties as data- attributes to the lis in your Listview. Like so:

<li id="1234" data-lang="ILIKEFROGS" data-id="1234567"><a href="#student">1234567</a></li>
<li id="9281" data-lang="LICENSE2" data-id="9281736"><a href="#student">9281736</a></li>
<li id="0233" data-lang="PICKLES" data-id="0233392"><a href="#student">0233392</a></li>
<!-- snip -->

This will make swapping the values easier later. Now add some radio selectors:

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Search by:</legend>
    <input type="radio" name="search-by" id="search-by-id" value="id" checked="checked" />
    <label for="search-by-id">ID</label>

    <input type="radio" name="search-by" id="search-by-lang" value="lang" />
    <label for="search-by-lang">Lang</label>
   </fieldset>
</div>

And finally, we need some JavaScript to tie it all together when you select a radio:

$("input[name='search-by']").on('click', function(event) {
    var prop = $(this).val(); // which 'data-' property are we searching by
    var target = $("#list");  // your listview

    // Swap out values
    target.find("li").each(function() {
        var $this = $(this);
        var newvalue = $this.data(prop); // the new text value is pulled from the element
        $this.find("a").text(newvalue);  //make the change
    });
});

You can see a working demo here: http://jsfiddle.net/5cpKW/4/

The only I couldn't figure out was getting the results to update if you select a new radio after some are displayed, but I've never used jQuery Mobile before, so perhaps someone else can chime in on that point.

Upvotes: 1

Related Questions