JavaScript

myData.descriptions= $("#descriptions").val();

<div class="my-section" id="WaitListDiv">
    <p>
        It is recommended that this child be placed on a waiting list as soon as possible.  This allows all ELMS
        users at the Waiting List site(s) the ability to provide services to the child in a more timely fashion.
    </p>
    <div id="OptOutDiv">
        <asp:CheckBox ID="chkOptOut" runat="server" Text="Parent Does Not Wish to Add Child to Waiting List" AutoPostBack="true" />
        <span id="spnOptOutReason" runat="server">
        <asp:Label ID="lblOptOutReason" runat="server" AssociatedControlID="txtOptOutReason" Text="Reason:" />
        <asp:TextBox ID="txtOptOutReason" runat="server" DataField="OptOutOfWaitListReason" DataType="PrescreenData" />
        <asp:Button ID="btnSaveReason" runat="server" Text="Save Opt Out Reason" />
        </span>
    </div>

    <elms:AvailableWaitingLists runat="server" ID="waitList" />
</div>

optOut: function (event) {
    var waitListDiv = $("[id$='grdWaitList']").closest("div.my-container");

    if (event.target.checked) {
        waitListDiv.hide("fast");
        //OptOutDiv.show("fast");

        var j = jQuery.noConflict();
        j('#OptOutDiv').show("fast");

        //$("[id$='spnOptOutReason']").show("fast");
        j('#spnOptOutReason').show("fast");
    } else {
        waitListDiv.show("fast");

        $("[id$='spnOptOutReason']").hide("fast");

        //If they didn't set a reason, no need to save anything ...
        if ($("[id$='txtOptOutReason']")[0].value != "") {
            $("[id$='txtOptOutReason']")[0].value = "";
            ELMS.Common.sneakySave($("[id$='chkOptOut']")[0].name, true, ELMS.Page.sneakySave_Callback, ELMS.Page._originalOptOutCallback);
        }
    }
},

<script type="text/javascript"  >
         function readURL(input) {
             if (input.files && input.files[0]) {
                 var reader = new FileReader();

                 reader.onload = function (e) {
                     $('#imgPreview').attr('src', e.target.result);
                     // save to folder in here?

                 }
                 reader.readAsDataURL(input.files[0]);
                 // save to folder in here?
             }
         }
         $("#FileUploadImage").change(function () {
             readURL(this);
         });

    </script>

script.js:7 [Object, Object, Object]0: Object1: Object2: Objectlength: 3__proto__: Array[0]

$(document).ready(function(){

    var url         = "assets/js/data.json";

    $.getJSON(url).done(function(response) {

    var nodes = response.map(function(i) {
        return $('<div>').append(
            $('<div>', {class: 'title'}).text(i.title),
            $('<div>', {class: 'author'}).text(i.author),
            $('<div>', {class: 'body'}).text(i.body)
        );

        console.log(response);
    });
});

});//Ready function closed

<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>