Databases
StackOverflow2013
Postsdbo
POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
    primarykey
    data
    text
    <p>I have a table of search results as shown in the below image. If i click on the '+' on the left hand corner of each row, it expands to show another JSP with further details about the line item. Please not that when i click on the expand (+) sign, it changes to a collapse(-) sign.<img src="https://i.stack.imgur.com/avYKg.png" alt="enter image description here"></p> <p>This functionality works fine in IE but not in Chrome or firefox. In chrome or FF, the + does not open a dropdown table when clicked first time. it opens the second time.. but the + does not change to -. As a result, when i click on it again, it opens another dropdown table with the same details. Does not collapse it. Belwo is the way my table is displayed and the java script i sue to acheive this functionality. Please suggest why this works different in different browsers and how to make it work same way in all browsers. I also wanted to check if there are any Javascript to Jquery converters online.</p> <pre><code>&lt;display:column headerClass="tableHead" title=" " style="text-align:center" media="html"&gt; &lt;img class="expand" alt="" src="images/plus.jpg" onclick="toggleHawbInfo(this.parentNode.parentNode);" /&gt; &lt;/display:column&gt; </code></pre> <p>Thats the column. and below is the javascript.</p> <pre><code>function toggleHawbInfo(theRow) { var tbl = document.getElementById('hawbTable'); if (toggleTree(theRow) == "expand") { getHawbInfo(theRow); workingHAWBID = theRow.rowIndex; } else { deleteChild(tbl, theRow); workingHAWBID = null; } } function toggleTree(theRow) { var imgEl = theRow.cells[0].firstChild; if (imgEl.className == "expand") { imgEl.className = "collapse"; imgEl.src = "images/minus.jpg"; return "expand"; } else { imgEl.className = "expand"; imgEl.src = "images/plus.jpg"; return "collapse"; } } function getHawbInfo(theRow) { var tbl = document.getElementById('hawbTable'); var hawb = theRow.cells[1].innerHTML; var customer = document.getElementsByName("customer")[0].value; var prodType = document.getElementsByName("product")[0].value; var grChecked = document.getElementById('hawb_' + hawb).checked; insIndex = theRow.rowIndex + 1; var hawbRow = tbl.insertRow(insIndex); hawbRow.insertCell(0); //spacer var hawbCol = hawbRow.insertCell(1); hawbRow.level = "child"; hawbCol.colSpan = "16"; //hawbCol.innerHTML = '&lt;iframe style="width:99%;height:120px;" name ="hawbDocDtls" scrolling="no" frameborder="1" src="HawbSearchDtlAction.do?hawb='+ hawb +'" &gt;&lt;/iframe&gt;'; hawbCol.innerHTML = "&lt;table width='100%'&gt;" + "&lt;tr&gt;&lt;td&gt;&lt;iframe style='width:100%;height:125px;border:solid 1px #000;' frameborder='0' id = " + hawb + " name='hawbDocDtls' src ='HawbSearchDtlAction.do?hawb=" + hawb + "&amp;custId=" + customer + "&amp;prodType=" + prodType + "&amp;grChecked=" + grChecked + "' scrolling='auto' &gt;&lt;/iframe&gt;&lt;/td&gt;&lt;/tr&gt;" + "&lt;/table&gt;"; } function deleteFrame(theRow) { var tbl = document.getElementById('hawbTable'); theRow.cells[1].innerHTML = "&lt;img class='expand' alt='See Package Detail' src='images/plus.jpg' onclick='expandFrame(this.parentNode.parentNode);' /&gt;"; tbl.deleteRow(theRow.nextSibling.rowIndex); } function deleteChild(tbl, row) { //try this var tbl = row.parentNode; if (row.nextSibling != null &amp;&amp; row.nextSibling.level == "child") { tbl.deleteRow(row.nextSibling.rowIndex); } } </code></pre> <p>jsfiddle.net/mblase75/XMEpq</p> <p>Let me know if this helps. I found out after a lot of debugging that IE and FF dont recognise the theRow.cells[0].firstChild, theRow.cells[0].firstChild.className, theRow.cells[0].firstChild.src as the same thing. I am still unclear as to why though.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDJR
    1. USDJR
    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. This table or related slice is empty.
    1. VO
      singulars
      1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAny errors in the console?
      singulars
      1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
      1. USBlazemonger
    2. COThere was no error in IE or FF console.
      singulars
      1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
      1. USDJR
    3. COPlease provide us with the generated HTML, instead of the JSP code, so we can try to reproduce the problem.
      singulars
      1. POJava script function works in IE but not in chrome and fire fox. Can it be converted to Jquery?
      1. USBlazemonger
 

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