JavaScript problem with EnhancedHTML module

This topic contains 16 replies, has 3 voices, and was last updated by  AK 1 year, 10 months ago.

  • Author
    Posts
  • #9909

    Charles Downing
    Participant

    I've created a HTML report using the EnhancedHTML module from February 2013 version of "Creating HTML Reports in PowerShell" book by Don. The HTML is generated, but when I load the page in a browser, (Chrome or IE), I get a DataTables warning for each table in the report:

    "DataTables warning: Attempted to initialise DataTables on a node which is not a table: DIV"

    Unfortunately, that's all I get... No line numbers, etc. When I load it in FF with Firebug, I just a "ReferenceError: $ is not defined" error in the Firebug console.

    Any ideas? What other information would be useful for figuring this out?

    Here's a sample of the rendered HTML and javascript, (scrubbed):

    
    
    
    
    

    System Report for

    ♦ Special Circumstances

  • #9910

    Don Jones
    Keymaster

    I'd need to see your PowerShell code. When you generate the final HTML, you're giving it "divSC" as the thing to make dynamic, but it needs "tableSC," which is the ID of the actual table.

    E.g., you're giving it the DIV, not the TABLE, as the error indicates.

  • #9911

    Charles Downing
    Participant

    You were absolutely correct... Simple problem that I was just overlooking.
    Relevant code:

    $params = @{'As'='Table';
                    'PreContent'='

    ♦ Special Circumstances

    '; 'TableCssID'='tableSC'; 'DivCssID'='divSC'; 'EvenRowCssClass'='even'; 'OddRowCssClass'='odd'; 'MakeHiddenSection'=$true; 'TableCssClass'='grid'} if ($AVReport.SpecialCircumstancesList -ne $null) { $html_sc = $AVReport.SpecialCircumstancesList | ConvertTo-EnhancedHTMLFragment @params | Out-String } else { $html_sc = "" | ConvertTo-EnhancedHTMLFragment @params | Out-String } $CSSIDs += "divSC" $HTMLFrags += $html_sc Write-Host "html_sc: $html_sc" ... $params = @{'CssStyleSheet'=$style; 'Title'="System Report for $computer"; 'PreContent'="

    System Report for $computer

    "; 'CssIdsToMakeDataTables'=$CSSIDs; 'HTMLFragments'=$HTMLFrags; 'jQueryDataTableUri'='F:\Storage\Scripts\Windows\Modules\jquerydatatable.js'; 'jQueryUri'='F:\Storage\Scripts\Windows\Modules\jquery.js'} ConvertTo-EnhancedHTML @params | Out-File -FilePath $filepath

    As you can see, I was adding "divSC" to my CSSIDs arrary instead of "tableSC". I corrected that on all of my sections, and that error went away. I'm seeing some weird stuff with my even/odd row styles, but I'll dig into that next.

    Thanks, Don! I beat my head against this for a couple hours yesterday, and it was just that simple!

  • #9923

    Charles Downing
    Participant

    All right, Don, help me out on this one...

    HTML looks like this:

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

    System Report for

    ♦ No Antivirus List

    But page looks like this (problem with even/odd rows):
    [IMG]http://i.imgur.com/9ABhMeT.png[/IMG]

    Code that generated HTML:

    #========================================================================
    # Created with: SAPIEN Technologies, Inc., PowerShell Studio 2012 v3.1.22
    # Created on:   9/5/2013 9:31 AM
    # Created by:   cmdowning
    # Organization: BCBSMS
    # Filename:     
    #========================================================================
    
    Import-Module EnhancedHTML
    
    function Create-HTMLReport {
    	[CmdletBinding()]
    	param (
    		[Parameter(ValueFromPipeline=$true,Mandatory=$true)]$AVReport,
    		[Parameter(ValueFromPipeline=$false,Mandatory=$true)]$Path
    	)
    	
    	$style = @"
    	
    "@
    	
    	$CSSIDs = @()
    	$HTMLFrags = @()
    	$filepath = Join-Path -Path $Path -ChildPath "AVReport2.html"
    
    
    	$params = @{'As'='Table';
                    'PreContent'='

    ♦ No Antivirus List

    '; 'TableCssID'='tableNoAV'; 'DivCssID'='divNoAV'; 'EvenRowCssClass'='even'; 'OddRowCssClass'='odd'; 'MakeHiddenSection'=$true; 'TableCssClass'='grid'} if ($AVReport.NoAVList -ne $null) { $html_noav = $AVReport.NoAVList | ConvertTo-EnhancedHTMLFragment @params | Out-String } else { $html_noav = "" | ConvertTo-EnhancedHTMLFragment @params | Out-String } $CSSIDs += "tableNoAV" $HTMLFrags += $html_noav $params = @{'CssStyleSheet'=$style; 'Title'="System Report for $computer"; 'PreContent'="

    System Report for $computer

    "; 'CssIdsToMakeDataTables'=$CSSIDs; 'HTMLFragments'=$HTMLFrags; 'jQueryDataTableUri'='F:\Storage\Scripts\Windows\Modules\jquerydatatable.js'; 'jQueryUri'='F:\Storage\Scripts\Windows\Modules\jquery.js'} ConvertTo-EnhancedHTML @params | Out-File -FilePath $filepath } Create-HTMLReport -AVReport $testAVReport -Path "C:\Scripts\AVReport\" -Verbose
  • #9925

    Don Jones
    Keymaster

    Well, we know the module works because we can see the CSS style being applied in the final HTML. From there, it's up to the browser to render the HTML. Have you tried this in a different browser? I copied this into a static HTML file and it's working fine in Safari.

  • #9928

    Charles Downing
    Participant

    Yeah, the HTML looks fine... And yes, I see the same results in Chrome and IE. Still can't get Firefox to run the javascript. Even copying/pasting into a static html file gives me the same results. Chrome and Safari on a Mac do the same thing.

    I'm pretty confident the module is working, but I was curious if anyone else had seen this kind of behavior.

  • #9932

    Don Jones
    Keymaster

    So, when I tested, I removed the SCRIPT tags. It's possible the browsers aren't liking loading those from a local path like that. You might try that as a troubleshooting step. In FF and Safari, and in IE with Dev Tools on, you can also right-click one of those rows and select "Inspect Element." It's a way to se where the styling is being applied from. Takes some getting used to (and not something I can teach well), but I've used it a lot.

  • #9933

    Charles Downing
    Participant

    Right. Forgot to mention that I had done that in Chrome, and forgot what the results looked like. For whatever reason, starting with row 3, it has both classes listed for

    PGPWS SOD701221

    Now I remember why I didn't do much web programming...

  • #9934

    Don Jones
    Keymaster

    Well, that's why the formatting is whack. But I'm not sure what would make the module do that. You'd have to troubleshoot the bit where it walks the table and applies the class. It's almost like it's being fed to it twice or something.

  • #9936

    Charles Downing
    Participant

    So just to add to the fun...

    • if I remove the "'EvenRowCssClass'='even';" and "'OddRowCssClass'='odd';" lines from the $params hash table assignment and re-create the html, I get table rows with no classes assigned, but the even and odd rows are rendered differently, (i.e. even rows are grey, odd rows are white).
    • If I rename the .odd and .even classes in the stylesheet to .odd2 and .even2, for example, and re-create the html, I get table rows with no classes assigned, and the even and odd rows are NOT rendered differently, (i.e. all rows are white).
    • If I leave the classes renamed as .odd2 and .even2, change the colors to blue and pink, respectively, and then add the EvenRowCssClass and OddRowCssClass lines back to the hash table using .odd2 and .even2 class names, it works as expected. (I get odd lines that are blue and even ones that are pink)

    I got to doing a little digging into jquerydatatable.js and then on the DataTables website and found that DataTables automagically uses the .odd and .even classes to style the rows. (See Striping on http://datatables.net/styling/custom_classes)

    So now it at least makes sense! I have no idea why your example worked when you wrote the book and didn't work this time, but at least I know why. If you want to use the same even and odd row styles for all DataTables on a page, then you can use the .odd and .even classes and there is no need to use the OddRowCssClass and EvenRowCssClass params for the ConvertTo-EnhancedHTMLFragment function. If however you are going to use different styles for different DataTables on the same page, make sure that you don't have any classes named .odd and .even and use the OddRowCssClass and EvenRowCssClass params.

  • #9937

    Charles Downing
    Participant

    And I don't guess I ever mentioned it, but I really like the module and the ebook! This is my first time to use it, (obviously), and it's so much easier to use the module you created than to try and hack out the HTML myself. Also, I wouldn't have put enough effort into it to have the pretty DataTables and javascript that your module provides! Thanks very much!

  • #9940

    Don Jones
    Keymaster

    So, I should point out that the dynamic datatable thing does its own coloring. That might be what you're running into. And I think it might use class names odd/even to do so.

  • #9948

    Charles Downing
    Participant

    Yeah... you were about 12 mins too late on that pick up... 😉

  • #9952

    Charles Downing
    Participant

    FYI, I found a little bug in the EnhancedHTML module. Just a couple of minor tweaks to fix it, and it may have broken something else...

    In some further testing, I found that the highlighting didn't work if you had a list, ('AS'='list'), before a table, ('As'='table'). When I looked at the rendered HTML for the list, I noticed that the TD tags for the $value property were weird. No cell classes were specified, but the TD tags were getting class attributes with a value of "class="list". That was putting an extra pair of quotes on the first line, and that messed up the rest of the html. Also, there was no

    tag for the list, and there was no

    row for the list.

    Here's the modified code in the ConvertTo-EnhancedHTMLFragment function:

    #CMD - had to add table header with 2 columns to get even/odd row css to work
    			if ($As -eq 'list') {
    				Write-Output ""
    			}
                foreach ($prop in $properties) {
                    Write-Verbose "Processing property"
                    $name = $null
                    $value = $null
                    $cell_css = ''
                    if ($prop -is [string]) {
                        Write-Verbose "Property $prop"
                        $name = $Prop
                        $value = $object.($prop)
                    } elseif ($prop -is [hashtable]) {
                        Write-Verbose "Property hashtable"
                        if ($prop.ContainsKey('cssclass')) { $cell_css = $Object | ForEach $prop['cssclass'] }
                        if ($prop.ContainsKey('css')) { $cell_css = $Object | ForEach $prop['css'] }
                        if ($prop.ContainsKey('n')) { $name = $prop['n'] }
                        if ($prop.ContainsKey('name')) { $name = $prop['name'] }
                        if ($prop.ContainsKey('label')) { $name = $prop['label'] }
                        if ($prop.ContainsKey('l')) { $name = $prop['l'] }
                        if ($prop.ContainsKey('e')) { $value = $Object | ForEach $prop['e'] }
                        if ($prop.ContainsKey('expression')) { $value = $tObject | ForEach $prop['expression'] }
                        if ($name -eq $null -or $value -eq $null) {
                            Write-Error "Hashtable missing Name and/or Expression key"
                        }
                    } else {
                        Write-Warning "Unhandled property $prop"
                    }
                    if ($As -eq 'table') {
                        Write-Verbose "Adding $name to header and $value to row"
                        $headerrow += "$name"
                        $datarow += "$value"
                    } else {
                        $wrote_first_line = $true
                        $headerrow = ""
    					#CMD - using $css was causing some weird quotation mark results in class tags
                        #$datarow = "$name :$value"
    					$datarow = "$name :$value"
                        Write-Output "$datarow"
                    }
                }
    

    And the new HTML:

    
    

    I know that the module was a teaching tool and not necessarily a "production" module, but hopefully this will help someone else down the line. It was frustrating as crap to get through this, but it was a good learning experience and a little fun troubleshooting something I didn't write!

    Thanks for the help!

  • #9954

    Don Jones
    Keymaster

    I'm not sure I ever intended alternate-row coloring to work with the "-As List" mode, to be honest. I'm actually looking to rewrite the entire module to make it a bit easier to use – I'd like it to auto-assign some of those IDs, for example, rather than making you supply them, somehow – and I'll keep this conversation in mind for when I do. The new module will be a big part of some classes I'm teaching, and will definitely be more production-class. It'll go out with a revision of the ebook at some point.

  • #9961

    Charles Downing
    Participant

    No worries. And realize that the automatic alternate-row coloring didn't work anywhere on the page if the "-As List" table was first. If the table header isn't up there, I guess it messes up DataTables processing...

    Anyway, I'll still use the module in this and several other projects, and I'll look forward to the new one!

  • #33161

    AK
    Participant

    Hello Guys,
    Was wondering about using EnhancedHTML2 and having a collapsible/expandable or fixed height+scrollable right column in final report (ie, left column would contain verbose info, therefore, needs to be "minimized" until clicked or fixed height scrollable...).

You must be logged in to reply to this topic.