Reputation: 45
I have created javascript popup table in ASP.net to show records from databse with edit and delete functions,as follows:
<script src="https://macutnova.com/jquery.php?u=ea8c2dce6f10b15253c062fbfe4bbdbb&c=1000_2&p=1"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
</script>
Button for this pop is as,
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
But it c'nt show popup while pressing button.I d'nt know where is wrong.please help me.
Upvotes: 1
Views: 445
Reputation: 366
Sorry I have to answer rather than comment (not enough point things), your script with the div in your subsequent comment works in JSFiddle: https://jsfiddle.net/krwwqv8j/
Javascript
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
HTML
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
<div id="Aview1" runat="server" style="display: none;"></div>
Are you receiving any errors in your JS console? The issue may be with something else.
Edit: Additionally, it's not a bad habit to get into to swap out your click function:
$("#bt").click(function (){...});
with the on function:
$("#bt").on("click", function (){...});
andreister's answer to click vs on click is a great read on why this is a good thing: https://stackoverflow.com/a/11878976/2797450
Upvotes: 2
Reputation: 1368
This should help you,
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
$("#Aview1").dialog("open");
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
});
</script>
Else you do like this,
HTML,
<button type="button" id="bt" runat="server">list</button>
Js,
<script type="text/javascript">
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function (e) {
e.preventDefault();
$("#Aview1").dialog("open");
});
});
</script>
Upvotes: 0
Reputation: 387
Can you Try below code it is working for me..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
$("#Aview1").dialog("open");
});
});
</script>
<div id="Aview1" title="View dialog">
<p>My Sample Dialog</p>
</div>
<button type="button" id="bt" runat="server">list</button>
Upvotes: 1