Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 907
  • Last Modified:

Jquery UI Dialog AutoResize Not Working?

I want to resize the Dialog height based on it's content loaded. Currently, it loads fine, just not resizing. What am I doing incorrectly?

<style>
       .ui-dialog-titlebar { 
           display:none;
       }
        .ui-dialog{
          position:fixed;
        }      
    </style>

 <div id="_MyDialog"></div>

function function2(unitId) 
{
        InitializeDialog($("#_MyDialog"), unitId);
        $("#_MyDialog").dialog("open");
    }

function InitializeDialog($element, id) 
{
            $element.dialog({
                open: function (event, ui) {
                    $element.load("/Reader/GetResults/" + id);
                },
                autoOpen: false,
                autoResize: true,
                width: 350,
                height: 'auto',
                minHeight: 450,
                position: { my: 'top', at: 'top+50', of: window, position: 'fixed' },
                resizable: false,
                draggable: false,
                title: "",
                model: false,
                show: "show",
                hide: "hide",               
                closeOnEscape: true,               
                close: function () {
                    $(this).dialog('close');
                }
            });
        }

Open in new window

0
WorknHardr
Asked:
WorknHardr
  • 6
  • 3
  • 2
3 Solutions
 
leakim971PluritechnicianCommented:
When jQuery resize your dialog the content is not yet loaded, just call is just made

replace :
                    $element.load("/Reader/GetResults/" + id);

Open in new window

by :
                    $.ajaxSetup({async:false});
                    $element.load("/Reader/GetResults/" + id);
                    $.ajaxSetup({async:true});

Open in new window

0
 
RobOwner (Aidellio)Commented:
You are using a few properties that do not exist for the dialog element, however I can't reproduce your issue.

When you view this demo, is that what you want? (click the show button)

http://jsbin.com/kaqizu/1/quiet
0
 
RobOwner (Aidellio)Commented:
I modified your code so that you initialise the dialog once but function2 loads the content each time.

$(function() {
	InitializeDialog($("#_MyDialog"));
});

function function2(unitId) 
{
    
	//$("#_MyDialog").load("/Reader/GetResults/" + unitId);
	// for testing
	
	$.ajax({
		url: "http://jsbin.com/xazumu/1/quiet",
		success: function(data) {
			$("#_MyDialog").text(encodeURIComponent(data));
			console.log($("#_MyDialog").innerHeight());
			$("#_MyDialog").dialog("open");
		}
	});

}

function InitializeDialog($element) 
{
	$element.dialog({
		autoOpen: false,
		autoResize: true, // DOESN'T EXIST
		width: 350,
		height: 'auto',
		//minHeight: 450,
		position: { my: 'top', at: 'top+50', of: window, position: 'fixed' },
		resizable: false,
		draggable: false,
		title: "",
		modal: false, // not model but modal
		show: true, // changed to boolean to animate
		hide: true, // changed to boolean to animate
		closeOnEscape: true,               
		close: function () {
			$(this).dialog('close');
		}
	});
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
WorknHardrAuthor Commented:
leakim971:  ajaxSetup is interesting fix
Rob Jurd: yup that's the idea

Yes, I have some crazy params and misspellings. I will try these ideas tomorrow, thanks for a quick reply:)
0
 
WorknHardrAuthor Commented:
Okay, neither example works for me.
I'm using  jquery-1.10.2.js / jquery-ui-1.11.1.js

Q. What version Jquery / Jquery-ui are you both using?
0
 
leakim971PluritechnicianCommented:
any
could you provide a link to your websiteor a test page somehere?
0
 
WorknHardrAuthor Commented:
Have you tried returning a _partialView.cshtml like this:
         using $("#_MyDialog").html(data));

I'm returning a _partialView.cshtml with this .load:
$element.load("/Reader/GetResults/" + id);
0
 
RobOwner (Aidellio)Commented:
.load is a shorthand method for $.ajax with .html() however I've found it tries to parse the html being returned and if it isn't quite right, it fails.

You can see here how I've coded the demo: http://jsbin.com/kaqizu/1/edit?html,output

I'm using jquery 1.11.1 so I suggest trying that for compatibility with UI 1.11.2
0
 
WorknHardrAuthor Commented:
The _partialView.cshtml was wrapped in a div using a class. I removed the class from the div and now auto size and scroll bars works. Before it would do neither. Wow!
0
 
WorknHardrAuthor Commented:
Oh yea, I'm using the same code I posted for this question (no typos), which I've used numerous times loading partial views.  Strange indeed...
0
 
WorknHardrAuthor Commented:
I split the points because after solving this problem with the partialView, both code examples now work.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now