jQuery UI Widgets Forums Editors Editor HTML Editor in modal jqWidget Window not working

This topic contains 4 replies, has 2 voices, and was last updated by  polly.woodhouse@agile.co.nz 4 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Hi,
    I would be very pleased if you would please help me.

    I have put the HTML Editor inside the Window jqWidget dialog box.

    However, I get strange behaviour, and would be grateful if you would please have a look at it. I have included my project for you which shows this behaviour.

    1/ In Chrome v43 – Pasting Content > View Source –
    Freezes Editor
    When I paste content into the Editor and then press the View Source tool button, everything is frozen.

    2/ In Chrome v43 – Deselection Occurs with Drop Downs

    I select a portion of text, then select the Font Size drop down and set the text say to 14 pt

    I then select a completely different portion of text, and select the Font Size drop down to set the text to say 18pt.
    Result: my selection is deselected and my 1st selection is now selected.

    This same behaviour occurs with all the drop down boxes.

    3/ In FF v 39 – I can’t write anything in the HTML Editor at all

    4/ In IE 11 – the HTML Editor doesn’t function at all

    I have a copy of my project code below, and if you would like me to send you the package please let me know how I can send it.

    Looking forward to hearing from you,

    Regards,

    Polly

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″ />

    <title>HTML Editor</title>

    <link rel=”stylesheet” href=”scripts/jqwidgets/styles/jqx.base.css” />

    <!–<script type=”text/javascript” src=”/scripts/jquery-2.1.3.min.js”></script>–>

    <!– <script type=”text/javascript” src=”scripts/jquery-2.1.3.min.js”></script>–>

    <script type=”text/javascript” src=”scripts/jquery-2.1.4.min.js” ></script>

    <!– doesn’t work with this library

    <script type=”text/javascript” src=”/scripts/jquery-1.11.1.min.js”></script>–>

    <script type=”text/javascript” src=”scripts/jqwidgets/jqxcore.js”></script> <!–ok–>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxlistbox.js”></script>

    <script type=”text/javascript” src=”scripts/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxdropdownbutton.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxcolorpicker.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxeditor.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”scripts/jqwidgets/jqxcheckbox.js”></script>

    <script type=”text/javascript” src=”scripts/jquery-ui-1.10.4.custom.min.js” ></script>

    <style>

    .header{
    background-color:#0099FF;
    width:800px;
    height: 40px;
    padding: 20px;
    border-top-style:solid;
    border-top-width:thick;
    border-top-color:#0033CC;
    border-right-style:solid;
    border-right-width:thick;
    border-right-color:#009966;
    border-left-style:solid;
    border-left-width:thick;
    border-left-color:#009966;
    font-size:18px;
    font-weight:bold;

    }

    .theBody{

    background-color:#33FFCC;
    width:800px;
    height: 300px;
    padding:20px;
    border-bottom-style:solid;
    border-bottom-width:thick;
    border-bottom-color:#0033CC;
    border-right-style:solid;
    border-right-width:thick;
    border-right-color:#009966;
    border-left-style:solid;
    border-left-width:thick;
    border-left-color:#009966;
    }

    #buttonArea{

    float: right;
    margin-top: 20px;

    }

    .marginRight{

    margin-right:10px;
    }

    .theButtons{

    width:90px;
    height: 40px;
    color:#000000;
    margin:10px;

    border-top-style:solid;
    border-top-width:thick;
    border-top-color:#0066FF;

    border-bottom-style:solid;
    border-bottom-width:thick;
    border-bottom-color:#009966;

    border-right-style:solid;
    border-right-width:thick;
    border-right-color:#0066FF;

    border-left-style:solid;
    border-left-width:thick;
    border-left-color:#009966;
    }

    </style>

    </head>

    <body>

    <div id=”jqxWidget” style=”display:none;”>

    <div id=”anotherDialog” >

    <div class=”header”>

    Your Opinion Matters – to us
    </div> <!– end of header div –>

    <div class=”theBody”>

    Let us put the editor in here
    <textarea id=”theEditor”> </textarea>

    <div id=”buttonArea”>
    <input type=”button” id=”okBtn” value=”OK” class=”marginRight theButtons” />
    <input type=”button” id=”cancelBtn” value=”Cancel” class=”theButtons” />
    </div>

    </div> <!– end of theBody div –>

    </div> <!– end of another Dialog div –>

    </div> <!– end of jqxWidget div –>

    <!–<input type=”button” value=”Start Editor” onClick=”openDialog()” ></input>
    –>

    <input type=”button” value=”Show Dialog” autofocus onClick=”showTheDialog()”></input>

    </body>

    <script type=”text/javascript”>

    $(document).ready(function () {

    debugger;

    //setUpEditor();

    //setUpDialog();

    });

    function setUpEditor(){

    debugger;

    $(‘#theEditor’).jqxEditor({
    height: “400px”,
    width: ‘800px’
    });

    }

    function setUpDialog(){

    debugger;

    // let us call the setUpEditor method
    setUpEditor();

    $(‘#anotherDialog’).jqxWindow({

    height: 650,
    width: 900,

    resizable: false,
    // these are important if we set resizable to true
    maxHeight: 1000,
    maxWidth: 1200,
    minHeight: 80,
    minWidth: 100,

    // i.e. it blocks the rest of the page from user interaction
    isModal: true,

    // when this is set to 1 the background window is pitch black
    modalOpacity: 0.3,
    //link to your OK and Cancel buttons
    okButton: $(‘#okBtn’),
    cancelButton: $(‘#cancelBtn’),
    initContent: function () {

    this.focus(); // set the focus to the modal window

    // OR
    // $(‘#cancelBtn’).focus(); // set the focus to the cancel button
    }
    });

    }

    function showTheDialog(){

    debugger;

    setUpDialog();

    $(‘#anotherDialog’).jqxWindow(‘open’);

    }

    </script>

    </html>


    Dimitar
    Participant

    Hi Polly,

    Here is a corrected version of your code that works fine. The reported issues do not occur when testing it.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML Editor</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jquery-ui-1.10.4.custom.min.js"></script>
        <style>
            .header
            {
                background-color: #0099FF;
                width: 800px;
                height: 40px;
                padding: 20px;
                border-top-style: solid;
                border-top-width: thick;
                border-top-color: #0033CC;
                border-right-style: solid;
                border-right-width: thick;
                border-right-color: #009966;
                border-left-style: solid;
                border-left-width: thick;
                border-left-color: #009966;
                font-size: 18px;
                font-weight: bold;
            }
            
            .theBody
            {
                background-color: #33FFCC;
                width: 800px;
                height: 300px;
                padding: 20px;
                border-bottom-style: solid;
                border-bottom-width: thick;
                border-bottom-color: #0033CC;
                border-right-style: solid;
                border-right-width: thick;
                border-right-color: #009966;
                border-left-style: solid;
                border-left-width: thick;
                border-left-color: #009966;
            }
            
            #buttonArea
            {
                float: right;
                margin-top: 20px;
            }
            
            .marginRight
            {
                margin-right: 10px;
            }
            
            .theButtons
            {
                width: 90px;
                height: 40px;
                color: #000000;
                margin: 10px;
                border-top-style: solid;
                border-top-width: thick;
                border-top-color: #0066FF;
                border-bottom-style: solid;
                border-bottom-width: thick;
                border-bottom-color: #009966;
                border-right-style: solid;
                border-right-width: thick;
                border-right-color: #0066FF;
                border-left-style: solid;
                border-left-width: thick;
                border-left-color: #009966;
            }
        </style>
    </head>
    <body>
        <div id="jqxWidget" style="display: none;">
            <div id="anotherDialog">
                <div class="header">
                    Your Opinion Matters – to us
                </div>
                <div class="theBody">
                    Let us put the editor in here
                    <textarea id="theEditor"></textarea>
                    <div id="buttonArea">
                        <input type="button" id="okBtn" value="OK" class="marginRight theButtons" />
                        <input type="button" id="cancelBtn" value="Cancel" class="theButtons" />
                    </div>
                </div>
            </div>
        </div>
        <input type="button" id="openDialog" value="Show Dialog" autofocus />
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            setUpDialog();
    
            $('#openDialog').click(function () {
                $('#anotherDialog').jqxWindow('open');
            });
        });
    
        function setUpEditor() {
            $('#theEditor').jqxEditor({
                height: "400px",
                width: '800px'
            });
        }
    
        function setUpDialog() {
            $('#anotherDialog').jqxWindow({
                autoOpen: false,
                height: 650,
                width: 900,
    
                resizable: false,
                //	these are important if we set resizable to true
                maxHeight: 1000,
                maxWidth: 1200,
                minHeight: 80,
                minWidth: 100,
    
                //	i.e. it blocks the rest of the page from user interaction
                isModal: true,
    
                //	when this is set to 1 the background window is pitch black
                modalOpacity: 0.3,
                //link to your OK and Cancel buttons
                okButton: $('#okBtn'),
                cancelButton: $('#cancelBtn'),
                initContent: function () {
                    setUpEditor();
                }
            });
    
        }
    </script>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Hi Dimitar,

    thank you for your swift response.

    Your code works perfectly in Chrome. I can see that the important difference between my code and yours is that you have initialised the Editor after the dialog Window is initialised, and it is this which caused the issues. Thank you for this.

    However, I still have problems as your code will not work in other browsers. For instance –

    In IE 11, the Editor is not even rendered
    in FF v39 only one toolbutton works and that is the View Source

    I look forward to hearing from you and thank you for your help.

    Kind regards,

    Polly


    Dimitar
    Participant

    Hi Polly,

    We again tested our example. In Internet Explorer 11, the editor is rendered and works as expected. In Firefox version 39.0, all toolbar buttons work fine. Please make sure you are using the latest version of jQWidgets (3.8.1). If there are any errors thrown in your browser’s console while testing our example, please share them.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Hi Dimitar,

    thank you very much, this seems to be the reason for the problems.

    Thank you for your help,

    Kind regards,

    Polly

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

You must be logged in to reply to this topic.