Solved

Jquery UI Dialog AutoResize Not Working?

Posted on 2014-12-02
11
552 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 42

Expert Comment

by:Rob Jurd, EE MVE
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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 

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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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)

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now