How to add javascript for HTMLB Page

[Former Member]

Hai friends,

I Have a javascript function and i need to load this function when page loaded(so i have written this in page tag As onLoad="function()")

now wher i can i place my javascript code in this page...?

i have a javascript function where it can lock table columns (i did this in normal BSP Page with the combination of html.its working fine) The thing is in normal BSP Page i am writing this script for normal Table tag,but now i need to apply same thing for TableView tag of HTMLB....Is there any remedy for this...

leoiz.

[Former Member]

Hai,

here i smy code

<%@page language="abap" %>

<%@extension name="htmlb" prefix="innu" %>

<innu:content>

<innu:document>

<innu:documentHead>

<innu:headInclude/>

<link rel="stylesheet" href=""MIMES/locked.css"" type="text/css">

<meta name="keywords" content="freeze HTML table columns; lock columns; freeze columns; CSS column locking; prevent column scroll; fixed column; fixed table header; lock header; freeze header; CSS tips; freezing column;">

<script type="text/javascript">

function lockCol(tblID)

{

var table = document.getElementById(tblID);

// var button = document.getElementById('toggle');

var cTR = table.getElementsByTagName('TR'); //collection of rows

if (table.rows[0].cells[0].className == '') {

for (i = 0; i < cTR.length; i++)

{

var tr = cTR.item(i);

tr.cells[1].className = 'locked'

tr.cells[2].className = 'locked'

}

// button.innerText = "Unlock First Column";

}

else {

for (i = 0; i < cTR.length; i++)

{

var tr = cTR.item(i);

tr.cells[1].className = ''

tr.cells[2].className = ''

}

// button.innerText = "Lock Columns";

}

}

</script>

</innu:documentHead>

<innu:documentBody onLoad="lockCol('tbl')">

<div id="tbl-container">

<%-- <innu:page title = "BSP Extension: Element: Button" onLoad="lockCol('tbl')"> --%>

<table id="tbl">

<thead>

<tr>

<th>Name</th>

<th>Major</th>

<th>Sex</th>

<th>English</th>

<th>Japanese</th>

<th>Calculus</th>

<th>Geometry</th>

</tr>

</thead>

<tbody>

<%

loop at gt_vbap into wa_vbap.

%>

<TR>

<TD><%= wa_vbap-vbeln. %></TD>

<TD><%= WA_VBAP-POSNR.%></TD>

<TD><%= WA_VBAP-MATNR.%></TD>

<TD><%= WA_VBAP-MATWA.%></TD>

<TD><%= WA_VBAP-PMATN.%></TD>

<TD><%= WA_VBAP-CHARG.%></TD>

<TD><%= WA_VBAP-MATKL.%></TD>

<TD><%= WA_VBAP-ARKTX.%></TD>

<TD><%= WA_VBAP-PSTYV.%></TD>

<TD><%= WA_VBAP-POSAR.%></TD>

<TD><%= WA_VBAP-LFREL.%></TD>

<TD><%= WA_VBAP-FKREL.%></TD>

<TD><%= WA_VBAP-UEPOS.%></TD>

<TD><%= WA_VBAP-GRPOS.%></TD>

<TD><%= WA_VBAP-ABGRU.%></TD>

<TD><%= WA_VBAP-PRODH.%></TD>

<TD><%= WA_VBAP-ZWERT.%></TD>

</TR>

<%

ENDLOOP.

%>

</TBODY>

</TABLE>

</innu:documentBody>

</innu:document>

<%-- </innu:form>

</innu:page> --%>

</innu:content>

if use the same code in html apge its working in BSP

but if my page starting with htmlb tags like

<%@extension name="htmlb" prefix="innu" %>

<innu:content>

<innu:document>

<innu:documentHead> its not working

even i am using general table tags

but my javascript function and stylesheet is not calling at the time of body load event.

[Former Member]

And when you try this?

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content>
  <htmlb:document>
    <htmlb:documentHead>
      <htmlb:headInclude />
        <style>
body {
background-color: white;
color: black;
}

div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked	{
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default; 
}
	
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}

button {
width: 150px; 
font-weight: bold;
color: navy;
margin-bottom: 5px;
}
        </style>
      <script type="text/javascript">
          function lockCol(tblID) {
              var table = document.getElementById(tblID);
              // var button = document.getElementById('toggle');
              var cTR = table.getElementsByTagName('TR'); //collection of rows
              if (table.rows[0].cells[0].className == '') {
                  for (i = 0; i < cTR.length; i++) {
                      var tr = cTR.item(i);
                      tr.cells[0].className = 'locked'
                  }
                  // button.innerText = "Unlock First Column";
              } else {
                  for (i = 0; i < cTR.length; i++) {
                      var tr = cTR.item(i);
                      tr.cells[0].className = ''
                  }
                  // button.innerText = "Lock Columns";
              }
          }
      </script>
    </htmlb:documentHead>
    <htmlb:documentBody onLoad="lockCol('tbl')" >
      <div id="tbl-container">
      <table id="tbl">
      <thead>
      <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
      </tr>
      </thead>
      <tbody>
      <%
  loop at gt_vbap into wa_vbap.
      %>
      <TR>
      <TD><%= wa_vbap-vbeln. %></TD>
      <TD><%= WA_VBAP-POSNR.%></TD>
      <TD><%= WA_VBAP-MATNR.%></TD>
      <TD><%= WA_VBAP-MATWA.%></TD>
      <TD><%= WA_VBAP-PMATN.%></TD>
      <TD><%= WA_VBAP-CHARG.%></TD>
      <TD><%= WA_VBAP-MATKL.%></TD>
      <TD><%= WA_VBAP-ARKTX.%></TD>
      <TD><%= WA_VBAP-PSTYV.%></TD>
      <TD><%= WA_VBAP-POSAR.%></TD>
      <TD><%= WA_VBAP-LFREL.%></TD>
      <TD><%= WA_VBAP-FKREL.%></TD>
      <TD><%= WA_VBAP-UEPOS.%></TD>
      <TD><%= WA_VBAP-GRPOS.%></TD>
      <TD><%= WA_VBAP-ABGRU.%></TD>
      <TD><%= WA_VBAP-PRODH.%></TD>
      <TD><%= WA_VBAP-ZWERT.%></TD>
      </TR>
      <%
  ENDLOOP.
      %>
      </TBODY>
      </TABLE>
    </htmlb:documentBody>
  </htmlb:document>
</htmlb:content>

Your code is missing a few items not sure if that happened when you copy and pasted or not.

Message was edited by: Craig Cmehil

This works great for me... I think your biggest problem was that your app can't find your CSS file ""MIMES/locked.css"" "" doesn't work and if the locked.css is not under a folder called MIMES then it won't work either. If you created the locked.css under the "MIMES" section of your BSP application then you just need to use "locked.css".

[maximilian_schaufler]

Hi,

for the <htmlb:headInclude/> element, I have never used it before ... but I did try so now.

I got javascript and CSS code within my documentHead, placing headInclude there did not change a single byte in the HTML output for the page.

As for your problem:

Is your function not called at all?

Or does it maybe just run into a different error you are not aware of?

Maybe try to place a simple alert in the beginning of your function, just to make sure whether it gets called at all or not.

[RieSe]

in Addition:

<htmlb:documentBody marginLeft = "11"

marginRight = "1"

marginTop = "11"

marginBottom = "1"

onLoad = "function()" >

, Stefan

[RieSe]

Hi Leoiz,

in correction to craig's answer:

use the bsp-element to <htmlb_headInclude> to include your own local scripts and styles:

For example:

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="phtmlb" prefix="phtmlb" %>

<htmlb:content design="DESIGN2003" >

<htmlb:document>

<htmlb:documentHead>

<htmlb_headInclude>

<script language="JavaScript">

function personalize(){

newDialog = window.open('../popup/personalize.htm?page_name=<%=runtime->page_name%>',

"valueHelp",

"title=no,resizable=yes,status=1,height=500,width=800");

}

function showAlert(message){

if(message)

alert(message);

}

</script>

</htmlb:documentHead>

otherwise you can run into other serious problems.

Best regards,

Stefan

[Former Member]

> in correction to craig's answer:

>

> otherwise you can run into other serious problems.

Not really sure how this is a correction, if the JavaScript function simple modifies a element on the page you can do it the way I pointed out just like you can do it with a button or link.

Of course this is only if Leoiz is refferring to the IE CSS Solution for locking a column in a table

[Former Member]

Hai Craig,

Its working fine, Thnaks... The only thing i did foolish mistake is, i had given quotations double time as ""locked.css"".. Thats y my CSS not recognized by function.After i had gone throughur code i checked and corrected that one now u can call css directly as

<htmlb:headInclude />

<link rel="stylesheet" href="MIMES/locked.css" type="text/css">

but only thing is....performance.. is it workng correctly..?b'coz when i try to scroll its taking some time to scroll.... 'y'

[Former Member]

You mark field 1 and 2 as locked in your code leaving field 0 open in mine it went slow when I did that but if I mark 0 and 1 locked it goes a bit better and even better if I mark fiel 0 only locked.

But I don't think it will be a whole lot better performance wise.

[Former Member]

Are you referring to this:

So you've implemented this CSS code and now you want when your BSP loads to lock your first column right?

Simply add the javascript command to the bottom of your page before you close your htmlb:form

<script>
 function();
</script>

As for the tableView tag if you read the topics above you'll see that Rich is working on a solution perhaps you can follow his lead and do what he has done so far: <i>has worked by using the headInclude tag</i>