Develop Reference

Close dialog box from other function using jQuery

Hi I have a dialog box it shows some menus and when I click on any menu it shows another popup window. When I finished my work from popup, I want that the dialog box closes automatically.
Please suggest how can I do this.
jQuery:
function() {
$( this ).dialog( "close" );
window.parent.pmsSession.scrollposition = true;
window.parent.pmsSession.appointmenttime = fromTime;
window.parent.$("#gridcontainer").reload();
CloseModelWindow();
$( '#options' ).dialog( "close" );
}

When you finish your work-- write this
$("#idDialog").dialog("close");
it means you are manually closing the dialog

When you are done, you just call:
$("#dialog_id").dialog('close');

When you finish your work-- write this
$("#idDialog").dialog("close");

How to stop Jquery executing on page load

I have a piece of Jquery which I am using to force a div to have a 'slide in' effect upon a user clicking on another div (a button which I define). However, upon page load, the jquery has executed and the div which is supposed to slide in upon user click, has already appeared and been revealed. Please can someone tell me how to stop this, and make it so that it's not active upon page load, and only works upon user click. Thanks.
Here is my code :
$( "#open-nav-3" ).click(function() {
$( "#open-nav-menus" ).slideToggle( "slow" );
});
open-nav-3 is the button which the user clicks to make the content appear, and open-nav-menus is the div ( content ) which appears.
I expect this is probably very simple, but I am a novice with all things Javascript.

I guess you just need an additional
$( "#open-nav-menus" ).hide();
to hide the element on page load. Add it before the event handler:
var navMenu = $( "#open-nav-menus" );
navMenu.hide();
$( "#open-nav-3" ).click(function() {
navMenu.slideToggle( "slow" );
});

Update text, without clearing icons in table?

I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});

With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.

you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/

Jquery Popup gets hidden behind editlive editor

In my application I have used EditLive Editor. When I try to open a popup on the same page where edtor is present it gets hidden behind it. Could anyone please help me how can i get my jquery dialog over the eitor.
Thanks

Try give a heigher z-index to jQuery dialog.
Code examples
//Initialize a dialog with the zIndex option specified.
$( ".selector" ).dialog({ zIndex: 3999 });
//Get or set the zIndex option, after init.
//getter
var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
//setter
$( ".selector" ).dialog( "option", "zIndex", 3999 );

The issue you are dealing with is tied to how browsers and applets coexist. In general the applet ignores z-index and always appears on top - this is not an EditLive issue but an issue with applets in general.
EditLive in specific has an API to address this called setBackgroundMode
EditLive 8: http://docs.ephox.com/display/public/EditLive/setBackgroundMode+Method
EditLive 6/7: http://docs.ephox.com/display/EditLive7/setBackgroundMode+Function
Note that you should wait for the callback to fire before performing other actions (e.g. displaying AJAX lightboxes)

jQueryUI dialog box height grows too tall

I have a jQueryUI dialog box that loads its content the moment someone opens it using the "open" event to initiate the $('#dialogDiv').load() call.
Works great except the dialog box grows extremely tall if there's a lot of content being loaded. What I want is to limit the height. The maxHeight jQueryUI dialog option would seem to work perfect, except it only takes effect the moment you resize. The initial load will grow the dialog really tall and then when you try and resize, it immediately shrinks to the maxHeight.
How can I make a dynamically loading dialog box that won't grow beyond a certain height?

Adding the CSS position:absolute;overflow:hidden for class .ui-dialog will fix the problem.

Use height option while initalization...
for eg-
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
here you can see "height:140"
this defines that the dilog will be of only that size, no matter how much data is inside..
for more detais about the events,options,methods download(from here), extract and check out the
jquery-ui-1.8.5.custom > development-bundle > docs > dialog.html