Search jQuery

jQuery Forum

Screen name:
stephandoliov

stephandoliov's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Inconsistent behavior of Dialog instantiation
[0Replies]
- 04-Jan-2013 06:41 PM
- Forum: Using jQuery UI
Hi, I have moved this post for jQuery UI Dialog API redesign to here as that is what the observers of that topic suggested. So this is a repost of one of the comments #21 at http://forum.jquery.com/topic/dialog-api-redesign.
Hi Team,
Love your work and I'd love to know how to post some updates to the existing documentation. I am using a dev pattern of running all my jquery and jquery-ui stuff inside of a $(document).ready(function() { // code in here ;}); construct. And I found the only way I was able to make $('.selector').dialog("open") work was to create an options object and then on the desired event fire $('.selector').dialog(myOptionsObj).dialog("open").
I am on jquery 1.8.3 and jqueryui 1.9.2.

The docs on the jquery-ui website suggest that
$('.selector).dialog({ variousOptions: val , ... });
$('.controllerSelector').click(function() {
$('.selector').dialog("open");
}

But it fails in my context.
My context is a "base" page with multiple jQuery UI remote tabs (remote in the sense that their content is loaded from html files that I control but such content is not necessary static).

I have included the code for the 3 html pages to make the problem/feature repeatable. To see what is either a bug or a feature, one needs to comment out one version of the jQuery code in the document ready function in the tm2.html file and uncomment out the second version of the code. As attached, I have the working jQuery code in the tm2.html file, but to repeat my problem (or thing that I wish to help document if it is a feature), just uncomment out the currently comment out block in tm2.html and remove the /* and */ that is there to show how the jQuery UI code docs fail in this scenario.

It's possible that I misunderstand many aspects of jQuery and jQuery UI, so feel free to just educate me as to what I have misunderstood or let me know how I can help improve the documentation.

Thanks,
Steve

here is the "master.html" page
!DOCTYPE html>
<html>
<head>
<title>Master tabs page</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
myTabs = $('#tabsDiv').tabs();
myTabs.tabs({
ajaxOptions: { cache: false
, error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
}
}
});
});
</script>
<body>
<div id="tabsDiv" class="ui-tabs-panel">
<ul>

<li><a id="frag-0" href="someLocalPage1.html">Local Page 1</a></li>

<li><a id="frag-1" href="tm2.html">Page W/Dialog</a></li>
</ul>
</div>
</body>
</html>
here is the dummy local page (someLocalPage1.html)
<!DOCTYPE html>
<html>
<head>
<title>Domb hello page</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<body>
<h2>Hello</h2>
</body>
</html>
and here is the tm2.html page that illustrates the problem. To see the fixed version of the problematic code, leave this file as is; to see the problematic code, remove the "/*" and "*/" from lines 13 and lines 33 respectively and add such corresponding comment block markers to lines lines 33 and end of line 56
<!DOCTYPE html>
<html>
<head>
<title>Illustrate working modal dialog from within doc ready function in a jquery ui remote tabbed context</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
//the following fails with a "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'"
/*
$('#modalDialogDiv').dialog({
title: 'Foo'
, autoOpen: false
, width: 750
, height: 500
, modal: true
, buttons: {
"Add Record": function() {
console.log("record add button was pressed");
}
}
, close: function() {
console.log("dialog was closed");
}
});

$('#controllerButton').click(function() {
$('#modalDialogDiv').dialog("open");
});
*/
/* the following however works inside of document ready */
var myOptionsObj = {
title: 'Quick Add a New Record'
, autoOpen: false
, height: 500
, width: 750
, modal: true
, buttons: {
"Add Record": function() {
console.log("record add button was pressed");
}
}
, close: function() {
console.log("dialog was closed");
}
};

//failure to add the following line causes the modal data entry form to be displayed by default
$('#modalDialogDiv').dialog(myOptionsObj);

$('#controllerButton').click(function() {
$('#modalDialogDiv').dialog(myOptionsObj).dialog("open");
});
}); //end doc ready function
</script>
</head>
<body>
<div id="modalDialogDiv">
<form id="quickAddRecordForm">
<label for="lastname">Last Name: </label>
<input id="lastname" type="text" name="lastname" />
</form>
</div>
<div id="demoDiv">
<button id="controllerButton">Quick Add Record</button>
</div>
</body>
</html>
Any help in understanding this issue would be greatly appreciated.
For what it's worth, I would not be surprised if the poster of
http://forum.jquery.com/topic/dialog-box-not-opening-in-ie8 is really victim of this same quirk.

Thanks,
Stephan Doliov

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend