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 rel="stylesheet" type="text/css" href="//qtip2.com/v/2.2.0/jquery.qtip.css">
        <script   type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://qtip2.com/v/2.2.0/jquery.qtip.js" type="text/javascript"></script>
        <script type="text/javascript">
          
          
            $(document).ready(function()
            {            
                $('body').prepend('> '+getTime()+' <hr />');
              
              //var someVar = "abc123";
              
              var schedulerQTipMarkup = "<input data-orderprocedureid='12375895' value='ABC' type='radio' name='testChk' id='testChk1' /> <label for='testChk1'>12375895</label><br><input data-orderprocedureid='48651238' value='DEF' type='radio' name='testChk' id='testChk2' /> <label for='testChk2'>48651238</label>";
              
              
              $("#myTestTable").find("a.cwfAssociateLink").each(function(){
                  $(this).click(function(){
                    //$('td.fc-widget-content').qtip('destroy');
                    var targetObj = this;
                  $(this).qtip({                  
                      content: { 
                        text: schedulerQTipMarkup,
                        title: {
                          text: 'Select Procedure',
                          button: true,
                        },
                      },
                    events: {                   
                      show: function (event, api) {
                        api.elements.tooltip.find("input[name='testChk']").each(function(index, element){
                          $(element).click(function(e){                          
                            api.elements.target.html($(this).data("orderprocedureid")); 
                            $(api.elements.target).closest("tr").attr("data-orderprocedureid",$(this).data("orderprocedureid"));
                            api.destroy();
                          })
                        })
                      }
                  },
​
                                  show: {
                                      event: 'click',
                                      modal: false,
                                      solo: true //true
                                  },
                    hide: 'unfocus'
                  }).qtip('show');
                }); //end click definition
                
              });//end find each
              
              
             
              
              
              
              
              $("#acceptCWFSelections").click(function(){
                var allVerified = true;
                $(".schedulerCWFRowCheck:checked").each(function(){
                  var orderProcedureId = $(this).closest("tr").data("orderprocedureid");
                  if(orderProcedureId == null){
                    alert("Pick a procedure");
                    $(this).closest("tr").addClass("highlightCWFRow");
                    allVerified = false;
                  }else{
                    $(this).closest("tr").removeClass("highlightCWFRow");
                    alert(orderProcedureId);
                  }
                  
                })
                return false;
              });
              
              
              $("#createCWFSelections").click(function(){
               
                
                
                $(".schedulerCWFRowCheck:checked").closest('tr[data-orderprocedureid]').each(function(){
                  alert($(this).data("orderprocedureid"));
                });
                
              });
              
             
              
              
            }); //end document ready
         
            function getTime(e) {
                var dd = new Date();
                var hh = dd.getHours();
                var mm = dd.getMinutes();
                var ss = dd.getSeconds();
                var now = ''+hh+':'+mm+':'+ss;
                return now;
            }
        </script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
        <style>
            article, aside, figure, footer, header, hgroup, 
            menu, nav, section { display: block; }
          
          .blub{
            margin-top:20px; width:220px; border:1px solid red;
          }
          
          .cwfTable{
           border: 1px solid #000; 
          }
          .cwfTable td{
           border: 1px solid #000; 
          }
          
          .highlightCWFRow{
            background-color: yellow;
          }
        </style>
    </head>
    <body>
      
      <div id="blubContainer">
      <table id="myTestTable" class="cwfTable">
        <tr>
          <td><input class="schedulerCWFRowCheck" type="checkbox" /></td>
          <td><a href="#" class="cwfAssociateLink">Click to Associate</a></td>
          <td>Data 1.3</td>
          <td>Data 1.4</td>
          <td>Data 1.5</td>
          <td>Data 1.6</td>
          <td>Data 1.7</td>
        </tr>
        <tr>
          <td><input class="schedulerCWFRowCheck" type="checkbox" /></td>
          <td><a href="#" class="cwfAssociateLink">Click to Associate</a></td>
          <td>Data 2.3</td>
          <td>Data 2.4</td>
          <td>Data 2.5</td>
          <td>Data 2.6</td>
          <td>Data 2.7</td>
        </tr>
        <tr>
          <td><input class="schedulerCWFRowCheck" type="checkbox" /></td>
          <td><a href="#" class="cwfAssociateLink">Click to Associate</a></td>
          <td>Data 3.3</td>
          <td>Data 3.4</td>
          <td>Data 3.5</td>
          <td>Data 3.6</td>
          <td>Data 3.7</td>
        </tr>
        </table>
      
      </div>
      Hello, world!
      
      
      <br>
      <button id="acceptCWFSelections">Submit</button>
      <button id="createCWFSelections">Create</button>
        
      
    </body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers