How to have jQueryUI dialog box dynamically load content

This isn’t hard to do — I wouldn’t start messing with iframes for this alone. How about something like this? $( “.selector” ).dialog({ open: function(event, ui) { $(‘#divInDialog’).load(‘test.html’, function() { alert(‘Load was performed.’); }); } }); Basically, you create your dialog, and when it is opened, an html file is loaded from your server, replacing … Read more

How can I disable a button on a jQuery UI dialog?

Looks like anyone, even in this linked question, have proposed this solution, similar to the first part of the answer given by Nick Craver: $(“#dialog”).dialog({ width: 480, height: “auto”, buttons: [ { id: “button-cancel”, text: “Cancel”, click: function() { $(this).dialog(“close”); } }, { id: “button-ok”, text: “Ok”, click: function() { $(this).dialog(“close”); } } ] }); … Read more

Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

There are some cases, where jqGrid calculate the width a little incorrect. Mostly I have problems with grid width, but in some cases on IE6 also with the height. So I have to write a small function to fix the problem. var fixGridWidth = function (grid) { var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; var mainWidth = jQuery(‘#main’).width(); … Read more

jQuery UI Dialog – missing close icon

I am late to this one by a while, but I’m going to blow your mind, ready? The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in. Literally, swap the two so that instead of: <script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script> <script src=”https://stackoverflow.com/questions/17367736/js/bootstrap.min.js”></script> it becomes <script src=”https://stackoverflow.com/questions/17367736/js/bootstrap.min.js”></script> <script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script> 🙂 Edit … Read more

Error: TypeError: $(…).dialog is not a function

Be sure to insert full version of jQuery UI. Also you should init the dialog first: $(function () { $( “#dialog1” ).dialog({ autoOpen: false }); $(“#opener”).click(function() { $(“#dialog1″).dialog(‘open’); }); }); <script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script> <script src=”https://code.jquery.com/ui/1.11.1/jquery-ui.min.js”></script> <link rel=”stylesheet” href=”https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css” /> <button id=”opener”>open the dialog</button> <div id=”dialog1″ title=”Dialog Title” hidden=”hidden”>I’m a dialog</div>

How to display an IFRAME inside a jQuery UI dialog

The problems were: iframe content comes from another domain iframe dimensions need to be adjusted for each video The solution based on omerkirk’s answer involves: Creating an iframe element Creating a dialog with autoOpen: false, width: “auto”, height: “auto” Specifying iframe source, width and height before opening the dialog Here is a rough outline of … Read more