How to call javascript function from asp.net button click event - javascript

How do I call the showDialog from a asp.net button click event. My page is a contentpage that has a masterpage associated with it.
I have tried the following
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog('#addPerson');" />
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog(#<%=addPerson.ClientID %>);" />
I am also going to have to call this same function from a gridview template button to modify the record on the dialog.
<script type="text/javascript">
// Used the following example to open the dialog withJquery
var dl;
$(document).ready(function () {
//Adding the event of opening the dialog from the asp.net add button.
//setup edit person dialog
$('#addPerson').dialog({
//Setting up the dialog properties.
show: "blind",
hide: "fold",
resizable: false,
modal: true,
height: 400,
width: 700,
title: "Add New Member",
open: function (type, data) {
$(this).parent().appendTo("form:first");
}
});
//setup edit person dialog
$('#editPerson').dialog({
//Setting up the dialog properties.
show: "blind",
hide: "fold",
resizable: false,
modal: true,
height: 400,
width: 700,
title: "Modify Member",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
function showDialog(id) {
$('#' + id).dialog("open");
}
// function closeDialog(id) {
// $('#' + id).dialog("close");
// }
//Adding a event handler for the close button that will close the dialog
$("a[id*=ButtonCloseDlg]").click(function (e) {
$("#divDlg").dialog("close");
return false;
});
});
</script>
Tried to call the jquery dialog from a gridview editbutton and get the same error Object doesnt support this property or method?
<input type="submit" name="ctl00$ContentPlaceHolder1$GridViewMembers$ctl02$Button1" value="Edit" onclick="showDialog('addPerson');" id="ContentPlaceHolder1_GridViewMembers_Button1_0" />

If you don't need to initiate a post back when you press this button, then making the overhead of a server control isn't necesary.
<input id="addButton" type="button" value="Add" />
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#addButton').click(function()
{
showDialog('#addPerson');
});
});
</script>
If you still need to be able to do a post back, you can conditionally stop the rest of the button actions with a little different code:
<asp:Button ID="buttonAdd" runat="server" Text="Add" />
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#<%= buttonAdd.ClientID %>').click(function(e)
{
showDialog('#addPerson');
if(/*Some Condition Is Not Met*/)
return false;
});
});
</script>

You're already prepending the hash sign in your showDialog() function, and you're missing single quotes in your second code snippet. You should also return false from the handler to prevent a postback from occurring. Try:
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog('<%=addPerson.ClientID %>'); return false;" />

Related

can't get selected state of a items of asp.net checked list box while mannul post back

