CODEWITHSUNDEEP
javascriptjqueryhtmlmobilejquery-mobile
gabaum10
gabaum10

Reputation: 3827

Jquery Mobile detect which row was clicked in a listview

I have looked high and low and can't seem to find this anywhere. Does anyone know how to get the value of a row tapped in a listview? This can be anything from the name to the index in the object. Right now I have a function that handles the tap. I need to be able to pass a value to the new page I am loading when it transitions. I thought I could do it here:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    //Insert code here to pull a value from either an index or a name and save it
});

I thought maybe it would be good to do it in the hash? I am not sure what the standard practice is here on the web coming from native iOS dev though. Anyone have any pointers? Thanks.

This is how I am populating my listview:

$.each(tasks, function(index, task) { 
        $taskList.append("<li><a href='taskDetails.html'>      <h3>"+task.name+"</h3><p>"+task.description+"</p></a></li>");
    });

taskDetails.html needs the index of the task so I can pull the details down from the server. What is the standard practice for doing that?

Upvotes: 3

Views: 7427

Answers (5)

Wytze
Wytze

Reputation: 7904

Jasper's solution is good, but if you have any other code in your event handler that edits the DOM, the "this" keyword could be pointed somewhere entirely different by the time it gets used in your code.

I've cracked my head on my keyboard a number of times because my users said "I click on item one, but that always opens the edit screen for the last item in the list." So somehow using 'this' was not the right way to go.

Also, when I tried event.target, event.currentTarget or event.originalTarget, those didn't work either. They all pointed to the jQueryMobile "page" that was visible by the time the code got to run (which wasn't even the same page where the table was located).

The safe and/or intended approach is to:

  • use event.originalEvent.srcElement instead of 'this'
  • not use .delegate(), but use .on()
  • bind the event using $(document).on(), not $('#table').on()

So that would result in:

$(document).on('tap','#taskListTable li',function(event){

    //The properties of 'event' relate to $(document), not to '#taskListTable li',
    //so avoid .currentTarget, .target etc.

    //But fortunately 'event' does have one property that refers to the original 
    //user event.    
    var theOriginalTapEvent = event.originalEvent;
    var theRealClickedElement = theOriginalTapEvent.srcElement;

    //Note that the clicked element could be a sub-element of the li
    //whose index you want. So just referencing theRealClickedItem could
    //could still be getting you bad results.

    var theRelevantListItem = $(theRealClickedElement).parents('li');

    //Now you're ready to get the item's index or whatever.
})

Upvotes: 0

JoeGalind
JoeGalind

Reputation: 3805

The "delegate" method is deprecated on new versions of jQuery. Consider using this instead:

$('#taskListTable').on('tap', 'a', function (event) {

}

Here is another method of getting an id, especially useful if you have a database enabled app and the id you are searching for is the database's id, not the row index:

When filling the table consider this:

<ul id="taskListTable">
  <li id="task400" class="tasks">Task with db id 400</li>
  <li id="task295" class="tasks">Task with db id 295</li>
</ul>

$('#taskListTable').on('tap', 'li', function (event) {
  variable = $(this).attr('id').substr(4);
}

That will get the database id which you can pass on to your other pages.

Upvotes: 1

Jasper
Jasper

Reputation: 75993

To get the index of the taped list-item you can do this:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    var index = $(this).index();
});

Yup, that's it. Although this assumes that the <li> element are all siblings.

Docs for .index(): http://api.jquery.com/index

If you want to then transition to the new page:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    $.mobile.changePage($(this).find('a').attr('href'), {
        data : { selectedIndex : $(this).index() }
    });
});

This will get the new page and attach the selectedIndex variable as a query string parameter that is set to the index of the tapped list-item.

Also, to be able to prevent the default behavior of clicking on the link in the list-item, I would attach this event handler to the link elements:

$('#taskListTable').delegate('a', 'tap', function (event) {
    event.preventDefault();
    console.log('link clicked');
    $.mobile.changePage($(this).attr('href'), {
        data : { selectedIndex : $(this).closest('li').index() }
    });
});

Upvotes: 9

dfsq
dfsq

Reputation: 193261

What about this approach?

$taskList.append("<li><a href='taskDetails.html?id=" + task.id + "'></a><h3>" + task.name + "</h3>...</li>");

And then retreive id parameter.

Upvotes: 0

Keith Entzeroth
Keith Entzeroth

Reputation: 2059

To get the name out, you could do:

$(this).find('h3').html()

Alternatively, you can use something in the markup like the id or a data attribute to provide a better handle than the name.

Upvotes: 0

Related Questions