Get text from generated Listviews (jQuery Mobile) after the user clicks on it

Question

I have a little application that basically searches for a "medicine" when the user types the name and clicks on search(Submit) The controller will call a little function in the database and display all the related data found in more <li></li> elements underneath the search <li></li>.

Here's the first <li></li> that includes the Search input field and submit button.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider" style="text-align:center">Search</li>
    <li>
        <div class="ui-grid-b">
            <div class="ui-block-a"><input type="Search" id="medName" name="medName" placeholder="Medicine Name..." /></div>
            <div class="ui-block-c"><input id="Submit" type="Submit" data-icon="search" data-iconpos="notext" /></div>
        </div>
    </li>

Below this there is the @foreach statement that calls the controller and populates the listview with found data:

@foreach (//Code that connects to database in controller)ViewBag.MedicineList)
    { 
        <li><a href="#" onclick="storeMedName(); return true;" >
        <p><strong id="selectedMed">@m.DESC</strong></p>
        </a>
        </li>
    }
</ul>

The search works perfectly, my problem relies when I click on any of the generated <li></li>. This is supposed to take the name of the medicine found inside the <strong id="selectedMed">@m.DESC</strong> and save it into a sessionStorage to be displayed on the following page that they will eventually get redirected to.

However, despite using the following simple JavaScript it would only save the first found <li></li> regardless of which one I click on.

function storeMedName() {

        var medicine = document.getElementById('selectedMed').innerHTML;

        if (window.sessionStorage) {

            try {
                sessionStorage.setItem('medicineName', medicine);

                //To check if it got saved
                document.getElementById("result").innerHTML = "You have saved " + sessionStorage.medicineName + " to the session.";

            }
            catch (err) {
                // error code 22 QUOTA_EXCEEDED_ERR ran out of space
                if (err.code == QUOTA_EXCEEDED_ERR) {
                    result.innerHTML = 'sessionStorage ran out of memory.';
                    // perform any other handling we want to here
                }
            }
        }
        else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }

    }

I have tried using localStorage instead by just modifying the JS slightly and the same problem persists. Looking around the internet for solutions I can only find articles that uses static elements. I believe I'm missing something stupidly easy but it's my first application that deals with this type of functions.

My first thought it that the reason it behaves like this is because the id="selectedMed" is the same for every found medicine so it is bound to save the first one the JS finds, but I cant seem to work my head around a method that would help me solve this issue.

Any ideas or solutions will be greatly appreciated! If anything is unclear please let me know.

Answer 1

This is a follow up to this question comments.

Index counter is not needed here nor should inline javascript be used with jQuery Mobile. It is just a bad practice because it can severely miss behave in certain situations.

Solution

Lets say this is yours generated listview, I gave it an id called test-listview (it will be used in javascript):

HTML:

<ul data-role="listview" data-inset="true" id="test-listview">
    <li><a href="#">
        <p><strong id="selectedMed">Element 1</strong></p>
        </a>
    </li>                    
    <li><a href="#">
        <p><strong id="selectedMed">Element 2</strong></p>
        </a>
    </li>
    <li><a href="#">
        <p><strong id="selectedMed">Element 3</strong></p>
        </a>
    </li>                    
</ul>

If you want to find out a text of selected listview element you would do it like this:

Javascript

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#test-listview li', function(){ 
        alert($(this).find('#selectedMed').text());
    });
});

Working example

And here's a working jsFiddle example: http://jsfiddle.net/xNJ7A/