Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 118
  • Last Modified:

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

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
sammySeltzer
Asked:
sammySeltzer
  • 11
  • 11
1 Solution
 
HainKurtSr. System AnalystCommented:
not clear enough for me... can you post a screenshot of what you need?
0
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HainKurtSr. System AnalystCommented:
here is the demo for code above...
0
 
HainKurtSr. System AnalystCommented:
the one I provided is very simple, and flexible... ask if you need more help...
0
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
sammySeltzerAuthor Commented:
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
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
$.get(url, function(data) {

>>>

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

and post the screenshot of that alert box...
0
 
sammySeltzerAuthor Commented:
Here it is.
alert.png
0
 
HainKurtSr. System AnalystCommented:
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
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
sammySeltzerAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
GaryCommented:
$("#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
 
sammySeltzerAuthor Commented:
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
 
sammySeltzerAuthor Commented:
excellent
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now