Welcome to JS Bin

JS Bin

Save
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>
<title>SQL Developer Exchange Requests</title>
</head>
  
<script type="text/javascript">
  var requests = "http://apex.oracle.com/pls/apex/dbtools/features/recent";
​
  // When the page init's go load it up.
  $(document).on("pageinit", "#requests", function() {
    // attach to the before filter in the list
        $( "#results" ).on( "listviewbeforefilter", function ( e, data ) {
          // grab the value of the search field
          var $ul = $( this ),
                    $input = $( data.input ),
                    value = $input.val();
          // if blanked go back to the recent list
          if ( value == '' ) {
              loadRecent();
          } else {
            // debugging
              console.log("Loading Search:"+value);
            search(value);
          }
        });
      loadRecent();
  });
  
  function loadRecent(){
     console.log("Loading Recent Requests");
    $.ajax({
      url: requests ,
      type: "GET",
      success: function (data) {
        // go apply the template to what was retreived
        ko.applyBindings(data, document.getElementById("requests"));
        // now refresh the element
        $('#results').listview('refresh');
      }
    });
  }
 
  
  function search(search){
   console.log("searching for '" + search + "'");
    // out with the old
   $("#results").children().remove();
​
    // in with the new
    $.ajax({
      url: "http://apex.oracle.com/pls/apex/dbtools/features/search?text=" + search ,
      type: "GET",
      success: function (data) {
        console.log(data);
        if ( data.items.length == 0 ){ noResults();}
        ko.applyBindings(data, document.getElementById("searchPage"));
        $('#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--><span class="ui-li-count ui-btn-up-c ui-btn-corner-all"><!--ko text: weight --><!--/ko--></span></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-theme="a"  data-role="page" data-inset="false" data-collapsed="false" id="requests">
      <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-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