The ajax tabs work perfectly well. It's pretty straightforward with that part. However, getting the ajax UI Dialog modal window to trigger off of a link has been un-succesful.
Any help in this would be appreciated.
+1
A:
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>
altCognito
2009-04-30 20:59:53
Actually, I'm not sure this is what you're looking for, I'll come back and update unless someone else picked it up. Can you clarify what is causing the issue?
altCognito
2009-04-30 21:04:18
+24
A:
Nothing easier than that man. Try this one:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head>
<body>
<a class="ajax" href="http://www.google.com">
Open as dialog
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:hidden"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
</body>
</html>
Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).
Cheers
jek
2009-09-25 12:13:54