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>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset="utf-8">
        <title>DBdiff!</title>
        <meta name="description" content="Database diff tool">
        <link rel="stylesheet" href="dbdiff.css">
       
​
    </head>
    <body>
        <header>
            <h1>DBdiff Tool</h1>
        </header>
        <nav></nav>
        <section id='dashboard'>
            <div>
                <span>Host 1:</span>
                <select id='host-select-1'></select>
                <button id='host-select-1-btn'>Select Host</button>
            </div>
            <div>
                <span>Host 2:</span>
                <select id='host-select-2'></select>
                <button id='host-select-2-btn'>Select Host</button>
            </div>
        </section>
​
             <footer></footer>
        
    </body>
</html>
 
var s,
DbDiff = {
​
  settings: {
    hostList : ['SELECT HOST', 'tuna.letstalk.com', 'foo.bar'],
    $hostSelect1: $('#host-select-1'),
    $hostSelect2: $('#host-select-2'),
   
    $host1Btn:    $('#host-select-1-btn')
  },
  
  
  init: function init() {
      s = this.settings;
      this.bindUIActions();
      this.populateHostLists();
  },
  bindUIActions: function bindUIActions() {
    s.$host1Btn.on("click", function() {
      DbDiff.selectHostAction();
    });
    
    s.$hostSelect1.on("change", function() {DbDiff.selectHostAction('left');});
    s.$hostSelect2.on("change", function() {DbDiff.selectHostAction('right');});
    
  },
  selectHostAction: function selectHostAction(side) {
    var selectedHost = '';
    if (side == 'left') {
      selectedHost = s.$hostSelect1.val();
    } else if (side == 'right') {
      selectedHost = s.$hostSelect2.val();
    }
    DbDiff.getDbTables(side, selectedHost);
    
  },
  populateHostLists: function populateHostLists() {
      var options = [],
          $hosts = $('#host-select-1, #host-select-2');
​
      $.each($hosts, function(idx, host) {
            $.each(s.hostList, function(key, value) {
                var $host = $(host);
                $host.append($("<option></option>").attr("value", value).text(value));
            });
        });
​
      
  },
  getDbTables: function getDbTables(side, host) {
    alert('getting tables from: ' + host + ' side: ' + side);
  }
​
​
};
​
(function() {
  DbDiff.init();
})();
Output

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

Dismiss x
public
Bin info
orlybgpro
0viewers