Solved

For the super jQuery gurus, how do I modify this code?

Posted on 2014-12-22
23
96 Views
Last Modified: 2014-12-26
Hello again mates.

This fiddle shows our current table and data layout.

The fiddle shows top portion with two rows and four fields.

Then middle portion.

The code below produced the results on fiddle.

$("#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();
          }
     }
   });

Open in new window


I am trying to modify the code to add bottom portion that will read:

Related Activity

Then repeat the two top rows here at the bottom but will different fields.

Can this be done?

I will be happy to provide more info.
0
Comment
Question by:sammySeltzer
  • 11
  • 11
23 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 40513445
not clear enough for me... can you post a screenshot of what you need?
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40513516
Hi HainKurt,

Thanks for your response.

Sure, Please see screenshot.

Initially, the middle portion looks like this:

RequestID	1631
RequestInitiated Date	12/17/2014
RequestStatus	Open
RequestClosed Date	12/31/2014
Department Information Technology
Requestor Name	Redacted
Requestor Phone	Redacted
Requestor Email	Redacted
Request Type	Pest Control / Exterminator
Request Comments	Redacted
Request Location	B870013 Information Technology Record Center
Primary Site Contact	Redacted
Secondary Site Contact	Redacted

Open in new window


When the top portion was added, the following were moved to the top:
RequestID	1631
RequestInitiated Date	12/17/2014
RequestStatus	Open
RequestClosed Date	12/31/2014

Open in new window


This portion of the code below made that happen:

       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();
          }

Open in new window


I must admit that someone assisted with this.

Now, we would like the bottom portion to have the following fields:

Related  Work Activity

WO#	25728	WO Initiated Date	12/17/2014
WO Status	workorder.[WOStatus]	Projected Finish Date	Workorder.[WOProjFinishDate]
WO Note	Workorder.[WOInstructions]

Open in new window


Please see screenshot.

I truly appreciate your assistance.

Please let me know if you need additional information.
order.jpg
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40513859
not sure what to do/say, but make it easy, KISS

have a look at this:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='jquery-1.9.1.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
	<style>.divResults table {border:1px gray solid;} </style>
<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);
	});
	
	$("#divResults").show();
});

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

</head>
<body>
<button id="doit" type="button">Do it Easy</button>
<div id="divResults" style="display:none">

<div><b>Request</b></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>

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

<div><b>Related Work Activity</b></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>

</body>
</html>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40513861
here is the demo for code above...
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40513872
the one I provided is very simple, and flexible... ask if you need more help...
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40513891
If this works, I will KISS your feet.

I really wanted it simplified so I wouldn't be running to you guys for changes.

Trying to incorporate it into my code now.

Will be back...
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40513933
or you can do this...

created 2 divs: divResultsSummary, divResultsRelatedWorkActivity, initially hidden
when you click button, tables are populated and shown... so, you can move tables anywhere in your html...
also, you can change layout, add/remove columns (make sure "td name=xxxxx" matches your data key)

this is the code that populates those tables, easy peasy

	$.each(data[0], function (key, value) {
		$("#tableRequestSummary td[name='" + key + "']").html(value);
		$("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
	});

Open in new window


full test html page:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='jquery-1.9.1.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
	<style>
		.divResultsSummary table {border:1px gray solid;} 
		.divResultsRelatedWorkActivity table {border:1px gray solid;} 
	</style>
<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><b>Request</b></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><b>Related Work Activity</b></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>

</body>
</html>

Open in new window

0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40513966
Ok, HainKurt,

Maybe, I am stretching it but I have run into a wall of confusion.

I "dumping" more code and please forgive me for doing so.

I am bolding the areas that I think your code will go in.

How do I fit your code into mine?

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

This is more like the Summary page and when a user clicks on any RequestId, it opens up request details.

That's where the magic you did should go in and the area you have:

some text here... some text here... some text here... some text here... some text here... some text here... is where the data on the Body portion goes in.

But I really need to get the Details worked out first.

I think that <div id="RequestDetails"> is your own version of
<div id="divResultsSummary" style="display:none">


Is this doable?

Thanks a lot
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40515077
Does anybody have any ideas how I can make this work?

I know it is a bit long and klunky but I would really appreciate any assistance.
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40516688
you need to embed my solution into yours

$("#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) {

    // >>>>> here

    $.each(data[0], function (key, value) {
      $("#tableRequestSummary td[name='" + key + "']").html(value);
      $("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
    });
	
    $("#divResultsSummary").show();
    $("#divResultsRelatedWorkActivity").show();

    // >>>>> here
   };
}

Open in new window


if you wish just follow same logic and create new divs/tables with td name=xxxxx where xxxxx is key name of your data... and this code will populate all of them... add a new line for new table (style, loop, after loop show)...
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40517099
Ok, here is exactly the code. As stated, it has many moving parts.

I am sure you would have reviewed the screenshot I sent.
On that screenshot, you will see Existing Records tab.

On your demo, you click on do it Easy and you see the details screen with the top, main and Related Activities.

So, on the screenshot, you click on any link on Existing Requests tab and the summary page opens in the Details tab.

Your code is sort of opening in the Details tab but not capturing most of the fieldnames and associated data.

These were working just fine prior to my attempt at integrating with your code.

Only part that I have problem putting together is the Relative Activities section.

$("#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) {
         $.each(data[0], function (key, value) {
             $("#tableRequestSummary td[name='" + key + "']").html(value);
             $("#divResultsMain td[name='" + key + "']").html(value);
             $("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
       });

       $("#divResultsSummary").show();
        $("#divResultsMain").show();
       $("#divResultsRelatedWorkActivity").show();

 //   $(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>
	<style>
		.divResultsSummary table {border:1px gray solid;}
		.divResultsRelatedWorkActivity table {border:1px gray solid;}
	</style>
 </div>
 </div>
 <div id="RequestDetails">
<div id="divResultsSummary" style="display:none">
<div><b>Request</b></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 id=divResultsMain  style="display:none">
   <table>
     <tr><td>Assigned To: </td><td name=AssignedTo></td></tr>
     <tr><td>Assigned Date: </td><td name=AssignedDate></td></tr>
   </table>
 </div>
</div>

<div id="divResultsRelatedWorkActivity" style="display:none">
<div><b>Related Work Activity</b></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>
 </div>
</div>

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 51

Expert Comment

by:HainKurt
ID: 40517172
$.get(url, function(data) {

>>>

    $.get(url, function(data) {alert(data);

and post the screenshot of that alert box...
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40517199
Here it is.
alert.png
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40517207
not good :)

then do this

       $.each(data[0], function (key, value) {
             $("#tableRequestSummary td[name='" + key + "']").html(value);
             $("#divResultsMain td[name='" + key + "']").html(value);
             $("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
       });

>>>

var keys;
$.each(data[0], function (key, value) {
keys=keys + ";" + key;
             $("#tableRequestSummary td[name='" + key + "']").html(value);
             $("#divResultsMain td[name='" + key + "']").html(value);
             $("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
       });
alert(keys);

then post the screenshot of message box (it should have all key values that we need to refer)
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40517217
Got this:

undefined;RequestID;RequestInitiatedDate;RequestStatus;RequestClosedDate;WO#;WO InitiatedDate;Department;RequestorName;RequestorWorkPhone;RequestorEmail;RequestType;RequestComments;RequestLocation;PrimarySiteContact;SecondarySiteContact

That's all I got
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 40517224
then replace td names

<table id=tableRelatedWorkActivity border=1>
		<tr><td>WO #</td><td name="WO#"></td><td>WO Initiated Date</td><td name="WO InitiatedDate"></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>

Open in new window


but you don't have data for other fields...

only "WO#" & "WO InitiatedDate"

i wrapped names with " since # and space would create issue... you can remove other td's since you dont get that data...
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40517304
I replace WO# with WONo and then removed all spaces for those with spaces like WO InitiatedDate now becomes WOInitiatedDate but still no data.

We are making really good progress though.

Top and middle levels seem to be populating correctly.
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40517343
NO! you should use this, as is ^^^ @ ID: 40517224
your data has thses : "WO#" & "WO InitiatedDate"

thats why you should use this

<table id=tableRelatedWorkActivity border=1>
		<tr><td>WO #</td><td name="WO#"></td><td>WO Initiated Date</td><td name="WO InitiatedDate"></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>

Open in new window


but you dont get the values for other columns, and they will stay empty, until somebody change that part and send the other fields as well...

or you can just remove the empty ones and add later when you have more data...
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40517380
I see. So, only those with data will display the data?

In order words, if you have two fields, one has data and the other is null, nothing gets displayed even for those with data?

Any workaround for this?

I tried isnull but still nothing.

If I display only the fields with data, then yes.
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40517646
it will fill data if you have something in corresponding key

if you key has "WO#" but not "WOStatus" then

<td>WO Number</td><td name="WO#"> .... WO# will be here ... </td>
<td>WO Status</td><td name="WOStatus"> .... this will remain null/empty ... </td>
0
 
LVL 58

Expert Comment

by:Gary
ID: 40518078
$("#doit").on("click", function () {
    var data = [{
        RequestID: 1234,
        RequestInitiatedDate: '01/01/2000',
        RequestStatus: 'OK',
        RequestClosedDate: '31/12/2000',
        FirstField: 'first value',
        SecondField: 'second value',
        ThirdField: 'third value',
        'WO#': 1234,
        WOInitiatedDate: '01/01/2000',
        WOStatus: 'OK',
        ProjectedFinishDate: '31/12/2000',
        WONote: 'first value'
    }];
    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');

    table3 = $('<table    class="details"    style="background-color:#eeeeee;"    cellpadding="4" width="100%"    bordercolor="cellspacing="0"       />');
    tr = $('<tr clss="d1"/>'),
    td = $('<td/>'),
    th = $('<th/>'),
    table3.html(tr.clone());
    table3.append(tr.clone()).append(tr.clone());
    var tr3 = table3.find('tr:first');
	
	$.each(data[0], function (key, value) {
        if ($.inArray(key, ['RequestID', 'RequestInitiatedDate', 'RequestStatus', 'RequestClosedDate','WO#', 'WOInitiatedDate', 'WOStatus', 'ProjectedFinishDate','WONote']) == -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 if ($.inArray(key, ['RequestID', 'RequestInitiatedDate', 'RequestStatus', 'RequestClosedDate']) >=0) {
            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();
            }
        }
		else if ($.inArray(key, ['WO#', 'WOInitiatedDate', 'WOStatus', 'ProjectedFinishDate','WONote']) >=0) {
            th.clone().html(key.replace(/[a-z][A-Z]/g, function (s) {
                return s.split('').join(' ');
            })).appendTo(tr3);
            td.clone().html(value).appendTo(tr3);

            if (key == 'WOInitiatedDate'||key == 'ProjectedFinishDate') {

                tr3 = tr3.next();
            }
        }
		
    });
	
	
    $('#results').html(table2).append('<br>').append(table).append('<br>').append(table3);
    $("#details tr:even").css("background-color", "#eeeeee");
    $("#details tr:odd").css("background-color", "#C0C0C0");

    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");
 });

Open in new window


Could probably reduced to one table
0
 
LVL 28

Author Comment

by:sammySeltzer
ID: 40518481
Hi Gary,

HainKurt's solution works great.

The thing I love about it the most is that it is so simple now that making future changes won't be as daunting as it has been so far.

Thanks for your post though.

HainKurt, that's a lot.

I really appreciate it.
0
 
LVL 28

Author Closing Comment

by:sammySeltzer
ID: 40518483
excellent
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now