Display div content in a modal dialog box in java
Question
I am trying to display an image inside a modal dialog but the image does not show. can someone have any ideas about this. here is my complete html layout. note: there is jquery in the div content.
html_content = "
<strong>"+title+"</strong>
<br>
<br>
<img src='"+single_image+"'width='300' height='211'>
<br> "+content+"
<br>"+str+"
<div id='image'></div>
<div id='dialog-modal' title='Basic modal dialog'>
<div id='popup' style='display:none'>"+"
<a id='popup-close' href='' class='button'>"+"Fermer"+"</a>
<p><img id='image-placeholder' width='300px'; height='250px' src=''>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.popup-open').click( function(e){
$('#popup:visible').hide();
e.preventDefault();
$('#image-placeholder').attr('src', $(this).attr('href'));
$('#popup').fadeIn('fast');
});
$('#popup-close').click(function(e){
e.preventDefault();
$('#popup').fadeOut('fast');
});
});
</script>
";
String mdialog = "
<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css\" />
<script src=\"http://code.jquery.com/jquery-1.8.2.js\"></script>
<script src=\"/resources/demos/external/jquery.bgiframe-2.1.2.js\"></script>
<script src=\"http://code.jquery.com/ui/1.9.1/jquery-ui.js\"></script>
<link rel=\"stylesheet\" href=\"/resources/demos/style.css\" />
<script>
$(function() {
$( '#dialog-modal' ).dialog({height: 140, modal: true});
});
</script>
<meta http-equiv=\"Content-Type\" " +"content=\"text/html; charset=utf-8\">
<style>
#popup{border: 1px solid gray; background-color:black; border-radius: 5px 5px 5px 5px; margin-left:auto; margin-right:auto; position:fixed; top:50px; z-index: 9999;}
</style>
";
String webData = "
<!DOCTYPE html>
<head>
"+mdialog+"
</head>
<body>
"+html_content+"
</tr>
</table>
</div>
</body>
</html>
";
1 answers
solution1
0 2012-11-22 19:29:17
I reformatted your code but it is pretty evident that you are not coding in a normal fashion. Are you using a web development app (like Frontpage, Expression Web, Sharepoint, etc)?
If you are injecting your HTML via PHP, then you should mention why you are doing that. Also, you should try to avoid unnecessary joinings of strings. By simply joining all the various string bits, and indenting a bit, I turned your code into something readable. This allowed me to find:
- <p> without closing </p>
- closing table elements ( </tr></table> ) but no other table elements in the code
- Two separate areas of javascript
- Two jQuery document.ready functions
Please advise us of your development environment. If you can, I strongly suggest using Notepad++ and coding everything by hand - you'll learn the most that way (and it's really no more difficult). Unless, of course, there is a good reason you are using the other method -- which is why I ask.
Also, I suggest going to the jQueryUI web site and trying their dialog examples directly. Just cut/paste into Notepad++ and try them all. Then search SO for other dialog examples and try them.
And why Notepad++? Because it has good syntax highlighting and (best of all) an integrated FTP component. This means that when you save the script file you are working on, it is instantly uploaded to your web server giving you almost-instant live testing. It's fantastic.
You might also like to check out the excellent coding resources at phpacademy.org. Definitely the best tuts on the web.
Good luck with your project.
And finally, this is what your code actually looks like when taken out of the php strings, and the script sections are combined, and the style section is formatted. Notice the extra table tags out of nowhere and the orphaned paragraph tag.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
$( '#dialog-modal' ).dialog({height: 140, modal: true});
$('.popup-open').click( function(e){
$('#popup:visible').hide();
e.preventDefault();
$('#image-placeholder').attr('src', $(this).attr('href'));
$('#popup').fadeIn('fast');
});
$('#popup-close').click(function(e){
e.preventDefault();
$('#popup').fadeOut('fast');
});
});
</script>
<meta http-equiv="Content-Type" " +"content="text/html; charset=utf-8">
<style>
#popup{
border: 1px solid gray;
background-color:black;
border-radius: 5px 5px 5px 5px;
margin-left:auto;
margin-right:auto;
position:fixed;
top:50px;
z-index: 9999;
}
</style>
</head>
<body>
<strong>This is my Title</strong>
<br>
<br>
<img src='http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG'width='300' height='211'>
<br>
Here is some content
<br>
Here is a string of text.
<div id='image'></div>
<div id='dialog-modal' title='Basic modal dialog'>
<div id='popup' style='display:none'>
<a id='popup-close' href='' class='button'>Fermer</a>
<p><img id='image-placeholder' width='300px'; height='250px' src=''>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>
<script type='text/javascript'>
</script>
</tr>
</table>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.