Open modal dialog onClick with JavaScript doesn't work

Question

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?

using ID's should be unique, and so, there should never be 2 of the same ID on a page, use class instead — DannyTheDev
– DannyTheDev, Commented Feb 25, 2016 at 14:21

CaffeineFueled · Accepted Answer · 2016-02-25 14:20:44Z

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>

Seth · Accepted Answer · 2016-02-25 14:20:14Z

2

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

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

find the jsbin here

edited Feb 25, 2016 at 14:20

Seth

10.5k10 gold badges50 silver badges69 bronze badges

answered Feb 25, 2016 at 14:18

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

Open modal dialog onClick with JavaScript doesn't work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related