jquery popup only works in ie and not in firefox

Question

I have the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function () {
                $("#dialog").dialog({modal: true, height: 590, width: 1005 });
            });
        });
    </script>
</head>

<body>
<a href="" id="submit">
<div id="dialog" title="Contact form">
   <p>appear now</p>
 </div>
</body>
</html>

when i run this code in ie it works fine and pops up the window no problem. But when i run this in firefox it just refreshes the page. Anyone know how to fix this and why its happening?

Answer 1

I see 2 things

1) Prevent link default behavior (navigate to href url, in this case, current page) using event.preventDefault

$("#submit").click(function (e) {
    e.preventDefault():
    $("#dialog").dialog({modal: true, height: 590, width: 1005 });
});

2) Your a tag is incorrect, it never closes. Not sure if this is a copy paste mistake or your real html.

jquery popup only works in ie and not in firefox

Question

1 answers

solution1
1 2014-07-14 15:05:50

jquery popup only works in ie and not in firefox

Question

1 answers

solution1 1 2014-07-14 15:05:50

solution1
1 2014-07-14 15:05:50