Getting 'getComputedStyle' of undefined an 'select' of null on editor

[sjkcwatsonParticipant]

I have several of the popup windows with editor controls on them. They work ok in IE unless I turn on the debugger and aren’t working in chrome. I’m sure it is something to do with how I’m setting up the code, but I’m not sure where to look. I’m hoping you might see something to point me in the right direction.

The error happens when I click the button to load the popup window and not on the initial loading of the page.

            $('#addStatusButton').jqxButton({ theme: '' });
            $('#addStatusButton').click(function () {
                showAddStatusPopUp();
            });

function showAddStatusPopUp() {
    document.getElementById('a_StatusTitle').innerHTML = vAddStatusTitle + ' (' + vCAPA + ' ' + selectedCAPAID + ')';

    var winHeight = $(window).height();
    var winWidth = $(window).width();
    var posX = (winWidth / 2) - ($('#PopUpAddStatusWindow').width() / 2) + $(window).scrollLeft();
    var posY = (winHeight / 2) - ($('#PopUpAddStatusWindow').height() / 2) + $(window).scrollTop();
    $('#PopUpAddStatusWindow').jqxWindow({ position: { x: posX, y: posY } });

    $("#acapaStatus").val('');

    $("#PopUpAddStatusWindow").jqxWindow('show');
};

  //*** ADD STATUS PopUp CODE ***//
    $('#acapaStatus').jqxEditor({
        height: 170,
        width: 610,
        tools: '',
        pasteMode: 'text'
    });

    $("#aCancelStatus").jqxButton({ theme: 'energyblue' });

    $('#PopUpAddStatusWindow').on('open', function (event) {
        setTimeout(function () {
            $("#acapaStatus").jqxEditor('focus');
        }, 150);
    });

    // initialize the PopUp window and buttons.           
    $("#PopUpAddStatusWindow").jqxWindow({
        width: 630,
        height: 250,
        resizable: false,
        isModal: true,
        autoOpen: false,
        cancelButton: $("#aCancelStatus"),
        modalOpacity: 0.2
    });

    $("#aSaveStatus").jqxButton({ theme: 'energyblue' });
    $("#aSaveStatus").click(function () {
        var MyStatus = $("#acapaStatus").val();
        var n = MyStatus.length;
        if (n > 8000) {
            alert(vCAPAStatusOver); //Status is over the maximum of 8000 characters.  Please post as more than one status.
        } else {
            $.ajax({
                async: false,
                type: "POST",
                data: JSON.stringify({ vModule: selectedModule, CorrActID: selectedCAPAID, myStatus: $("#acapaStatus").val(), EmpID: cs_empID, DateAdded: vCurrDate, moduleItemID: selectedModuleItemNumberStr }),

                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "WebServices/OriasWcfService.svc/AddCAPAStatus",
                success: function (result) {
                    if (result.d != "success") { alert('Error Adding CAPA Status'); }
                },
                error: function () {
                    alert('Error Adding CAPA Status');
                }
            })
        };
        $("#PopUpAddStatusWindow").jqxWindow('hide'); //hide the pop up window
        $('#jqxStatusGrid').jqxGrid('updatebounddata'); //this causes the data to refresh so that the newly added record shows up and can be edited
    });

The div

                                  <div id='PopUpAddStatusWindow'>
                                        <div id="outer_aStatusTitle"><div id='a_StatusTitle'></div></div>
                                        <div style='overflow: hidden;'>
                                            <table>
                                                <tr>
                                                    <td align='left'>
                                                        <div id='aAddedByFullName' style='display: none;'></div>
                                                        <textarea id='acapaStatus'></textarea>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style='padding-top: 10px;' align='right'>
                                                        <input style='margin-right: 5px;' type='button' id='aSaveStatus' value='<%=session("cs_270")%><%'Save %>' />
                                                        <input id='aCancelStatus' type='button' value='<%=session("cs_174")%><%'cancel %>' />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>

The error in chrome when I click the button to show the popup window

Uncaught TypeError: Cannot read property 'getComputedStyle' of undefineda.getComputedStyle.Ib @ jquery-1.11.1.min.js:3a.getComputedStyle.Jb @ jquery-1.11.1.min.js:3m.extend.css @ jquery-1.11.1.min.js:3m.cssHooks.(anonymous function).get @ jquery-1.11.1.min.js:3m.extend.css @ jquery-1.11.1.min.js:3(anonymous function) @ jquery-1.11.1.min.js:4m.access @ jquery-1.11.1.min.js:3m.fn.(anonymous function) @ jquery-1.11.1.min.js:4$.extend._arrange @ jqxeditor.js:7(anonymous function) @ jqxeditor.js:7(anonymous function) @ jqxcore.js:7
jqxeditor.js:7 Uncaught TypeError: Cannot read property 'select' of nulle.selectRange @ jqxeditor.js:7$.extend.selectRange @ jqxeditor.js:7$.extend.focus @ jqxeditor.js:7a.jqx.invoke @ jqxcore.js:7a.jqx.jqxWidgetProxy @ jqxcore.js:7(anonymous function) @ jqxcore.js:7m.extend.each @ jquery-1.11.1.min.js:2m.fn.m.each @ jquery-1.11.1.min.js:2a.fn.(anonymous function) @ jqxcore.js:7(anonymous function) @ ca_global_displayedit.js:3456

When I click on my global_dispalyedit.js it takes me to

    $('#PopUpAddStatusWindow').on('open', function (event) {
        setTimeout(function () {
            $("#acapaStatus").jqxEditor('focus');
        }, 150);
    });

Any suggestions would be very appreciated!

Thanks!

[sjkcwatsonParticipant]

A little more information – if I run the debugger in IE, I get the following on loading of the page

In jqxeditor.js
It says “not implemented” with this highlighted {g.widget[0].style=g.element.style}

If I continue on, I get “this command not supported” with this highlighted .editorDocument.execCommand(“useCSS”,false,false)

if I continue I get the same errors (I assume for the different editors on the page). Then the main page will load with my grid.

but when I try to click on anything I get
throw new Error(“Invalid Selector! Please, check whether the used ID or CSS Class name is correct.”)

[HristoParticipant]

Hello sjkcwatson,

This code is a little bit difficult to follow as whole code.
Some points – Is path correct of the ‘jqxeditor.js’? And is it possible to write somewhere incorrect the selector name?
I recommend to create each part separately one by one and see for any error.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts