CODEWITHSUNDEEP
jqueryhtmljquery-mobile
selladurai
selladurai

Reputation: 6779

error when getting value from list in html?

we are creating one jQuery mobile app in that app, I have to bind the webservice data in to list in HTML and when I click the first items in the list, it redirect to second page which I created in same page seperated with div tag and display the relavent information which i selected from the list. In addition to that i stored the web service result in an array.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title><br />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript">
function GetSelectedValut()
 {
var list_value = $(this).attr('searchlist');
alert(list_value);
   }
</script>
</head>
<body>
<!-- Page one starts-->
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Header </h1>
    </div>
    <div data-role="content" id="page1content">
         <ul data-role="listview" data-inset="true" id="searchlist">
            <li id="search">
                <a href="#pagetwo" value="Selected one" onclick="GetSelectedValut()">Selected one</a>
             </li>
            <li id="search1" onclick="GetSelectedValut()">
                <a href="#detailpage">Selected two</a>
            </li>
            <li>
                <a href="#detailpage">Selected three</a>
            </li>
            <li>
                <a href="#detailpage">Selected four</a>
            </li>
            <li>
                <a href="#detailpage">Selected five</a>
            </li>
            <li>
                <a href="#detailpage">Selected six</a>
            </li>

        </ul>
    </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- Page one ends-->
<!-- Page two starts-->
<div data-role="page" id="pagetwo">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
    Welcome to Div two
        </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- page two ends -->
</body>
</html>

Sample image

Upvotes: 0

Views: 437

Answers (2)

selladurai
selladurai

Reputation: 6779

Try this one I'm sure you get result: 

<ul data-role="listview" data-inset="true" id="searchlist">
                <li>
                    <a href="#" id="selected one">Selected one</a>
                 </li>

    </ul>




 $('#searchlist li a').bind("click",function() 
      {

          var selectedId = $(this).attr("id");
          alert("your selected ID is "+ selectedId);

      });

Upvotes: 1

Techism
Techism

Reputation: 534

There is no attribute called "seachlist"...

You assigned the same id to several elements...this will cause problems...

If you are trying to get the text of the a tag, then change #detailpage to .detailpage and then use something like this:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    alert($(this).text());
  });
});
</script>

Advantage: No "onclick" in your code...this is called unobtrustive javascript and it's way cooler than mucking up your html with javascript stuff.

Even better, to pass a value, instead of worrying about the link content, assign whatever value you want to the item's ID and fetch that.

Enjoy.

Jquery Refs: .ready : http://api.jquery.com/ready/

.bind : http://api.jquery.com/bind/

.text : http://api.jquery.com/text/

UPDATE: Id you want to update some div on the page with the text we retrieved it's simple:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo').append(thetext);
  });
});
</script>

http://api.jquery.com/append/

Append will add text indefinitely, to the end of the element.

Or if you want to update a specific part of the page 2 div, you would need to add a class to it like .content and then you could do this:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo.content').html(thetext);
  });
});
</script>

.html will fill the element with what you pass it.

http://api.jquery.com/html/

If you wanted to wrap the content in a paragraph tag or something before sending it along:

$('div#pagetwo.content').html('<p>' + thetext + '</p>');

Upvotes: 3

Related Questions