This discussion is archived
4 Replies Latest reply: Aug 4, 2013 10:24 PM by user470681 RSS

"Ghost row" in 4.0 Tabular forms has id pattern f0x_0000

klsharpe Newbie
Currently Being Moderated
I am comparing my production tabular form 3.2 apps to my 4.0.2 apps (where I am trying to use new features).

I am seeing something new, a hidden row 0, not visible in Firebug, but visible in the source as f0x_0000. I added a jQuery selector to my code and the code finds it when I really don't want it. I thought would be getting rows starting f0x_0001.

Will this row serve a purpose in future releases? I am discarding it for now.

Thanks,
Kelly
  • 1. Re: "Ghost row" in 4.0 Tabular forms has id pattern f0x_0000
    ATD Guru
    Currently Being Moderated
    Hi Kelly,

    That row is removed by javascript when the page is loaded - hence it not showing in FireBug's or Chrome's Inspect Element.

    From what I can see, this allows you to call a function called addRow() from a button to quickly add a new row to your tabular form without submitting the page. There are various bit of javascript involved:

    Declaration of global javascript variable:
    var gTabFormInitRow;
    Added to footer of the page (
    apex.jQuery(document).ready(function(){
    (function(){
        initReport('R7173925029173713366','7173925029173713366','','#6CAAD9');
    })();
    (function(){
        var vErrItems = new Array ();
        initTabForm('R7173925029173713366','<tr class="highlight-row">','</tr>',10,vErrItems);
        apex.jQuery('#R7173925029173713366').bind('apexafterrefresh', function(){
            initTabForm('R7173925029173713366','<tr class="highlight-row">','</tr>',10,vErrItems);
        });
    })();
    });
    Code to copy hidden row, store its definition in the gTabFormInitRow variable and remove it from the page:
    function initTabForm(a,b,d,h,g)
    {
      var f="#init_row_"+a;
      gErrItems=g;
      gChangedItems=new Array();
      gNumRows=h;
      gNewRows=0;
      gTabFormRegionID=a;
      gTabFormReportID="report_"+a;
      gTabForm=apex.jQuery(f).parent();
      gTabFormDefaultBG=apex.jQuery(f).children("td").css("background-color");
      gTabFormInitRow=b+apex.jQuery(f).html()+d;
      apex.jQuery(f).remove();
      var c=$x_FormItems($x(gTabFormReportID));
      for(var e=0;e<c.length;e++)
      {
        apex.jQuery(c[e]).attr("autocomplete","off");
        if(c[e].name!="X01")
        {
          gTabFormData[e]=c[e].value
        }
        else
        {
          gTabFormData[e]="0"
        }
      }
      apex.jQuery(".row-selector").click(function()
      {
        highlightRow(gTabFormRegionID,this,apex.jQuery(".row-selector").index(this))
      });
      apex.jQuery(document).bind("apexbeforepagesubmit",function()
      {
        apex.jQuery("input[name$=NOSUBMIT]",apex.jQuery("#"+a)[0]).each(function()
        {
          $x_disableItem(this,true)
        });
        apex.jQuery(f).remove()
      })
    }
    Function to call to add a new row without submitting the page:
    function addRow()
    {
      var c=new Array();
      var b=new Array();
      var a=new Array();
      addRow(c,b,a)
    }
    Function that creates a new row based on the stored definition in gTabFormInitRow:
    function addRow(pNewRowVals,pNewRowMap,pDispTypeMap)
    {
      var vNewRow=gTabFormInitRow;
      var vNewRowDatePicker=gNewRowDatePicker;
      var vItem;
      var vNewRowIndex;
      var vItems=$x_FormItems($x(gTabFormReportID));
      for(var i=0;i<vItems.length;i++)
      {
        if((gTabFormData!=vItems[i].value)&&(vItems[i].name!="X01"))
    {
    gChangedItems.push(vItems[i])
    }
    }
    gNewRows=gNewRows+1;
    vNewRowIndex=pad((gNumRows+gNewRows),4);
    vNewRow=vNewRow.replace(/_0000/g,"_"+pad((gNumRows+gNewRows),4));
    vNewRow=vNewRow.replace("p_element_index=\" + escape ('0')","p_element_index=\" + escape ('"+(gNumRows+gNewRows)+"')");
    vNewRow=vNewRow.replace(/\$_row/g,(gNumRows+gNewRows));
    apex.jQuery(gTabForm).append(vNewRow);
    apex.jQuery("#"+gTabFormRegionID).contents().find(".nodatafound").hide();
    vNewRowDatePicker=vNewRowDatePicker.replace(/_0000/g,"_"+pad((gNumRows+gNewRows),4));
    eval(vNewRowDatePicker);
    apex.jQuery(":input[id^=f][id$=_"+vNewRowIndex+"]").change(function()
    {
    apex.jQuery("#fcud_"+vNewRowIndex).val("C")
    });
    for(var i=0;i<gErrItems.length;i++)
    {
    apex.jQuery("#"+gErrItems[i]).addClass("apex-tabular-form-error")
    }
    if(pNewRowMap)
    {
    for(var i=0;i<pNewRowMap.length;i++)
    {
    apex.jQuery("#"+pNewRowMap[i]+"_"+pad((gNumRows+gNewRows),4)).val(pNewRowVals[i][(gNewRows-1)]);
    if(pDispTypeMap[i].indexOf("RADIO")>=0)
    {
    apex.jQuery("[name="+pNewRowMap[i]+"_"+pad((gNumRows+gNewRows),4)+"_NOSUBMIT]").each(function()
    {
    if(apex.jQuery(this).val()==pNewRowVals[i][(gNewRows-1)])
    {
    apex.jQuery(this).attr("checked","checked")
    }
    })
    }
    if(pDispTypeMap[i].indexOf("SIMPLE_CHECKBOX")>=0)
    {
    apex.jQuery("#"+pNewRowMap[i]+"_"+pad((gNumRows+gNewRows),4)+"_01").each(function()
    {
    vItem=$x(pNewRowMap[i]+"_"+pad((gNumRows+gNewRows),4)+"_01");
    if(vItem.value==pNewRowVals[i][(gNewRows-1)])
    {
    apex.jQuery(this).attr("checked","checked")
    }
    })
    }
    }
    }
    vItems=$x_FormItems($x(gTabFormReportID));
    for(var i=0;i<vItems.length;i++)
    {
    if(vItems[i].name!="X01")
    {
    gTabFormData[i]=vItems[i].value
    }
    else
    {
    gTabFormData[i]="0"
    }
    }
    apex.jQuery(".row-selector").click(function()
    {
    highlightRow(gTabFormRegionID,this,apex.jQuery(".row-selector").index(this))
    })
    }
    {code}

    So, it is actually available for use now. Why it was done this way, I couldn't say (except that all the HTML to create a new row is immediately available).

    However, as the row is removed from the page, I would have thought that javascript could no longer find it in the DOM hierarchy?

    Andy
  • 2. Re: "Ghost row" in 4.0 Tabular forms has id pattern f0x_0000
    klsharpe Newbie
    Currently Being Moderated
    Andy,
    Thank you for showing me what is happening behind the scenes with this row.

    To clarify I use jQuery selectors in Dynamic actions (td[headers="my Col name"] input) and I am not having issues with the _0000 row. For a different set of logic I have, my Javascript code loops with DOM notation through td elements then picking up input elements. This was when the row is found. I am attempting to rework the code to avoid references to f0x_000x where possible. This tabular form was broken by the 4.0 upgrade (columns were re-ordered internally and I have corrected the query too) and would like for it not to break again in the future.

    I see in the source how this row _0000 has been set to not to display.

    ... tr id="init_row_REGION_NAME" style="display-colon-none;" class="highlight-row"... td headers="my Col name" ... input id="f01_0000" ...

    I can see the benefit to have Add Row work quickly, but in this app, and my other apps which show a header with no data found, Add is not one of the selected operations or available buttons. One is update only, others are update/delete. (I do have 2 pages with add row functionality.)

    It would be a nice if the tabular form wizard was enhanced so when the Add operation is not wanted, to elect to omit internal code/elements that would create this row. Alternatively, redo the row to use some named attribute other than f0x_0000 so my code can ignore it.

    I enjoy working with Apex, and looking forward to v4.1. Of our set of apps, fortunately our usage of tabular forms is limited and manageable.
    Kelly

    Edited by: klsharpe on Jan 28, 2011 8:55 AM
  • 3. Re: "Ghost row" in 4.0 Tabular forms has id pattern f0x_0000
    ATD Guru
    Currently Being Moderated
    Hi Kelly,

    I can certainly see that it would be better if Apex asked if you wanted this functionality - that way, you know that you have to handle it within any javascript/jQuery code.

    I am surprised, though, that the removal of the TR contents still leaves the row visible to javascript - I would have thought that it would just be gone!

    I agree with your alternative solution - don't use "fnn_0000". The javascript that creates the new row does: replace(/_0000/g,"_"+pad((gNumRows+gNewRows),4)) That updates the "0000" part with a new row number, so I would have thought it perfectly possible to update that bit of code to replace the "fnn" bit as well.

    Andy
  • 4. Re: "Ghost row" in 4.0 Tabular forms has id pattern f0x_0000
    user470681 Newbie
    Currently Being Moderated

    Hi All,

     

    I used replace(/_0000/g,"_"+pad((gNumRows+gNewRows),4)) two variables gNewRows and gNumRows to return multiple column values from a LOV to a form.

     

    However I found when I upgraded from APEX 4.0 to 4.2 no longer gNewRows and gNumRows were working. They didn't have any values.

     

    So I thought sharing my findings for APEX 4.2 will be useful for somebody.

     

    What you have to do is to find out current row number of tabular form for the newly added rows using "Add Row" button is below.

     

    Use apex.widget.tabular.gNewRows + apex.widget.tabular.gNumRows instead of just gNewRows and gNumRows. This will do the trick.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points