jQuery UI Widgets Forums Editors Editor Getting 'getComputedStyle' of undefined an 'select' of null on editor

This topic contains 2 replies, has 2 voices, and was last updated by  Hristo 8 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • sjkcwatson
    Participant

    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!


    sjkcwatson
    Participant

    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.”)


    Hristo
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.