Skip to Content
author's profile photo Former Member
Former Member

How to add javascript for HTMLB Page

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.

Add a comment
10|10000 characters needed characters exceeded

Related questions

4 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Dec 09, 2004 at 09:23 AM

    Are you referring to this:

    Fixed column when scrolling right when using tableview and iterator

    How to freeze browser as abap list

    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>

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Dec 09, 2004 at 11:10 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member 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.

  • Posted on Dec 09, 2004 at 11:11 AM

    in Addition:

    <htmlb:documentBody marginLeft = "11"

    marginRight = "1"

    marginTop = "11"

    marginBottom = "1"

    onLoad = "function()" >

    😊, Stefan

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Dec 10, 2004 at 05:53 AM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

    • 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.

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.