I am handling a div click event with jquery- on div click, call asp.net button by ID.
$('#myDiv').on('click', (function(clickEvent) {
document.getElementById("Button1").click();
}))
Here is the ASP button markup:
<asp:Button ID="Button1" runat="server" OnClick="my_ClickEvent" Text="Button" CssClass="hide" />
Here is the code behind:
protected void my_ClickEvent(object sender, EventArgs e)
{
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "Some Name";
SqlDataSource1.Update();
Response.Redirect(Request.Url.AbsoluteUri);
}
Here is the div markup:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:Timer ID="Timer1" runat="server" Interval="200000" OnTick="Timer1_Tick" Enabled="True" />
<div class="square" id="myDiv" runat="server">
<div class="content">
<div>
<p id="ImUnavailable">Unavailable for Dispatch</p>
<div class="table">
<div class="table-cell">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">
<Fields>
<asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="building">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="PhysicalAddress" HeaderText="PhysicalAddress" ShowHeader="False" ReadOnly="True" SortExpression="PhysicalAddress" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
</Fields>
<RowStyle HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
As you can see I have the DetailsView wrapped in an updatepanel, which updates on a Timer interval trigger. When the timer reaches it's interval, the updatepanelwill post back to the database and the DetailsView is kept up to date. This happens in the ajaxupdatepanel, so the page itself is not refreshed.
I am unsure how to achieve this with my div click. I am trying to click the div, call the ASP button, update the SqlDataSource, all without refreshing the entire page. The div click event works now, but it is not using ajax. I am becoming a bit confused when researching solutions for this like I am missing something simple.
Any advice appreciated. Thank you!
EDIT
So, I created a separate UpdatePanel and structured it like so... it still refreshes the whole page when I click Button1...
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel7" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ...
</asp:SqlDataSource>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="my_Click" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="you_Click" />
</ContentTemplate>
</asp:UpdatePanel>
All I am trying to do is update a column in a SQL table when I click Button1. It works, but refreshes the page.
Thanks again
I looked at my event output posted above and answered my own question.
I changed my code-behind to:
protected void my_Click(object sender, EventArgs e) {SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";SqlDataSource1.Update();}
...and of course I am no longer called the Response.Redirect. It is working as expected now.
Thank you!
Related
I have an asp.net page with a gridview in an updatepanel:
<asp:UpdatePanel ID="upGrid" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvBatchGroups" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gvBatchGroups" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat" OnRowDataBound="gvBatchGroups_RowDataBound">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="GroupID" HeaderText="Group ID" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupCode" HeaderText="Group Code" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupName" HeaderText="Group Name" />
<asp:BoundField DataField="GroupType" HeaderText="Group Type" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="IsBatchSelected" HeaderText="Batch Selected" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Properties</HeaderTemplate>
</asp:TemplateField>
<asp:templatefield ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>Select
<input id="cbHeaderSelect" type="checkbox" onclick="CheckAll(this)" runat="server" />
</HeaderTemplate>
<itemtemplate><asp:checkbox ID="cbSelect" runat="server"></asp:checkbox></itemtemplate>
</asp:templatefield>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
Column 8 has a checkbox that calls the following Javascript function to select all the checkboxes in the grid:
function CheckAll(oCheckbox) {
var Gridview = document.getElementById("<%=gvBatchGroups.ClientID%>");
for (i = 1; i < Gridview.rows.length; i++) {
Gridview.rows[i].cells[7].getElementsByTagName("INPUT")[0].checked =
oCheckbox.checked;
} }
However, when I click on the Column header, the Javascript function errors displaying the following:
Unable to get property 'rows' of undefined or null reference
This line appears under:
for (i = 1; i < Gridview.rows.length; i++)
Could the updatepanel be preventing the Javascript from "seeing" the gridview?
Any help would be most appreciated!
I have an issue with my ajax gridview, I want to get values from label inside my ajax but it's returning null. below is my gridview:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="myModal" class="modal" style="display: none">
<!-- Modal content -->
<div class="modal-content">
<span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
<br />
<div class="modal-body">
<AjaxData:GridView id="grdvPriorApproval" runat="server" RowCommandEvent="extractFunction">
<Columns>
<AjaxData:GridViewTemplateColumn HeaderText="ClaimhId" SortField="ClaimhId" Visible="False" >
<EditItemTemplate>
<asp:TextBox ID="txtClaimhID" runat="server" Text='<%# Bind("ClaimhId") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate >
<asp:Label ClientIDMode="Static" ID="lblClaimhID" runat="server" Text='<%# Bind("ClaimhId") %>'></asp:Label>
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewTemplateColumn HeaderText="ApprovalTypeId" SortField="ClaimhId" Visible="False" >
<EditItemTemplate>
<asp:TextBox ID="txtApprovalTypeId" runat="server" Text='<%# Bind("ApprovaltypeID") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate >
<asp:Label ClientIDMode="Static" ID="lblApprovalTypeId" runat="server" Text='<%# Bind("ApprovaltypeID") %>'></asp:Label>
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewBoundColumn ReadOnly="true" HeaderText="Reference" DataField="Reference" SortField="Reference" HeaderStyle-HorizontalAlign="Left" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
<HeaderStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn ReadOnly="true" HeaderText="Patient #" DataField="MemberId" SortField="MemberId" HeaderStyle-HorizontalAlign="Left" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
<HeaderStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn ReadOnly="true" HeaderText="Patient Name" DataField="MemberName" SortField="MemberName" HeaderStyle-HorizontalAlign="Left" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
<HeaderStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn ReadOnly="true" HeaderText="Remarks" DataField="Remark" SortField="Remark" HeaderStyle-HorizontalAlign="Left" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
<HeaderStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn ReadOnly="true" HeaderText="Valid Untill" DataField="ValidUntill" SortField="ValidUntill" HeaderStyle-HorizontalAlign="Left" >
<ItemStyle HorizontalAlign="Left" Width="100px" />
<HeaderStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewCommandColumn ControlStyle-Font-Bold="true" ControlStyle-ForeColor="#f2fae5"
ControlStyle-BackColor="#6c9815" ButtonType="Button" SelectText="Extract" ShowSelectButton="True">
</AjaxData:GridViewCommandColumn>
<%--<AjaxData:GridViewButtonColumn CommandName ="extract" ControlStyle-Font-Bold="true" ControlStyle-ForeColor ="black" Text="Extract" Visible="true" >
</AjaxData:GridViewButtonColumn>--%>
</Columns>
</AjaxData:GridView>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And this is my javascript function:
function extractFunction(sender,e) {
var index = e.get_row().get_rowIndex();
var gridView = $find('<%= grdvPriorApproval.ClientID %>');
var row = gridView._rows[index].findControl('lblClaimhID').value;
__doPostBack('CustomPostBack', row);
}
Index value is 0 and row value is null.
1- I tried to change RowCommandEvent to SelectedIndexChangedEvent but that will create an issue on finding index (it will return an error).
2- In postback event I tried to get the selected row and values in this way:
CType(Me.grdvPriorApproval.SelectedRow.FindControl("lblApprovalTypeId"), Label).Text
but I got an error under selectedRow
Any help with my first Ajaxdata gridview is appreciated
How can I get a view of all the fields in a new asp page when clicking on the Button "Select" in Gridview in a webform asp page. I think I have to create a function which will be called on "OnClientClick". Here's my code. How could I perform this task? thank you very much in advance, best regards
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="ObjectDataSource1" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="EditButton" runat="server" CausesValidation="False"
CommandName="Edit" Text="Edit"></asp:LinkButton>
<asp:LinkButton ID="SelectButton" runat="server" OnClientClick="" CausesValidation="False"
CommandName="Select" Text="Select"></asp:LinkButton>
<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
For button click event try:
<asp:gridview id="NewGridView"
datasourceid="NewSqlDataSource"
autogeneratecolumns="false"
onrowcommand="NewGridView_RowCommand"
runat="server">
<columns>
<asp:buttonfield buttontype="Button"
commandname="Select"
headertext="Select People"
text="Select"/>
</columns>
</asp:gridview>
void NewGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
{
if(e.CommandName=="Select")
{
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow selectedRow = NewGridView.Rows[index];
}
}
Or check link,
https://msdn.microsoft.com/en-us/library/bb907626.aspx
I have asp page with update progress control. I want to rebind grid view every 5 sec. so i am using timer control. but my problem is update progress bar showing every timer click event. how to resolve this.Please help me.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<asp:Panel ID="Panel2" CssClass="loader" runat="server">
<img src="../../images/bx_loader.gif" alt="" />
</asp:Panel>
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger EventName="SelectedIndexChanged ControlID="gvMessages" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" ></asp:Timer>
<asp:GridView ID="gvMessages" Width="100%" CssClass="mail-block" runat="server">
</asp:GridView>
<asp:TextBox ID="txtWorkFlow" runat="server" > </asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<input type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
<form id="form2" runat="server">
<div style="height: 897px">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="Button1" runat="server" Text="Update" Width="122px" />
<br />
<br />
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST<br />
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST<br />
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST<br />
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST<br />
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" Height="147px" Width="694px">
<RowStyle BackColor="#E3EAEB" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="33px" Width="179px">fsafasfa</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
I am using tigra calender in an asp.net page, but the datepicker will not show up. The img folder path is the same and i even placed it in my apdata. I took the code straight from the sample page, and I have even used tigra calender before, but not with asp.net any ideas. Is there another calender tool i should be using?
I've never used this product before, but it doesn't appear that the script references the correct control or form id.
We use a paid suite, but that code you posted sure looks wrong to me. Is that the whole thing? The script tag has no end tag, you can't start javascript statements with a "new" keyword, the input isn't marked runat=server and neither is the form...
I am adding a javascript CalendarExtender to a page,When I click the calendar button to trigger the calendar popup, the calendar displays normally. However, when I scroll down and click the button again, the calendar's position is display on top