JavaScript

<div id="ExistingRequest">
 <div>
  <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
     /* Init DataTables */
$("#doit").dataTable( {
       "sProcessing" : true,
 "sDom":'T<"clear">',
 "sJQueryUI": true,
 "aaSorting": [[ 1, "desc" ]],
 "sPaginationType": "full_numbers",
 "sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
     "sAjaxSource" : "getUserRequests.php?loginName=<?php echo $user; ?>",
     "sAjaxDataProp" : "",
     "sDestroy" : false,
         "sScrollXInner": "110%",
     "fnServerData" : function(sSource, aoData, fnCallback) {
         request = $.ajax({
             "dataType" : "json",
             "type" : "GET",
             "url" : sSource,
             "data" : aoData,
             "success" : fnCallback
         });
     },
          "aoColumns" : [

          { "mDataProp": "RequestID", "sWidth": "50px", sSortable: true,
            "bSearchable": false,
            "bSortable": false,
            "fnRender": function (oObj)
             {
              // oObj.aData[0] returns the RequestID
     return "<a target='tab' data-tab-name='#RequestDetails' data-tab-index='1' href='getRequestDetails.php?loginName="
     + <?php echo json_encode($user); ?> + "&requestID=" + oObj.aData["RequestID"] + "'> " + oObj.aData["RequestID"] + " </a>";
        }
       },

           { mDataProp: "RequestDate",  "sWidth": "100px", sSortable: true },
           { mDataProp: "RequestorFullName",  "sWidth": "150px", sSortable: true },
           { mDataProp: "PrimarySiteContactDisplay",  "sWidth": "250px", sSortable: true },
           { mDataProp: "RequestLocation",  "sWidth": "150px", sSortable: true },
           { mDataProp: "RequestDescription",  "sWidth": "200px", sSortable: true },
           { mDataProp: "RequestStatus",  "sWidth": "100px", sSortable: true },

         ],
       })
 $('#doit tbody tr').click(function () {
     if ($(this).hasClass('selected')) $(this).removeClass('selected');
     else
     {
         $(this).siblings('.selected').removeClass('selected');
         $(this).addClass('selected');
     }
   });
   $(window).bind('resize', function () {
  oTable.fnAdjustColumnSizing();
  });
    jQuery('.dataTable').wrap('<div class="scrollStyle" />');

$("#doit").on("click", "a[target='tab']", function(){
    var me = $(this);
    var url = me.attr("href");
    var tabName = me.data("tabName");
    var tabIndex = parseInt(me.data("tabIndex"), 10);
    $.get(url, function(data) {
  var table = $( '<table id="details" class="details" style="font-weight:bold;font-size:10pt;" cellpadding="4" width="100%" cellspacing="0" />'),
      tr = $('<tr clss="d0"/>'),
      td = $('<td/>'),
      th = $('<th/>'),
      table2 = $('<table class="details" style="background-color:#eeeeee;" cellpadding="4" width="100%" bordercolor="cellspacing="0" />');
          tr = $('<tr clss="d1"/>'),
       td = $('<td/>'),
      th = $('<th/>'),
    table2.html(tr.clone());
    table2.append(tr.clone()).append(tr.clone());
    var tr2 = table2.find('tr:first');
    $.each(data[0], function(key,value) {
        if($.inArray(key, ['RequestID','RequestInitiatedDate','RequestStatus','RequestClosedDate']) == -1) {
           tr.clone().html(th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' '); })))
           .append(td.clone().html(value))
           .appendTo(table);
        } else {
          th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' ');
              })).appendTo(tr2);
          td.clone().html(value).appendTo(tr2);
          if (key == 'RequestInitiatedDate') {
               tr2 = tr2.next();
           }
      }
    });
     $(tabName).html(table2).append('<br>').append(table);
     $("table#details tr:even").css("background-color", "#eeeeee");
     $("table#details tr:odd").css("background-color", "#C0C0C0");
      // Activate the tab once the page has loaded:
      $("#tabs").tabs("option", "active", tabIndex);
      }, 'json');
       // Prevent the browser from following the link:
      return false;
      });
     });
  </script>

 <style>
 #doit{
  border-collapse: separate;
  }
 table.details {
       border: 2px inset #8B8378;
       -moz-border-radius: 2px;
             font-size: 12px;
             text-align: left;
 }
 table.details td {
       border: 1px solid black;
       padding: 0.2em 2ex 0.2em 2ex;
       font-size: 12px;
       color: black;
 }
 table.details tr.d0 td {
       background-color: #eeeeee;
             font-size: 12px;
 }
 table.details tr.d1 td {
       background-color: #FEFEF2;
             font-size: 12px;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function()
 {
   $("table#details tr:even").css("background-color", "red");
   $("table#details tr:odd").css("background-color", "blue");
 });
 </script>
 <div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
 <div class="fg-buttonset ui-helper-clearfix">
 <div id="TableToolsToolbar" class="fg-buttonset ui-helper-clearfix"> </div>
 <table><tr><td></td</tr></table>
 <table cellpadding="0" cellspacing="0" border="0" style="width:100%;" class="display" id="cityworks">
 <thead style="background-color:#666362; color:White; font-weight:bold;font-size:10pt;">
 <tr style="border:solid 1px #000000;">
       <th>ID</th>
       <th>Date</th>
       <th>Requestor</th>
       <th>Site Contact</th>
       <th>Location</th>
       <th>Description</th>
       <th>Status</th>
   </tr>
  </thead>
 <tbody>
 </tbody>
 </table>
 </div>
 </div>
 <style>
 table.dataTable tr.odd { background-color: #ffffff;font-size:8pt; }
 table.dataTable tr.even { background-color: white;font-size:8pt; }
 div.dataTables_scroll { clear: both; }
 .dataTables_length { vertical-align:middle;nowrap }
 .dataTables_filter { vertical-align:middle;nowrap; }
 </style>
  </div>
  </div>
  <div id="RequestDetails">

  </div>
 </div>

 Notice #ExistingRequests.

<script type='text/javascript'>//<![CDATA[
$(function(){

$("#doit").on("click", function () {
	var data = [{
        RequestID: 1234,
        RequestInitiatedDate: '01/01/2000',
        RequestStatus: 'OK',
        RequestClosedDate: '31/12/2000',
        WONo: '25728',
        WOStatus: 'In Design',
        WONote: 'Project is too risky',
        WOInitiatedDate: '12/17/2014',
        ProjectedFinishDate: '04/16/2015'
    }];
	$.each(data[0], function (key, value) {
		$("#tableRequestSummary td[name='" + key + "']").html(value);
		$("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
	});
	
	$("#divResultsSummary").show();
	$("#divResultsRelatedWorkActivity").show();
});

});//]]>  
</script>

</head>
<body>
<button id="doit" type="button">Do it Easy</button>

<div id="divResultsSummary" style="display:none">
<div>Request</div>
<div>
	<table id=tableRequestSummary border=1>
		<tr><td>Request ID</td><td name=RequestID></td><td>Request Initiated Date</td><td name=RequestInitiatedDate></td></tr>
		<tr><td>Request Status</td><td name=RequestStatus></td><td>Request Closed Date</td><td name=RequestClosedDate></td></tr>
	</table>
</div>
</div>

<p>some text here... some text here... some text here... some text here... some text here... some text here...</p>

<div id="divResultsRelatedWorkActivity" style="display:none">
<div>Related Work Activity</div>
<div>
	<table id=tableRelatedWorkActivity border=1>
		<tr><td>WO #</td><td name=WONo></td><td>WO Initiated Date</td><td name=WOInitiatedDate></td></tr>
		<tr><td>WO Status</td><td name=WOStatus></td><td>Projected Finish Date</td><td name=ProjectedFinishDate></td></tr>
		<tr><td>WO Note</td><td name=WONote colspan=3></td></tr>
	</table>
</div>
</div>

function v(id){ return $("#"+id).val(); } // Get value
 function v(id){ return $("#"+id).val(); } // Get value
 function CallService() {

   var myToken = v("token");
   var myData  = {
     Address      : v("Address") + '<br/>' + v("building"),

I am using the bgiframe.js library file in my project for a context menu. I know the the $.browser object has been deprecated so I am using the jquery-migrate-1.2.1.js file declared before the bgiframe.js file as shown below and am using it in the code below. This said I am still getting the "jQuery error: JavaScript runtime error: Unable to get property 'msie' of undefined or null reference" error in the bgiframe.js file when access to the $browser is called. Can anyone help?

<script type="text/javascript" src="../js/jquery.js"></script>
 <script type="text/javascript" src="../js/superfish.js"></script>
 <script type="text/javascript" src="../js/hoverIntent.js"></script>
 <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
 <script type="text/javascript" src="../js/bgIframe.js"></script>

$(document).ready(function(){
         $("ul.nav")
         .superfish({
             animation : { opacity:"show",height:"show"}
         })
         .find(">li:has(ul)")
         .mouseover(function(){
             $("ul", this).bgIframe({opacity:false});
         })
         .find("a")
         .focus(function(){
             $("ul", $(".nav>li:has(ul)")).bgIframe({opacity:false});
         });
     });

var Light = function(color) {
   this.color = color;
  };
  
  Light.prototype = {
   ref:null,
   defColor:'black',
   on:function(){
         if(this.ref != null){
          this.ref.css('background-color',this.color);
          window.setTimeout(function(){this.off()}, 5000);
          //window.setTimeout(this.off, 5000);
         } 
        },
   off:function(){
        if(this.ref != null){
         this.ref.css('background-color',this.defColor);
         window.setTimeout(function(){this.on()}, 5000);
         //window.setTimeout(this.on, 5000);
        } 
       }     
  };   

  var l1;
    
  $(document).ready(function(){
   l1 = new Light('red');
   l1.ref=$('#mydiv');
   l1.on();
  });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>


<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript">
    $(function () {
      
         var counter = 1;
          jQuery("#<%= btnD1Add.ClientID %>").click(function (event) {
            event.preventDefault(); //this code is added to prevent the default submit functionality of the button

            jQuery("<li>").appendTo(".Date1More");
            jQuery("<label id='lblD1StartTime" + counter + "'>StartTime:</label><input type='text' id='txtD1StartTime"  +counter + "' name='txtStartTime1'/>").timepicker({
                hourGrid: 10,
                minuteGrid: 10,
                timeFormat: 'hh:mm tt'
            }).appendTo(".Date1More");
            
            counter++;
        });
    });
</script>
       <asp:Button ID="btnD1Add" runat="server" Text="Add more time slots" />
       

               <li>
                    <ul class="Date1More">
                                          
                </ul>
               </li>
</html>

protected string[] txtStartTime1;
   protected void Page_Load(object sender, EventArgs e)
        {
            
           
            txtStartTime1 = Request.Form.GetValues("txtStartTime1");
        }
protected void Page_Init(object sender, EventArgs e)
        {
            try
            {
                if (txtStartTime1.Length > 0)
                {
                    TextBox txtStTime1 = new TextBox();
                    txtStTime1.ID = "txtD1StartTime";
                    txtStTime1.CssClass = "timepicker";
                    this.Controls.Add(txtStTime1);

                }
              
            }
            catch(Exception ex){}

        }