Solved

Jquery UI Dialog AutoResize Not Working?

Posted on 2014-12-02
11
655 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

726 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