Languages

Menu
Sites
Language
Trying to get Selected Item from ui-listview

Hi Guys,

I just started working one of the application usng tizen(web) and got stuck with following thing. I have implemeted ui-listview which have some "li's" so it does display correctly (See following code). However, when i tried to get the selcted item from listvewi using javascript then it doesn't display anything. For example,if user selects  "1line" from the list so it should say "1line" is selected. Wondering, if any other way exists in Tizen to achive this thing.

 

Reference  Link of example:https://developer.tizen.org/development/api-references/web-application?redirect=https://developer.tizen.org/dev-guide/2.3.1/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm

 

Here is code snippter of javascript the one i'm using

 

<script type="text/javascript">

    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-input'));
        alert($(this).attr('data-value'));    // this will alert data-input value.
         
     });
</script>

Here is complete code snippter to display listview

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Testing Application</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
    <!-- load theme file for your application -->
    <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="app.js"></script>
    <script src="lowBatteryCheck.js"></script>
    
    
     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/jquery.js" type="text/javascript"></script>
     
    
     <!-- <script src="js/orderProcesing.js" type="text/javascript"></script>  -->
</head>

 <script type="text/javascript">

    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-input'));
        alert($(this).attr('data-value'));    // this will alert data-input value.
         
     });
             </script>
<body>
    <div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h2 class="ui-title">Orders List</h2>
        </header>
        
        <ul class="ui-listview" id="dynamicList">
   <li> 
      <a href="#" data-value="S">1line</a>
   </li>
   <li> 
      <a href="#" data-value="M">2line</a>
   </li>
   <li> 
      <a href="#" data-value="L">3line</a>
   </li>
   <li> 
      <a href="#" data-value="S1">4line</a>
   </li>
   <li> 
      <a href="#" data-value="S2">5line</a>
   </li>
</ul>
    </div>

    
</body>
</html>

Edited by: zaghman arshad on 14 Mar, 2017
View Selected Answer
List

Responses

4 Replies
Mark as answer
Marco Buettner 
 $('#dynamicList li').click(function(){
    //console.log($(this).attr('data-input'));
    alert($(this).find('a').attr('data-value'));    // this will alert data-input value.
     
 });

You capture the event by "li" but your li-element has no attribute called "data-value". data-value is an attribute of the child element "a".

So you have to parse the child element of your listen item.

https://jsfiddle.net/sLf4ee29/

zaghman arshad

Thanks Marco.

 

This is a Strange behaviour. I just copied nd paste your code and ran it using Emulator. Surprisingly,  it doesn't work on Emulator. 

Please see following code snippet

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Macy's MyStore app</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
    <!-- load theme file for your application -->
    <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="app.js"></script>
    <script src="lowBatteryCheck.js"></script>
    
    
     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/jquery.js" type="text/javascript"></script>
    
    <script src="js/orderProcesing.js" type="text/javascript"></script>  
</head>
<script type="text/javascript">
<script type="text/javascript">
    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-value'));
        alert($(this).attr('data-value'));    // this will alert data-value value.
         
     });
</script>

</script>
<body>
    <div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h3 class="ui-title">Open Fulfillment Order</h3>
        </header>
        
         <div class="ui-content" id="ordersWidget">
            
            <ul class="ui-listview" id="dynamicList">
               <li> 
                  <a href="#" data-value="S">1line</a>
               </li>
               <li> 
                  <a href="#" data-value="M">2line</a>
               </li>
               <li> 
                  <a href="#" data-value="L">3line</a>
               </li>
               <li> 
                  <a href="#" data-value="S1">4line</a>
               </li>
               <li> 
                  <a href="#" data-value="S2">5line</a>
               </li>
            </ul>
  
           
          </div>
        
        <footer class="ui-footer ui-bottom-button">
              <a href="#" class="ui-btn">Logo</a>
   </footer>
    </div>

    
</body>
</html>

 

 

Marco Buettner

Are u sure that u copy and paste correct? Your code snippet is exactly the same like in the start post.

zaghman arshad

Sorry, I've managed to run it by applying fixes

 

$( document ).ready(function() { //dom is now loaded in.
    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-value'));
        alert($(this).find('a').attr('data-value'));    // this will alert data-value value.
    });
});