JavaScript force an OnChange in Maximo

Question

I'm currently working on a Bookmarklet for Maximo, which is a Java EE application, and I need to populate a few input boxes.

Generally when a use inputs data into the box they click a button that gives them a popup and they search for the value to be added to the script. Or they can type the name and hit tab/enter and it turns it to capital letters and does a few things in the background (not sure what it does exactly).

I currently use

Javascript: $('mx1354').value = "KHBRARR"; $('mx1354').ov= "KHBRARR";

But it does not work like I need it to. It set's the input box to the value needed, but it doesn't run the background functions so when I hit the save button it doesn't recognize it as any changes and discards what I put into the box.

How could I simulate a tab/enter button has been pressed?

So far I've tried to call the onchange, focus/blur, and click functions (Not 100% sure if I called them correctly).

The dojo library is part of the application, so I'm not sure if I can use one if it's feature or if jQuery would cause a conflict.

P.S. This needs to run in IE.

The OnChange Function:

function tb_(event)
{
    event = (event) ? event : ((window.event) ? window.event : "");
    if(DESIGNMODE)
        return;
    var ro = this.readOnly;
    var exc=(this.getAttribute("exc")=="1");
    switch(event.type)
    {
        case "mousedown":
            if(getFocusId()==this.id)
                this.setAttribute("stoptcclick","true");
            break;
        case "mouseup":
            if (isIE() && !hasFocus(this)) 
            {
                this.focus();
            }
            if (isBidiEnabled) 
            {
                adjustCaret(event, this); // bidi-hcg-AS
            }
            break;
        case "blur":
            input_onblur(event,this);
            if (isBidiEnabled)                                      // bidi-hcg-SC
                input_bidi_onblur(event, this);
            break;
        case "change":
            if(!ro)
                input_changed(event,this);
            break;
        case "click":
            if(overError(event,this))
                showFieldError(event,this,true);
            var liclick=this.getAttribute("liclick");
            var li=this.getAttribute("li");
            if(li!="" && liclick=="1")
            {
                frontEndEvent(getElement(li),'click');
            }

            if(this.getAttribute("stoptcclick")=="true")
            {
                event.cancelBubble=true;
            }
            this.setAttribute("stoptcclick","false");
            break;
        case "focus":
            input_onfocus(event,this);
            if (isBidiEnabled)                      // bidi-hcg-SC
                input_bidi_onfocus(event, this);
            this.select();
            break;
        case "keydown":
            this.setAttribute("keydown","true");
            if(!ro)
            {
                if(isBidiEnabled)
                    processBackspaceDelete(event,this); // bidi-hcg-AS
                if(hasKeyCode(event, 'KEYCODE_DELETE') || hasKeyCode(event, 'KEYCODE_BACKSPACE'))
                {
                    getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;                     
                }
                if((hasKeyCode(event, 'KEYCODE_TAB') || hasKeyCode(event, 'KEYCODE_ESC')))
                {
                    var taMatch = dojo.attr(this, "ta_match");
                    if(taMatch) {
                        if(taMatch.toLowerCase().indexOf(this.value.toLowerCase()) == 0) 
                        {
                            console.log("tamatch="+taMatch);
                            this.value = taMatch;
                            input_keydown(event, this);
                            dojo.attr(this, {"prekeyvalue" : ""});
                            input_forceChanged(this);
                            inputchanged = false;
                            return; // don't want to do input_keydown again so preKeyValue will work
                        }
                    }
                    if(this.getAttribute("PopupType"))
                    {
                        var popup = dijit.byId(dojohelper.getPopupId(this));
                        if (popup)
                        {
                            dojohelper.closePickerPopup(popup);
                            if(hasKeyCode(event, 'KEYCODE_ESC'))
                            {
                                if (event.preventDefault)
                                {  
                                    event.preventDefault();  
                                }
                                else
                                {  
                                    event.returnValue  = false;  
                                }  

                                return;
                            }
                        }
                    }
                }
                input_keydown(event,this);
                datespin(event,this);
            }
            else if(hasKeyCode(event,'KEYCODE_ENTER') || (hasKeyCode(event,'KEYCODE_DOWN_ARROW') && this.getAttribute("liclick")))
            {
                var lbId = this.getAttribute("li");
                frontEndEvent(getElement(lbId), 'click');
            }
            else if(hasKeyCode(event,KEYCODE_BACKSPACE))
            {
                event.cancelBubble=true;
                event.returnValue=false;
            }
            break;
        case "keypress":
            if(!ro)
            {
                if(event.ctrlKey==false && hasKeyCode(event,'KEYCODE_ENTER'))
                {
                    var db = this.getAttribute("db");
                    if(db!="")
                    {
                        sendClick(db);
                    }
                }
            }
            break;
        case "keyup":
            var keyDown = this.getAttribute("keydown");
            this.setAttribute("keydown","false");
            if(event.ctrlKey && hasKeyCode(event,'KEYCODE_SPACEBAR'))
            {
                if(showFieldError(event,this,true))
                {
                    return;
                }
                else
                {
                    menus.typeAhead(this,0);
                }
            }
            if(!ro)
            {
                if(isBidiEnabled)
                    processBidiKeys(event,this); // bidi-hcg-AS

                numericcheck(event,this);   
                var min = this.getAttribute("min");
                var max = this.getAttribute("max");

                if(min && max && min!="NONE" || max!="NONE")
                {
                    if(min!="NONE" && parseInt(this.value)<parseInt(min))
                    {
                        this.value=min;
                        getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;                     
                        this.select();
                        return false;
                    }

                    if(max!="NONE" && parseInt(this.value)>parseInt(max))
                    {
                        this.value=max;
                        getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;
                        this.select();
                        return false;
                    }
                }
                var defaultButton = false;
                if(event.ctrlKey==false && hasKeyCode(event,'KEYCODE_ENTER'))
                {
                    var db = this.getAttribute("db");
                    if(db!="")
                    {
                        defaultButton=true;
                    }
                }
                input_changed(event,this);                  
            }
            else
            {
                setFocusId(event,this);
            }
            if(showFieldHelp(event, this))
            {
                return;
            }
            if(keyDown=="true" && hasKeyCode(event, 'KEYCODE_ENTER') && !event.ctrlKey && !event.altKey)
            {
                menus.typeAhead(this,0);
                return;
            }
            if(!hasKeyCode(event, 'KEYCODE_ENTER|KEYCODE_SHIFT|KEYCODE_CTRL|KEYCODE_ESC|KEYCODE_ALT|KEYCODE_TAB|KEYCODE_END|KEYCODE_HOME|KEYCODE_RIGHT_ARROW|KEYCODE_LEFT_ARROW')
                    && !event.ctrlKey && !event.altKey)
            {
                menus.typeAhead(this,0);
            }
            break;
        case "mousemove":
            overError(event,this);
            break;
        case "cut":
        case "paste":
            if(!ro)
            {
                var fldInfo = this.getAttribute("fldInfo");
                if(fldInfo)
                {
                    fldInfo = dojo.fromJson(fldInfo);
                    if(!fldInfo.query || fldInfo.query!=true)
                    {
                        setButtonEnabled(saveButton,true);
                    }
                }
                window.setTimeout("inputchanged=true;input_forceChanged(dojo.byId('"+this.id+"'));", 20);
            }
            break;
    }
}

