I have the following ASP.net button inside my GridView:
<asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnCommand="btnShow_Command" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' />
The code-behind is:
protected void btnShow_Command(object sender, CommandEventArgs e)
{
int index = 0;
if (e.CommandName == "ViewAll")
{
index = Convert.ToInt32(e.CommandArgument);
DataTable cacheTable = HttpContext.Current.Cache["ResultsTable"] as DataTable;
string column = cacheTable.Rows[index].Field<string>("Guideline");
string test = BookingResults.Rows[index].Cells[7].Text;
string html = HttpUtility.HtmlDecode(column);
ResultsDiv.InnerHtml = html;
}
}
The ResultsDiv is shown in a popup using the JQuery:
//CONTROLLING EVENTS IN jQuery
$(document).ready(function () {
//Click the button event!
$(".btnSearch").click(function (e) {
alert($(this).val() + " Clicked");
e.preventDefault();
//centering with css
centerPopup();
//load popup
loadPopup();
});
});
When I navigate to the page, the generated HTML looks as follow (there are multiple rows with the same button in the column):
<input type="button" name="ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl224$btnShow" value="View All" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl224$btnShow", "", true, "", "", false, true))" id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl224_btnShow" class="btnSearch" />
What is happening now, is when I click the View All button it displays the alert, when I click OK, it displays the popup for a split second and refreshes the page.
How can I modify the code-behind/JQuery so that I can click on any of the button, and it will display the alert and show the popup every time and not do a postback?
I think the first thing you need to do even before alert is e.preventDefault();
//CONTROLLING EVENTS IN jQuery
$(document).ready(function () {
//Click the button event!
$(".btnSearch").click(function (e) {
e.preventDefault();
e.stopproPagation();
alert($(this).val() + " Clicked");
//centering with css
centerPopup();
//load popup
loadPopup();
});
});
As what i think that the alert lets the event do its default job first.
Related
I have ASP:Panel which is visible false initially , and have another radio button list having value yes or no
on click of yes my panel gets visible true ,
now my problem is when i click yes my panel is visible ,but in jquery i am not able to find conrol which is placed inside panel
Jquery
jQuery("[id$='p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_chkVndr']").change(function () {
debugger;
var chkval = jQuery('input[id*=chkVndr]:checked').val();
if (chkval == "Yes") {
alert(12346);
document.getElementById('<%= txtDtOfServ.ClientID %>').keypress(function (event) {
// jQuery("#p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_txtDtOfServ_dtPicker_txtDateTime").keypress(function (event) {
event.preventDefault();
});
}
else {
jQuery("#p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_txtDtOfServ_dtPicker_txtDateTime").keypress(function (event) {
event.preventDefault();
});
}
});
Control structure
<asp:Panel ID="Vendordtl" runat="server" Visible="false">
<my:myDateTimeControl ID="txtDtOfServ" runat="server" IsRequired="true" NeedsValidation="true" EditTime="false" DisplayNow="false" />
<asp:Pane/>
Because the DateTimeControl is a child of the panel you have to go through the panel first.
Try something like:
document.getElementById('<%= Vendordtl.FindControl("txtDtOfServ").ClientID %>')
I am trying to write simple jquery confirm dialog with two buttons: delete and cancel. When dialog was written with javascript, everything worked well. Now cancel button works but delete button does not delete anything and just cancels deletion. I want commandname to call cmddelete property which will delete row.
I am using this example: http://www.codeproject.com/Tips/616118/jQuery-confirmation-in-ASP-NET-GridView
Csharp code:
protected void RowCommand(object sender, GridViewCommandEventArgs e)
{
int rowIndex;
switch (e.CommandName)
{
case "CmdDelete":
rowIndex = (((LinkButton)e.CommandSource).Parent.Parent as GridViewRow).RowIndex;
DeleteItem(ViewData.List[rowIndex].ID);
Gridview:
<asp:LinkButton ID="btnDelete" runat="server" CommandName="CmdDelete"
Text="delete" OnClientClick="javascript:return deleteItem(this.name);" ></asp:LinkButton>
Javascript code:
function deleteItem(CmdDelete)) {
var dialogTitle = 'Message from the webpage';
$("#deleteConfirmationDialog").html('<p><span class="ui-icon " +
"ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" +
"Please click delete to confirm deletion.</p>');
$("#deleteConfirmationDialog").dialog({
title: dialogTitle,
buttons: {
"Delete": function () { __doPostBack(CmdDelete, '');
$(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
$('#deleteConfirmationDialog').dialog('open');
return false;
}
I've a gridview with some rows.
On each row I have an imagebutton on the right side of the grid that offer the possibility to delete a record.
Clicking on the imagebutton is show a dialog created with jQuery UI.
jQuery code is:
$("[name*='btn_check']").click(function() {
event.preventDefault();
$("#dialog-confirm").dialog({
autoOpen: true,
resizable: false,
height: 200,
modal: true,
buttons: {
"Accept": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
Code is quite simple and common for jQuery UI dialog.
So, now I wan to execute code when "Accept" button is clicked and I though __doPostBack could be a good solution.
So, I've created an hidden button in my gridview (near the imagebutton), then I've added this code to "Accept" function, as I found on another StackOverflow question:
__doPostBack('btn_hidden', '');
I've also tried to use this:
__doPostBack('<%= btn_hidden.UniqueID %>', '');
But without success.
So, which is the right way to execute a postback and how can I send the ID of the record to delete this record with code behind?
First of all you should have a correct CommandName and CommandArgument set on your ImageButton. Then call dialog from the OnClientClick. As I understood you have only one dialog element hidden somewhere so there should be no problems with ids:
<asp:ImageButton runat="server"
CommandName="Delete"
CommandArgument='<%# Eval("YourKeyFieldNameHere") %>'
OnCommand="ImageButton_Command"
OnClientClick="javascript:return showConfirmDialog(this.name)"
/>
function showConfirmDialog(uniqueId) {
$("#dialog-confirm").dialog({
autoOpen: true,
resizable: false,
height: 200,
modal: true,
buttons: {
"Accept": function() {
$(this).dialog("close");
__doPostBack(uniqueId, '');
},
Cancel: function() {
$(this).dialog("close");
}
}
});
return false; // this is to prevent default click handler to cause a postback
}
Codebehind:
protected void ImageButton_Command(object sender, CommandEventArgs e)
{
// e.CommandArgument will contain the record key and
// e.CommandName will be equal to "Delete" or whatever you'll set on aspx
}
I have a GridView which has these two controls:
<asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' OnClick="btnShow_Click" />
<asp:LinkButton runat="server" ID="btnShow2" CssClass="btnSearch2" Text="View Allst" CommandName="ViewAll" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' PostBackUrl="JavaScript:void(0);" OnClientClick="return false;" OnClick="btnShow_Click">View Alls</asp:LinkButton>
code-behind:
protected void btnShow_Click(object sender, EventArgs e)
{
System.Web.UI.WebControls.Button btn1 = (System.Web.UI.WebControls.Button)(sender);
string strCA = btn1.CommandArgument;
string strCN = btn1.CommandName;
int index = 0;
if (strCN == "ViewAll")
{
index = Convert.ToInt32(strCA);
DataTable cacheTable = HttpContext.Current.Cache["ResultsTable"] as DataTable;
string column = cacheTable.Rows[index].Field<string>("Guideline");
string test = BookingResults.Rows[index].Cells[7].Text;
string html = HttpUtility.HtmlDecode(column);
ResultsDiv.InnerHtml = html;
}
}
JQuery:
$(document).ready(function () {
//Click the button event!
$(".btnSearch").click(function (e) {
e.preventDefault();
alert($(this).val() + " Clicked");
//centering with css
centerPopup();
//load popup
loadPopup();
});
$(".btnSearch2").click(function (e) {
e.preventDefault();
alert($(this).val() + " Clicked");
//centering with css
centerPopup();
//load popup
loadPopup();
});
$("#popupContactClose").click(function () {
disablePopup();
});
$("#backgroundPopup").click(function () {
disablePopup();
});
//Press Escape event!
$(document).keypress(function (e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup() {
//loads popup only if it is disabled
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
alert(popupStatus);
}
//disabling popup with jQuery magic!
function disablePopup() {
//disables popup only if it is enabled
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
alert(popupStatus);
}
//centering popup
function centerPopup() {
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
HTML that displays the popup:
<div id="popupContact">
<a id="popupContactClose" title="Close Window">x</a>
<h3>Booking Guidelines</h3>
<asp:Panel ID="Panel1" runat="server" style="vertical-align:top" ScrollBars="Vertical" Height="300px" ForeColor="Black">
<div id="ResultsDiv" runat="server" style="vertical-align:top" > </div>
</asp:Panel>
</div>
<div id="backgroundPopup"></div>
The GridView generates multiple rows, where each row the button will have a different INDEX number to reference the session table being used to populate ResultsDiv.InnerHtml = html;.
When I click on btnShow Button it displays the alert and shows the popup with the updated ResultsDiv.InnerHtml = html; by using the code-behind for a split second and does a postback and reloads the page.
When I click 'btnShow2' LinkButton it displays the alert and shows the popup and does not do a postback. The only issue I am having is, it doesn't access the code-behind to update ResultsDiv.InnerHtml = html; so it is always displaying the same result no matter what row the button is clicked.
How do I modify my code so that it updates the ResultsDiv.InnerHtml = html; and displays the popup every time the button is clicked on any of the row and does NOT do a postback?
If You Remove Both
OnClientClick="return false;" and
PostBackUrl="JavaScript:void(0);" then definitely it will postback.
You can observe your HTML generated/rendered if you set both attributes with Postback event
WebForm_DoPostBackWithOptions which should be something like
javascript:__doPostBack('BookingResults$ctl02$btnShow2','')
View Alls
You have OnClientClick="return false;". That cancels the postback. To fix it, remove that attribute from your LinkButton declaration.
Also, not sure what PostBackUrl="JavaScript:void(0);" does. I've never seen someone to do that. You might try eliminating that if it's not necessary.
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})