CODEWITHSUNDEEP
javascriptjqueryhtml
Marcel Grüger
Marcel Grüger

Reputation: 934

Open modal dialog onClick with JavaScript doesn't work

I know, this problem is postet here already in 236 variants. But even when I try to use those I understand, I don't get the correct behavior with my script. I have the following code (HTML and JS):

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function() {
        var dialog, form
        dialog = $('div#infoDialog').dialog({
          autoOpen: false,
          height: 600,
          width: 500,
          modal: true
        });
        $('#showInfos').click(function(e) {
          e.preventDefault();
          dialog.dialog('open');
        });
      });
    </script>
  </head>

  <body>
    <div id="infoDialog" title="Eventinfos">
      Testeintrag
    </div>
    <button id="showInfos"><img src="images/apoa.gif" /></button>
    <a href="javascript: void(0)" id="showInfos"><img src="images/apoa.gif" /></a>
  </body>
</html>

The button works fine as intended, but the "a href..." doesn't work at all. I already tried all alternatives I could think of, like dont use img's or try a # instead of the javascript: void(0) or like not use a variable dialog but always name it directly, but none worked.
In the examples nearly the same code should worked fine. What did I do wrong?

Upvotes: 2

Views: 3525

Answers (2)

CaffeineFueled
CaffeineFueled

Reputation: 581

I believe the problem is that both "buttons" are using the same ID. Either change the ID of one of them or switch them both to use classes (or some other selector).

IDs must be unique.

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<title>jQuery UI Dialog - Modal form</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script type="text/javascript">
			$(function() {
				var dialog, form
				dialog = $('div#infoDialog').dialog({
					autoOpen: false,
					height: 600,
					width: 500,
					modal: true
				});
				$('.showInfos').click(function(e){
					e.preventDefault();
					dialog.dialog('open');
				});
			});
		</script>
	</head>
	<body>
		<div id="infoDialog" title="Eventinfos">
			Testeintrag
		</div>
		<button class="showInfos"><img src="images/apoa.gif" /></button>
		<a href="javascript: void(0)" class="showInfos"><img src="images/apoa.gif" /></a>
	</body>
</html>

Upvotes: 3

Pavan Teja
Pavan Teja

Reputation: 3202

use class="showInfos" instead id="showInfos" and in js

$('.showInfos').click(function(e) {
  e.preventDefault();
  dialog.dialog('open');
});

find the jsbin here

Upvotes: 2

Related Questions