Close button not appearing on my jqx window

[nickgowdyParticipant]

Hello,

I have a weird problem on one of my pages where the close button is not showing on my jqx window.

<script>
    function shortcutHover(value) {
        $("#scPopupTitle").html(value);

        var offset = $("#shortcutButtons").offset();
        var posY = offset.top - $(window).scrollTop() + 30;
        var posX = offset.left - $(window).scrollLeft();
        console.log(posX);
        console.log(posY);

        $("#jqxwindow-shortcuts").jqxWindow({
            width: 380,
            height: 80,
            resizable: false,
            draggable: false,
            showCloseButton: true,
            position: {
                x: posX, y: posY
            }
        });

        $('#jqxwindow-shortcuts').jqxWindow('open');
    };

    function initShortcuts() {
        $("#jqxwindow-shortcuts").jqxWindow({
            autoOpen: false
        });
    };
</script>

<div id='jqxWidget' caption="Shortcuts">
    <div id="shortcutButtons">
        <table>
            <tr>
                <td><input type="button" value="Telephone" id='jqxButton' onmouseover="shortcutHover('Telephone')" /></td>
                <td><input type="button" value="Emails" id='jqxButton' /></td>
                <td><input type="button" value="MAC" id='jqxButton' onmouseover="shortcutHover('MAC')" /></td>
                <td><input type="button" value="Letter" id='jqxButton' onmouseover="shortcutHover('Letter')" /></td>
                <td><input type="button" value="Logged" id='jqxButton' /></td>
                <td><input type="button" value="Completed" id='jqxButton' /></td>
                <td><input type="button" value="Sent" id='jqxButton' /></td>
                <td><input type="button" value="In Person" id='jqxButton' onmouseover="shortcutHover('In Person')" /></td>
            </tr>
        </table>
    </div>
</div>

<div id='jqxwindow-shortcuts'>
    <div id="scPopupTitle">Details</div>
    <div id="newsDetailsTable">
        <table>
            <tr>
                <td>Contact Number</td>
                <td><input type="text" style="width: 175px; border: 1px solid #aaa" id="searchTextInput" /></td>
                <td><input type="button" value="Search" id='jqxButton' /></td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript" defer="defer">
    @Html.Raw(ViewBag.StartupScript)
</script>

Can anyone see where the problem lies?

Nick

[Peter StoevKeymaster]

Hi nickgowdy,

This happens due to the reason that you overwrite it by using the jQuery’s html function. Call “setTitle” for setting the Title of a Window dynamically.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nickgowdyParticipant]

Hello Peter,

Thanks! That works perfectly. I used $(‘#’).html() because I didn’t know I could change the title through jqx API.

Have a nice day
Nick

[Author]

Posts