Click here to Skip to main content
15,889,216 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionJSON data not giving the wanted output Pin
Member 113621248-Jan-15 7:52
Member 113621248-Jan-15 7:52 
AnswerRe: JSON data not giving the wanted output Pin
borchef11-Jan-15 22:00
borchef11-Jan-15 22:00 
QuestionSimple Calculation Question Pin
Ryan McElveen2-Jan-15 11:08
Ryan McElveen2-Jan-15 11:08 
SuggestionRe: Simple Calculation Question Pin
Richard MacCutchan2-Jan-15 22:08
mveRichard MacCutchan2-Jan-15 22:08 
Questionneed source code for advance cricket game? Pin
Member 113164161-Jan-15 17:11
Member 113164161-Jan-15 17:11 
AnswerRe: need source code for advance cricket game? Pin
Agent__0071-Jan-15 17:47
professionalAgent__0071-Jan-15 17:47 
AnswerRe: need source code for advance cricket game? Pin
Abhinav S1-Jan-15 19:04
Abhinav S1-Jan-15 19:04 
QuestionHow to integrate these scripts into one??? Pin
samflex23-Dec-14 6:03
samflex23-Dec-14 6:03 
Greetings, experts,

I have this code:

PHP
<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 which is more like the Summary page and when a user clicks on any RequestId, it opens up request details, is my code

Then this code that produced this result:

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


I would like to integegrate this code which produces the result in the demo below into my code above:

http://jsfiddle.net/


Is this possible?

I apologize for the long code.

Thank you very much
QuestionCan someone please help me with a code about a YAHTZEE game ( without using any objects) ???? Pin
Member 1132460720-Dec-14 0:52
Member 1132460720-Dec-14 0:52 
SuggestionRe: Can someone please help me with a code about a YAHTZEE game ( without using any objects) ???? Pin
Richard MacCutchan20-Dec-14 1:47
mveRichard MacCutchan20-Dec-14 1:47 
QuestionConcatenating two fields using javascript? Pin
samflex19-Dec-14 8:35
samflex19-Dec-14 8:35 
AnswerRe: Concatenating two fields using javascript? Pin
Graham Breach19-Dec-14 21:55
Graham Breach19-Dec-14 21:55 
GeneralRe: Concatenating two fields using javascript? Pin
samflex20-Dec-14 1:27
samflex20-Dec-14 1:27 
GeneralRe: Concatenating two fields using javascript? Pin
Tushar sangani20-Dec-14 1:32
professionalTushar sangani20-Dec-14 1:32 
QuestionjQuery bgiframe.js error: "jQuery error: JavaScript runtime error: Unable to get property 'msie' of undefined or null reference" Pin
Stephen Holdorf15-Dec-14 23:41
Stephen Holdorf15-Dec-14 23:41 
AnswerRe: jQuery bgiframe.js error: "jQuery error: JavaScript runtime error: Unable to get property 'msie' of undefined or null reference" Pin
Stephen Holdorf16-Dec-14 7:03
Stephen Holdorf16-Dec-14 7:03 
Questionjavascript slider Pin
Member 112981529-Dec-14 5:25
Member 112981529-Dec-14 5:25 
AnswerRe: javascript slider Pin
Richard MacCutchan9-Dec-14 6:15
mveRichard MacCutchan9-Dec-14 6:15 
QuestionRe: javascript slider Pin
ZurdoDev15-Dec-14 3:08
professionalZurdoDev15-Dec-14 3:08 
Questionweird issue in simple class declaration Pin
akhilonly0078-Dec-14 5:24
akhilonly0078-Dec-14 5:24 
AnswerRe: weird issue in simple class declaration Pin
Richard Deeming9-Dec-14 2:19
mveRichard Deeming9-Dec-14 2:19 
Questionsum two button values added in the inputbox using jquery Pin
Member 112879875-Dec-14 1:16
Member 112879875-Dec-14 1:16 
AnswerRe: sum two button values added in the inputbox using jquery Pin
Richard MacCutchan5-Dec-14 3:15
mveRichard MacCutchan5-Dec-14 3:15 
AnswerRe: sum two button values added in the inputbox using jquery Pin
ZurdoDev5-Dec-14 4:01
professionalZurdoDev5-Dec-14 4:01 
Questionhow to bind data to infragistics webhierarchicaldatagrid through javascript im having data in datatable i need to bind this dt to webhierarchicaldatagrid Pin
code project member4-Dec-14 19:01
code project member4-Dec-14 19:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.