Databases
StackOverflow2013
Postsdbo
POToggle Not Working With New Browsers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POToggle Not Working With New Browsers
    primarykey
    data
    text
    <p>I'm working with a timesheet application that I'm having some problems with hiding/unhiding a panel using different browsers. See screenshots.</p> <p>Image 1: This is the general start page for what I'm doing. Click on the button.</p> <p>Image 2: This is the expected output. It's the output I get in IE8.</p> <p>Image 3: This is the output for the latest Chrome. The panel is shown (improperly, notice it doesn't span the table, it's only one column wide) for a split second and hidden again. I get the same result in the latest Firefox and IE.</p> <p><img src="https://i.stack.imgur.com/Zifdf.png" alt="This is the general start page for what I&#39;m doing. Click on the button."> <img src="https://i.stack.imgur.com/6Q98D.png" alt="This is the expected output. It&#39;s the output I get in IE8."> <img src="https://i.stack.imgur.com/pAC0g.png" alt="This is the output for the latest Chrome. The panel is shown (improperly) for a split second and hidden again. I get the same result in the latest Firefox."></p> <p>This is the Javascript for the toggling.</p> <pre><code>function toggleVisibility(panel) { if (panel.style.display == "none") { panel.style.display = ""; } else { panel.style.display = "none"; } } </code></pre> <p>This is the aspx.cs calling the toggle</p> <pre><code> TableCell showCell = new TableCell(); HtmlButton showButton = new HtmlButton(); showButton.Attributes.Add("onClick", "toggleVisibility(panel" + timesheet.timesheetId.ToString() + ")"); showCell.Controls.Add(showButton); TableCell nameCell = new TableCell(); HyperLink nameLink = new HyperLink(); nameLink.NavigateUrl = "./timesheet.aspx?timesheetId=" + timesheet.timesheetId.ToString()+ "&amp;empNum=" + timesheet.employeeId + "&amp;PopUp=" + _approverEmployeeId; nameLink.Text = employeeName; nameLink.Target = "_blank"; nameCell.Controls.Add(nameLink); </code></pre> <p>Further down in the aspx.cs file is where the panel is defined.</p> <pre><code> TableRow childRow = new TableRow(); TableCell childCell = new TableCell(); childCell.ColumnSpan = headerRow.Cells.Count; childCell.Controls.Add(childTable); childRow.Controls.Add(childCell); childRow.Attributes.Add("Style", "Display: none"); childRow.ID = "panel" + timesheet.timesheetId; summaryTable.Rows.Add(headerRow); summaryTable.Rows.Add(childRow); </code></pre> <p>When I remove <em>childRow.Attributes.Add("Style", "Display: none")</em>, the table is shown properly in all browsers. Clicking on the button tied to toggle though it hides and then shows the table in the newer browsers.</p> <p>Here's a snippet of the HTML. HTML for the entire page can be found here <a href="http://asalim.net/approval.txt" rel="nofollow noreferrer">http://asalim.net/approval.txt</a>.</p> <pre><code> &lt;table id="summaryTable" rules="all" bordercolor="Silver" border="1" style="border-color:Silver;border-style:None;height:32px;width:768px;Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 136px"&gt; &lt;tr&gt; &lt;td&gt;Show Detail&lt;/td&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt;EmployeeNumber&lt;/td&gt; &lt;td&gt;Approved&lt;/td&gt; &lt;td&gt;Reject&lt;/td&gt; &lt;/tr&gt; &lt;tr id="summary94458" style="border-color:Black;border-width:1px;border-style:Solid;"&gt; &lt;td&gt;&lt;button onClick="toggleVisibility(panel94458)"&gt;&lt;/button&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="./timesheet.aspx?timesheetId=94458&amp;amp;empNum=051006&amp;amp;PopUp=051006" target="_blank"&gt;XXXXXXXXXXXXXXXXXXXXXXX&lt;/a&gt;&lt;/td&gt; &lt;td&gt;051006&lt;/td&gt; &lt;td&gt;&lt;input id="allApproved94458" type="checkbox" name="allApproved94458" onclick="approveLines(this, 94458);" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" name="reject94458" value="Reject" onclick="window.open( './reject.aspx?empNum=051006&amp;amp;timesheetId=94458');" language="javascript" id="reject94458" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="panel94458" style="Display: none"&gt; &lt;td colspan="5"&gt;&lt;table id="detailTable94458" bordercolor="Black" border="0" style="border-color:Black;border-width:1px;border-style:Solid;width:100%;"&gt; &lt;tr&gt; &lt;td&gt;Description&lt;/td&gt; &lt;td&gt;Job&lt;/td&gt; &lt;td&gt;Extra&lt;/td&gt; &lt;td&gt;Cost Code&lt;/td&gt; &lt;td&gt;Reg Hours&lt;/td&gt; &lt;td&gt;OT Hours&lt;/td&gt; &lt;td&gt;Mileage&lt;/td&gt; &lt;td&gt;Approved&lt;/td&gt; &lt;/tr&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USA Salim
    1. USA Salim
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POToggle Not Working With New Browsers
      1. USA Salim
      1. VTBountyStart
    2. VO
      singulars
      1. POToggle Not Working With New Browsers
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you post some *minimal* HTML that shows the issue? The *toggleVisibilty* function looks fine. Perhaps test for "none" first, e.g. `panel.style.display = panel.style.display == 'none'? 'block' : 'none';`
      singulars
      1. POToggle Not Working With New Browsers
      1. USRobG
    2. COUpdated code above.
      singulars
      1. POToggle Not Working With New Browsers
      1. USA Salim
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload