This discussion is archived
12 Replies Latest reply: Apr 9, 2013 4:09 AM by Ramani_vadakadu RSS

Java script in apex tablar form

Ramani_vadakadu Journeyer
Currently Being Moderated
i have master details report and form, when i add new row in details region i should press add button! but my requirement is when the last column has entered then next row should insert and ready to enter the data(in Oracle form have this option). is limitation inApex? or any JS script use to achive this?
workspace; ram_r&d
username and password:aramani/apex
http://apex.oracle.com/pls/otn/f?p=72423:2
plz any one can help me the issue?

Thanx,
Ram

Edited by: Ramani_vadakadu on Apr 1, 2013 9:11 PM
  • 1. Re: Java script in apex tablar form
    983342 Newbie
    Currently Being Moderated
    I have made some changes, Please check if that's what you need.

    You can make changes in the javascript function according to your need.

    Regards
    Ani
  • 2. Re: Java script in apex tablar form
    trent Expert
    Currently Being Moderated
    What anicl did was add element attributes to the last column of the tabular form: onblur="f_add_row()". And the function f_add_row is in the page attributes, and at the moment is just a wrapper for the tabular form addRow() function, where you can add extra logic as necessary.

    At the moment, it's adding a new row whenever you lose focus of the last column whether or not its the last row - which may be what you want.

    ..

    I've made a clone of page 3, (page 6), And instead used a bit of jQuery magic with dynamic actions:

    - Event: lose focus
    (I've left it is lose focus as that's what anicl had, but you're requirement was on focus, so you can just change the event to Get Focus)
    - Slection Type: jQuery Selector
    - jQUery Selector: input[name="f09"]
    (f09 is the input name of the last column)
    - Condition: JavaScript expression:
    $(this.triggeringElement).is($(wwv_flow.f09[wwv_flow.f09.length-1]))
    - Event scope - Dynamic
    (this is important so it keeps mapping to the last row on the page)

    True Action:

    Execute JavaScript code:

    addRow()

    ..

    Test here: http://apex.oracle.com/pls/otn/f?p=72423:6:4229992716633:::RP:P6_DEPTNO:20
  • 3. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    Hi trent & Ani,
    I checked with page number 6 its working fine, but my requirement is auto row generate when i enter key the last column and focus on next row at first column. please login in following app's
    http://apex.oracle.com/pls/otn/f?p=72423:6
    Thanx,
    Ram
  • 4. Re: Java script in apex tablar form
    trent Expert
    Currently Being Moderated
    Do I understand correct, you want focus in the new row once the last column has 4 characters?

    Please test again.

    I changed the dynamic action event to: Key Release.

    I change the condition to: $(this.triggeringElement).is($(wwv_flow.f09[wwv_flow.f09.length-1]))&&this.triggeringElement.value.length==4

    I added a true action: Set focus, jQuery selecter, input[name="f04"]

    ..

    Of course, you can add any additional logic to suit your needs.

    Cheers,
    Trent
  • 5. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    Hi trent ,thank you for your help,
    is it possible in each column specify char(4 digit) and auto jump to another column? with not exceeding which i specified digit(current status we can type speed upto marathon 4 digit. please check it.
    Thanx,
    Ram
  • 6. Re: Java script in apex tablar form
    trent Expert
    Currently Being Moderated
    A little bit changed.

    - Give tabular form static ID so the selector can get text elements from only tabular (as its master detail)
    - Assumes should change focus when 4 or more chars are entered - you can change this javascript to suit your needs however
    - Specify jQuery selector on D.A. to : #myawesometabular input[type="text"]
    - One true action which is execute JavaScript code:
    var lastEleName = "f09";
    var firstEleName = "f04";
    var lastColArr = wwv_flow[lastEleName];
    
    var ignoreKeys = [46, 8];//backspace and delete keys
    
    var el = this.triggeringElement;
    if(el.value.length >= 4
        && $.inArray(this.browserEvent.keyCode, ignoreKeys) == -1) {   
    
        var lastEle = $.isArray(lastColArr) ? $(lastColArr[lastColArr.length-1]) : $(lastColArr);
        
        if (ignoreKeys.indexOf(this.browserEvent.keyCode) >= 0) {
            console.log('backsapce or delete');
        } else {
            console.log('something else');
        }
        
        if (el.name == lastEleName 
                && $(el).is(lastEle)) {
            addRow();
            $('input[name="' + firstEleName + '"]').focus();
        } else {
            var a = $(el).closest('form').find(':input');
            a.eq(a.index(el)+1).focus();
        }
        
    }
    (IE un-tested)

    I think it works rather nicely.

    - Added an array of key codes to ignore - e.g. presumably you don't want to switch focus when deleting text, may be other keys you'd like to ignore. Just thinking about that, it may be better to check if the input is alphanumeric - e.g. http://stackoverflow.com/questions/2257070/detect-numbers-or-letters-with-jquery-javascript

    http://apex.oracle.com/pls/apex/f?p=72423:8:3770440529274::::: (tabular form always showing on this page just to test with - i.e. not conditional on the master ID)

    Actually, it's still a lilttle broken. If you go back to edit on of the earlier rows, its still adding a new row instead of focusing in the next element. i shall re-visit this later in the week.
  • 7. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    hi trent,Thank you for your help,
    as of now i have the root of Requirement ,plz can visit and do the changes when you have time.

    Thank you again to all,its safe my lot of R&D time.

    Thanx,
    Ram
  • 8. Re: Java script in apex tablar form
    trent Expert
    Currently Being Moderated
    Think I go it.
    var lastEleName = "f09";
    var lastColArr = wwv_flow[lastEleName];
    
    var el = this.triggeringElement;
    
    var input = String.fromCharCode(event.which);
    
    if(el.value.length >= 4
        && /[a-zA-Z0-9-_ ]/.test(input)) {   
    
        var lastEle = $(lastColArr).size() >= 2 ? $(lastColArr[lastColArr.length-1]) : $(lastColArr);
    
        if ($(el).is(lastEle)) {
            addRow();
        }
    
        
        var baseSelector = '#myawesometabular :input[type="text"]';
            
        var nextElIndex = $(baseSelector).index(el)+1;
        $(baseSelector + ':eq(' + nextElIndex +')').focus();
      
    }
    If the focus should change on different columns depending on the length of each, you can change it to:
    var lastEleName = "f09";
    var lastColArr = wwv_flow[lastEleName];
    
    var columns = {
        "f04" : 4 //ename
      , "f05" : 6 //job
      , "f06" : 3 //mgr
      , "f07" : 2 //hireddate
      , "f08" : 5 //sal
      , "f09" : 3 //comm 
    
    };
    
    var el = this.triggeringElement;
    
    var input = String.fromCharCode(event.which);
    
    if(el.value.length >= columns[el.name]
        && /[a-zA-Z0-9-_ ]/.test(input)) {   
    
        var lastEle = $(lastColArr).size() >= 2 ? $(lastColArr[lastColArr.length-1]) : $(lastColArr);
    
        if ($(el).is(lastEle)) {
            addRow();
        }
    
        
        var baseSelector = '#myawesometabular :input[type="text"]';
            
        var nextElIndex = $(baseSelector).index(el)+1;
        $(baseSelector + ':eq(' + nextElIndex +')').focus();
      
    }
    You just figure out the name attribute of each column, then specify the length in the columns object at the top of the source.
  • 9. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    hai trent,

    thank you for your valuable code and functional thinks to needs for me.i will try to apply in demo application page on sunday.i hope its exactly i need the requirement .

    Thanx
    Ram.
  • 10. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    hi trent,
    Your sound is very good,i tested its working fine. one more condition the Hire date should be select date and jump to next column, It's possible?
    I have Specified 9 digit (07-Apr-13=9) in Hire date column,its not taking and jumb to next column.please login and see the code.
    http://apex.oracle.com/pls/otn/f?p=72423:8
    I would like to Appreciate your help.i think you are rock in JS.
    Thanx,
    Ram.
  • 11. Re: Java script in apex tablar form
    trent Expert
    Currently Being Moderated
    Ok, since you want to change the focus from two different types of events, I broke the code out into a function and chucked an additional parameter to determine if it was from a text change or calendar change. Technically, you could have probably used some property of the event object, such as event.type === "click", but figured may be better just to add a bool parameter.
    function tabularFieldSwitcher(el, dateSelect){
        var lastEleName = "f09";
        var lastColArr = wwv_flow[lastEleName];
    
        var columns = {
            "f04" : 4
          , "f05" : 6
          , "f06" : 3
          , "f07" : 9 //14-Apr-13
          , "f08" : 5
          , "f09" : 3
    
        };
    
        var input = String.fromCharCode(event.which);
    
        if(el.value.length >= columns[el.name]
            && (dateSelect || /[a-zA-Z0-9-_ ]/.test(input))) {   
    
            var lastEle = $(lastColArr).size() >= 2 ? $(lastColArr[lastColArr.length-1]) : $(lastColArr);
    
            if ($(el).is(lastEle)) {
                addRow();
            }
    
            
            var baseSelector = '#myawesometabular :input[type="text"]';
                
            var nextElIndex = $(baseSelector).index(el)+1;
            $(baseSelector + ':eq(' + nextElIndex +')').focus();
          
        }
        
    }
    I just chucked this into the page header function definition.

    Updated the existing D.A to:

    tabularFieldSwitcher(this.triggeringElement, false);

    Added a new D.A.

    type: change
    selector: #myawesometabular input[name="f07"] (which is the date field)

    Exectue JS code:

    tabularFieldSwitcher(this.triggeringElement, true);

    Cheers,
  • 12. Re: Java script in apex tablar form
    Ramani_vadakadu Journeyer
    Currently Being Moderated
    hai trent,
    Thank you somuch for your Continuously contribute in my application over the OTN.my problem has been resolved by you.i will keep this application for upcoming users.

    Thanx again to you.
    Cheers,
    Ram