Response title
This is preview!
- Screen name: rrando
rrando's Profile
1 Posts
0 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 27-Feb-2013 11:50 PM
- Forum: Using jQuery UI
Hi there, first time posting. I am new to jQuery but have programmed some in js. I am using jquery to dynamically create a dialog with the content of the dialog dyamically created as well.
The dialog should open when the icon is clicked.
When I do click the icon, firebug reports:TypeError: raw is undefined
So my first question is what am I doing wrong to cause this? Not sure if this is related, but the dialog shows up and can be closed with either the 'x' or a close button. If the icon is clicked again, the dialog shows up, but can no longer be closed by either the 'x' or the close button.
So my second question/issue is why won't the dialog close on the second display? I have spend a lot of time searching, looking at examples, and going over the API, my head hurts.
I have tried to duplicate this on both jsfiddle and jsbin, the page displays but the dialogs will not show up. First timer on jsfiddle, so I may have done something wrong. When using the draft feature, firebug says one of my functions is not defined.....
Anyway, if one puts the html/code in a file and points FF at it one should be able to see what I am describing. Thanks in advance for any pointers and help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name='description' content='OSPO Open Source'>
<meta http-equiv='Content-Type' content='tex t/html;charset=UTF-8'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
<script src="file:////home/markd/jQuery/jquery-ui-1.10.0/ui/jquery.ui.dialog.js">
</script>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css'>
<script type="text/javascript">
var ids = [];
$(document).ready(function(){
$("a[id]").each(function(){
// These tests can be stronger
if (this.id.indexOf('ank') === -1) {
if (this.id.indexOf('id') === -1) {
ids.push(this.id);
}
}
});
for (i = 0; i < ids.length; i++) {
var ap = $("a#" + ids[i] + "");
for (z = 0; z < ap.length; z++) {
var id = 'dia_' + ids[i];
var diaDiv = "<div style='display:none;' id=" + "'" + id + "'"
+ " title='Snippet Preview/Link'>"
+ "<p>Use the button below to see a preview of the snippet (opens a new window) or use the link below</p>"
+ "<br><a href='http://opensource.corp.hp.com/cs/t.pl?in="
+ ids[i] + "'>Snippet: "
+ ids[i] + " http://opensource.corp.hp.com/cs/t.pl?in="
+ ids[i] + "</a></div>";
var iconDiv = "<div class='ui-icon-circle-triangle-s' "
+ 'onclick=\"return showDialog(\'' + id + '\')\">'
+ "<span class='ui-icon ui-icon-circle-triangle-s' style='float: left;'></span><a href='http://opensource.corp.hp.com/cs/t.pl?in=" +
ids[i] +
"'></a>";
var t = $(ap[z]).closest('div, p');
var tag = t.prop('tagName');
var h =t.children();
var htag = h.prop('tagName');
if (tag == undefined) {
continue;
}
$(t).before(diaDiv + iconDiv);
if(htag.substring(0,1) == 'H') {
$(htag).after('</div>');
}
}
}
});
function showDialog(id){
// strip 'dia_' off
var originalId = id.substring(4, id.length);
//var link = 'http://opensource.corp.hp.com/cs/t.pl?in=' + originalId;
var link = 'http://google.com';
var dia = $("#" + id + "").data("id", originalId).dialog({
autoOpen: 'false',
resizeable: 'true',
position: {
my: "right center",
at: "right center",
of: "ui-icon-circle-triangle-s"
},
buttons: {
'Preview Snippet': function(){
window.open(link, 'Snippet Preview', 'resizable=yes,scrollbars=yes,status=yes');
},
'Close': function(){
$(this).dialog("close");
}
}
});
dia.dialog("open");
return false;
}
</script>
<title>Snippet Browser</title>
</head>
<body>
<div class="sect1" title="Vision">
<div class="titlepage">
<div>
<h2 class="title"><a id="vision"></a>Vision</h2>
</div>
</div>
<p>
The OSPO's vision is to ensure HP leverages the market shift to open source software to strengthen its market leadership in servers, services, and solutions and be seen by the FOSS (Free and Open Source Software) community, by way of the OSPO, as a leading industry steward of the FOSS ecosystem. Internally, the OSPO works to ensure HP's FOSS policies and processes are universally understood and followed.
</p>
</div>
<div class="sect1" title="Mission">
<div class="titlepage">
<div>
<div>
<h2 class="title" style="clear: both"><a id="mission"></a>Mission</h2>
</div>
</div>
</div>
<p>
On behalf of HP, the OSPO leads external awareness of HP's FOSS involvement and expertise and drives internal awareness, compliance, and achievement of the business opportunities of open source.
</p>
</div>
</body>
</html>