Answer 1

After some time I found that in order to make a change to the page via JavaScript you need to submit a hidden form so it can verify on the back-end.

Here is the code I used to change the value of Input fields.

        cc : function(e,v){
            e.focus(); //Get focus of the element
            e.value = v; //Change the value
            e.onchange(); //Call the onchange event
            e.blur(); //Unfocus the element
            console.log("TITLE === "+e.title);
            if(e.title.indexOf(v) != -1) {
                return true; //The value partially matches the requested value. No need to update
            } else {
                //Generate an hidden form and submit it to update the page with the new value
                var hiddenForm = getHiddenForm();
                var inputs = hiddenForm.elements;
                inputs.namedItem("changedcomponentid").value = e.id;
                inputs.namedItem("changedcomponentvalue").value = v;
                inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
                submitHidden();
            }
            //Value isn't set to the required value so pass false
            return false;
        }

Answer 2

run this

input_changed(null,document.getElementById('IDHERE'));

Answer 3

In maximo 7.5 i built a custom lookup

when i click the colored hyperlink java script is called to update the values back to parent form values or updated but on save the value or not updated

  function riskmatrix_setvalue(callerId, lookupId, value,bgrColor,targetid){       
   if (document.getElementById(callerId).readOnly){
    sendEvent('selectrecord', lookupId);
    return;
}
textBoxCaller = document.getElementById(callerId);

//dojo.byId(callerId).setAttribute("value", value);
//dojo.byId(callerId).setAttribute("changed", true);
//dojohelper.input_changed_value(dojo.byId(callerId),value);
//textBoxCaller.style.background = bgrColor;
//var hiddenForm = getHiddenForm();
//if(!hiddenForm)
 //       return;
//var inputs = hiddenForm.elements;
//inputs.namedItem("event").value = "setvalue";
//inputs.namedItem("targetid").value = dojo.byId(callerId).id;
//inputs.namedItem("value").value = value;
//sendXHRFromHiddenForm();
textBoxCaller.focus(); //Get focus of the element
textBoxCaller.value = value; //Change the value
textBoxCaller.onchange(); //Call the onchange event
textBoxCaller.blur(); //Unfocus the element
//Generate an hidden form and submit it to update the page with the new value
var hiddenForm = getHiddenForm();
var inputs = hiddenForm.elements;
inputs.namedItem("changedcomponentid").value = textBoxCaller.id;
inputs.namedItem("changedcomponentvalue").value = value;
inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
submitHidden();
sendEvent("dialogclose",lookupId);

 }

Answer 4

Description

I changed a bit @Steven10172's perfect solution and made it into a Javascript re-usable function.

Made this into a separate answer since my edits to the original answer where i added this were refused :)

I also had to change the line e.onchange() to e.onchange(e) because otherwise the textbox handler (tb_(eventOrComponent) function) would throw TypeError: textbox.getAttribute is not a function.

---

Code

var setFakeValue = function(e,v){
    console.log("Changing value for element:", e, "\nNew value:", v);

    e.focus(); //Get focus of the element
    e.value = v; //Change the value
    e.onchange(e); //Call the onchange event
    e.blur(); //Unfocus the element


    if(e.title.indexOf(v) != -1) {
        return true; //The value partially matches the requested value. No need to update
    }
    else {
        //Generate an hidden form and submit it to update the page with the new value
        var hiddenForm = getHiddenForm();
        var inputs = hiddenForm.elements;
        inputs.namedItem("changedcomponentid").value = e.id;
        inputs.namedItem("changedcomponentvalue").value = v;
        inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
        submitHidden();
    }
    //Value isn't set to the required value so pass false
    return false;
}

---

Usage

setFakeValue(html_element, new_value);

---

Fun fact

I spent a lot of time searching for a solution to programmatically change an <input> value in Maximo... At some point i got really frustrated, gave up and started to think it just wasn't possible...

Some time ago i tried to search with no expectations at all and after some time i found the solution... Here...

Now... As you can see this is literally just a total copy of StackOverflow, including questions and solutions (marking the upvotes with plain text lol), but in Chinese... This got me curious and after a little search i found this post on StackOverflow..

High five to Chrome built-in webpage translator that let understand something on that page ^^