Showing a dialog on button click
Question
This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work? Kind of took it straight from an example in a book.
2 answers
solution1
1 ACCPTED 2014-08-25 12:11:34
You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.
solution2
1 2014-08-25 12:13:15
There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>
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.