Solved

Jquery UI Dialog AutoResize Not Working?

Posted on 2014-12-02
11
618 Views
Last Modified: 2014-12-10
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
Comment
Question by:WorknHardr
  • 6
  • 3
  • 2
11 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 40477092
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
 
LVL 43

Expert Comment

by:Rob
ID: 40477101
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
 
LVL 43

Expert Comment

by:Rob
ID: 40477102
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:WorknHardr
ID: 40477652
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
 

Author Comment

by:WorknHardr
ID: 40478618
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40478626
any
could you provide a link to your websiteor a test page somehere?
0
 

Author Comment

by:WorknHardr
ID: 40478888
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
 
LVL 43

Assisted Solution

by:Rob
Rob earned 250 total points
ID: 40479415
.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
 

Accepted Solution

by:
WorknHardr earned 0 total points
ID: 40480180
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
 

Author Comment

by:WorknHardr
ID: 40480183
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
 

Author Closing Comment

by:WorknHardr
ID: 40490912
I split the points because after solving this problem with the partialView, both code examples now work.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question