CODEWITHSUNDEEP
jquerybuttonmodal-dialogjquery-ui-dialog
Nick G
Nick G

Reputation: 1229

JQuery Dialog not displaying buttons

I'm initializing a dialog box in the document.ready() function put the OK button doesn't render on the page. This is a really straight forward thing, just not sure what's going on.

$(document).ready(function(){
//var popupWindow = window.open('P360TradingVideos.asp','P360TradingVideos','height=400,width=510,status=no,toolbar=no,menubar=no,resizable=no,location=no,scrollbars=no');

$("#videoPlayerDiv").dialog({
    position: "center",
    resizable: true,
    autoResize: true,
    draggable: false,   
    modal: true,
    buttons: {
        "Ok": function(){
            $(this).dialog("close");
        }
    }
});

})

and here is the div

<div id="videoPlayerDiv">
    <div id="videoTable">
        <table>
            <tr>
                <td><b>Trading Videos</b></td>
            </tr>
            <tr>
                <td>--></td><td><a href="#" onclick="playVideo('tradingOverview');">Trading Overview</a></td>
            </tr>
            <tr>
                <td>--></td><td><a href="#" onclick="playVideo('multiAccount');">Multi-Account Trading Wizard</a></td>
            </tr>
            <tr>
                <td>--></td><td><a href="#" onclick="playVideo('globalUnlock');">Global Unlock</a></td>
            </tr>
        </table>
    </div>
    <div id="videoPlayer" style="display:none; height: 250px; width: 250px;">

    </div>
</div>

the dialog pops up correctly on the page load, but doesn't display the OK button. Also, here is the two functions I have written to populate the videoPlayer div just in case that might be causing an issue, I am not all that familiar with the dialog structure. Thanks for the help

function playVideo(x){
    $("#videoTable").attr("style","display:none;");
    $("#videoPlayer").attr("style","display:block;");
    $("#videoPlayer").html("");

    var videoToPlay = x;
    switch(videoToPlay){
        case 'tradingOverview':
            //alert(videoToPlay);
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='Wildlife.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='Wildlife.wmv'><param name='filename' VALUE='Wildlife.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='Wildlife.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
        break;
        case 'multiAccount':
            //alert(videoToPlay);
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='BabyBoyMainBackground.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='BabyBoyMainBackground.wmv'><param name='filename' VALUE='BabyBoyMainBackground.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='BabyBoyMainBackground.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
        break;
        case 'globalUnlock':        
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='Panel_Mask.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='Panel_Mask.wmv'><param name='filename' VALUE='Panel_Mask.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='Panel_Mask.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
            //alert(videoToPlay);
        break;
    }
}
function returnVideos(){
    $("#videoTable").attr("style","display:block;");
    $("#videoPlayer").attr("style","display:none;");
}

Upvotes: 0

Views: 542

Answers (2)

Nick G
Nick G

Reputation: 1229

i figured it out, it's an inherited styling issue coming from a different external stylesheet that had the buttonpane and button attributes set to display:none; that's my mistake, this isn't my original code so i wasn't aware of the outside association. Thank you for your help with the fiddle, i'll be sure to provide fiddles moving forward and do my own testing there first. thanks again

Upvotes: 0

Adnan K.
Adnan K.

Reputation: 109

DEMO:

http://jsfiddle.net/h5zkb/

<div> I just copied your code and the button "OK" is showing up.  </div>

Upvotes: 1

Related Questions