fail to set session storage in dynamic list view by using json & ajax

fail to set session storage in dynamic list view by using json & ajax

Hi all,
     I am trying to show a listview using json data. i want to set url for each row using sessionStorage() but i was failed to set


my code is

  2. <!DOCTYPE html> 
  3. <html>
  4. <head> 
  5. <title>categories</title> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"> 
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  8. <!--<link rel="stylesheet" href="main.css" />-->
  9. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  11. <script src="load.js" type="text/javascript" ></script>
  12. </head> 
  13. <body>
  14. <!-- Main Page -->
  15. <div data-role="page" data-theme="a" id="cList">
  17. <!-- Logo -->
  19. <div data-role="header">
  20. <a href="#" data-rel="back" data-add-back-btn="true" data-back-btn-text="Back" data-direction="reverse">back</a>
  21. <h1>categories</h1> 
  22.         </div>
  25. <div data-role="content" id="categoryList">
  26. <!-- No results warning (initially hided) -->
  27. <div id="notfound"><h5>no results found</h5></div>
  28. <!-- Results container -->
  29. <ul id="catResults" data-role="listview" data-inset="true" data-filter="true" data-theme="c">
  30. </ul>
  31. <!-- Ajax loader -->
  32. <div id="loader"><h4>Loading...</h4></div>
  33. </div>
  35. </div>
  36. <!-- end Main Page -->

  38. <script>
  41. $( document ).delegate("#cList","pagebeforecreate", function() {
  42.     
  43.     alert('catgories page');
  44.                 categories();
  45.                   
  46.                  });
  49. </script>
  52. <!-- end Detail Page -->
  53. </body>
  54. </html>
     
and js code is



  2. function categoryCallback(data) {
  3. alert('under catgory call back');
  4. //Checks if search have results
  6. //Ajax loader is hided
  7. $("#loader").hide();
  8. $("#catResults").empty();
  9. alert('before foreach');
  10. alert('data is'+data);
  11. //<ul id="catResults" data-role="listview" data-inset="true" data-filter="true" data-theme="c">
  12. var ouput = '';
  13. // ouput+=
  14. $.each(data, function(index, category) {
  15. //Stores element id
  16. //alert('be foreach');
  17. var catgoryId = category.id;
  19. //alert('category id is'+catgoryId);
  20. //Change the default 'not found' poster
  21.   var catgoryName = category.cName;
  22. catCouponUrl="http:\/\/www.morenmoredeals.com\/ws\/api\/Json.php?data=cByCategoryNew&id=";
  23. //
  24. //$("#catResults").append('<li><a onclick="'+
  25. // 'sessionStorage.setItem(\"key\",'
  26. // +encodeURIComponent(catCouponUrl)+
  27. // category.id+
  28. // '");" href="#">'+
  29. // '<h3>'+category.cName+'</h3>'+
  30. // '</a></div></li>');
  31. ouput += '<li><a onclick="sessionStorage.setItem("key","';
  32. //ouput+=catCouponUrl+category.id;
  33. ouput+="http://www.morenmoredeals.com/ws/api/Json.php?data=cByCategoryNew&id=";
  34. // ouput+=catCouponUrl;
  35. //ouput+=category.id;
  36. ouput+=");";
  37. ouput+='<h3>';
  38. ouput+=category.cName;
  39. ouput+='</h3>';
  40. ouput+='</li>';
  43. });
  44. ouput+='</ul>';
  45. $('#catResults').html(ouput).listview("refresh");}
  code is working fine but i am getting output html as follows
  1. <a json.php?data="cByCategoryNew&amp;id=);&lt;h3" api="" ws="" www.morenmoredeals.com="" key","http:="" onclick="sessionStorage.setItem(" class="ui-link-inherit">Apparel/Clothing</a>
  but my intesion is to get output like this

  1. <a onclick="sessionStorage.setItem("key","http:www.morenmoredeals.com/ws/api/Json.php?data=cByCategoryNew&id=100");  class="ui-link-inherit">Apparel/Clothing</a>
my problem is  i fail to set function and url properly

can any body please help me



thanks and regards


vara prasad