Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<meta charset=utf-8 />
<title>SQL Developer Exchange Requests</title>
</head>
  
<script type="text/javascript">
  var requests = "https://apex.oracle.com/pls/apex/dbtools/features/recent";
​
  // When the page init's go load it up.
$(document).on("pageinit", "#recentRequests", function() {
    $.ajax({
      url: requests ,
      type: "GET",
      success: function (data) {
        // go apply the template to what was retreived
        ko.applyBindings(data, document.getElementById("recentRequests"));
        // now refresh the element
        $('#results').listview('refresh');
      }
    });
});
  </script>
<!-- Knockout syntax for the template which is the list items -->  
<script type="text/html" id="overview">
    <li data-role="list-divider"><!--ko text: created_on --><!--/ko--></li>
    
    <!-- bind in the link to drill down to the exchange-->
    <li> <a data-bind="attr: { href: 'https://apex.oracle.com/pls/apex/f?p=43135:7:0::NO::P7_ID:'+ id }"  alt="">
        <h2><!--ko text: title --><!--/ko--></h2>
        <span data-bind="text: description"></span>
    </li>
    
</script>
    
<body>
   <div data-role="page" data-inset="false" data-collapsed="false" id="recentRequests">
      <h3>25 Most Recent Requests</h3>
       <div data-role="content">
         <!-- List item to be populated from the data-bind attribute that calls the template named overview -->
        <ul  id="results"
           data-role="listview" 
           data-filter-placeholder="Search..." 
           data-divider-theme="b" 
           data-inset="true" 
           data-filter="true"
           data-autodividers="false"
           data-bind="template: { name: 'overview', foreach: items}">
        </ul>
    </div>
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
krisricepro
0viewers