function CountrySelect(uniqueID) {
var dialog_buttons = {};
dialog_buttons['Save'] = function () { __doPostBack('chkcountries', ''); }
$(document).ready(function () {
$(function () {
var dlg = $("#dialog").dialog({
maxWidth: 400,
maxHeight: 500,
width: 400,
height: 500,
autoOpen: false,
modal: true,
buttons:dialog_buttons,
title:"Country Selection dialog",
close: CloseFunction
,
show: {
effect: "Clip",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
});
and markup for div with id dialog is
<div id="dialog" style="display:none">
<p>Select Countries</p>
<p>
<asp:CheckBoxList ID="chkcountries" runat="server">
</asp:CheckBoxList>
</p>
and in cs file code is
foreach (ListItem val in chkcountries.Items)
{
if (val.Selected == true)
{
}
}
problem is on postback it says no item is checked. why
i am not able to get the checked state of checkbox list items.
val.selected=false
always
Unfortunately, I can't create comments yet, so I have to do this in an answer. We need to see the code for populating "chkcountries". I think you are doing it in your page load event and not checking if you're in a postback when you do that. So every time the page loads (including postbacks) your checkboxes get reloaded, thus none of them are checked.
Please post your page_load code or wherever you are loading your checkbox list control.
Add these property in your checkbox
<asp:CheckBoxList ID="chkcountries" runat="server" EnableViewState="true">
</asp:CheckBoxList>
Setting EnableViewState to true will preserve the state of control on postback

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.
Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

ASP Button - run OnClick after OnClientClick dialog is closed

I have a page with a button on it. I need a dialog to be opened when user click it (I'm using JQuery UI).
Dialog has two buttons: run server code or close dialog.
The problem is that dialog could wait for user action only if OnClientClick returns false, but in this case OnClick won't fire.
So far I have this code, dialog window closes a moment after it opens.
Any ideas?
$(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 240,
width: 440,
modal: true,
buttons: {
"RUN SERVER PART": function () {
$(this).dialog("close");
return true;
},
"CLOSE": function () {
$(this).dialog("close");
return false;
}
}
});
});
function shwindow() {
if ($("#dialog-confirm").dialog("open"))
return true;
else
return false;
}
<asp:Button ID="aspbt" runat="server" OnClientClick="if(!shwindow()) return false;" OnClick="aspbt_Click" />
managed to postpone OnClick event by setting FALSE as a return value and calling postback:
"RUN SERVER PART": function () {
$(this).dialog("close");
__doPostBack($("[id$=aspbt]")[0].name, '');
return true;
}
I don't really like this solution so maybe someone has a better one...
try this:
<asp:Button ID="aspbt" runat="server" OnClientClick="return shwindow();" OnClick="aspbt_Click" />
function shwindow() {
if($("#dialog-confirm").dialog("isOpen")){
return true;
}
else{
return false;
}
}
Check dialog is visible or not by using 'isOpen'. Based on that return true or false.
Update:
if($(".ui-dialog").is(":visible")){
}
Demo:
http://jsfiddle.net/fprvt2pq/

Pop up Modal Dialog Box

Using this post I've been able to implement a dialog box that appears once the form is loaded. I would however like to change this so that the user clicks a button for the dialog to appear.
I've followed the guidance provided, and removed this line $("#divdeps").dialog('open'); from the Javascript function as instructed, and added it to the 'onclick' event of my button i.e.
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
so my code is now:
<div id="divdeps" style="display: none">This is my div</div>
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
<script>
$(document).ready(function(){
$("#divdeps").dialog({
autoOpen: false,
show: 'slide',
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
// $("#divdeps").dialog('open');
});
</script>
However, I can't get this to work on the 'onclick' event of the button. I've been through the instructions quite a few times now and I'm not sure where I'm going wrong.
I just wondered whether someone could perhaps take a look at this please and let me know what I'm doing wrong.
Many thanks and regards
I would do it with the click function of jQuery instead of that dom level 0 handler:
$("#divdeps + button").click(function() { $("#divdeps").dialog('open'); });
Or of course you can give this button an id and do
$("#buttonID").click(function() { $("#divdeps").dialog('open'); });
Either of those sections of code would go in your document.ready handler.
Per Virendra's comment, your original button tag was wrong—you were missing a closing tag, and have mismatched quotes:
<button value="Upload" onclick="$("#divdeps").dialog('open');"</button>
should have been
<button value="Upload" onclick="$('#divdeps').dialog('open');"> </button>
Instead of $("#divdeps").dialog('open'); that you commented out, try:
$("button#give_it_some_id").click(function(e) {
e.preventDefault();
$("#divdeps").dialog('open');
})
Use this code its working in my application.
PopUpWindow = function (titles, message, redirectURL) {
document.getElementById('window').innerHTML = message;
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
div tag
<div id="window" style="display: none;width:190px">
Let me know if you have any problem here.

Passing variables to jQuery UI dialog

I'm new to jQuery and having difficulty in passing a variable to a jQuery UI Dialog box. When clicking "Yes" the browser should redirect to localAuthorityDelete and remove the appropriate record.
<script type="text/javascript">
$(document).ready(function(){
$('#deleteButton').click(function(){
$('#deleteText').dialog({
modal:true,
resizable: false,
buttons: {
'Yes': function() {
window.location = "../php/localAuthorityDelete.php?laID="
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
});
});
});
</script>
I have many delete buttons:
<input type="button" id="deleteButton" name="deleteButton" value="Delete">
Each delete button is in a table next to the record which should be removed. I was doing this with:
Delete
But need to take advantage of jQuerys Dialog box. If someone could help me I would be very greatful. I have tried wrapping the above JS in a function which takes one variable but it does not run.
Thanks for your help.
Mike
Looks like you have multiple deleteButtons, however id for a html element should be unique.
So change the way you render the delete button to as follows:
<input type="button"
id="delete-<?php echo $row_laID['laID'];?>"
class="deleteButton"
name="deleteButton"
value="Delete"
/>
Now you can get the id of the element to be deleted from the id of the delete button.
And the click handler should be now bound to .deleteButton instead of #deleteButton.
<script type="text/javascript">
$(document).ready(function(){
$('.deleteButton').click(function(){
var id = this.id.replace(/[^0-9]/g, "");
$('#deleteText').dialog({
modal:true,
resizable: false,
buttons: {
'Yes': function() {
window.location = "../php/localAuthorityDelete.php?laID=" + id;
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
});
</script>

Categories

Resources