I have code below. I want to hide the update panel by using Javascript (without going to server) when the user clicks Hide button. Although javascript funciton seems to be working fine in debugging, it does not hide!
<script type="text/javascript" language="javascript">
function Show() {
document.getElementById("UpdatePanel1").Visible = true;
}
function Hide() {
document.getElementById("UpdatePanel1").Visible = false;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show" OnClientClick="Show(); return false;" />
<asp:Button ID="BtnHide" runat="server" Text="Hide" OnClientClick="Hide(); return false;" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Gönder"
onclick="btnSubmit_Click" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
you need to use the UpdatePanel1's client id so
document.getElementById('<%=UpdatePanel1.ClientID%>');
Related
I have gridView were if the user clicks on a button I want to give its informations to popup.
Here is the javascript to open and close the popup
<script type="text/javascript">
function ShowModalPopup() {
$find("mpe").show();
return false;
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
Here is were my button is
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" ToolTip="Shopping" Width="20px" Height="20px" OnClick="makePurchaseOrder" />
</ItemTemplate>
</asp:TemplateField>
here is what happens when I call the button
protected void makePurchaseOrder(object sender, EventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
int rowindex = gvr.RowIndex;
var idrow = (Control)sender;
GridViewRow row = (GridViewRow)idrow.NamingContainer;
componenteID = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[0]);
proveedor_id = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[2]);
Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup();", false);
}
This is what my modual popup looks like
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" style="display: none">
<div >
<div class="modal-content">
<asp:Button ID="btnHide" runat="server" OnClientClick="return HideModalPopup()" />
<a class="close" href="#" >×</a>
<h2>Here i am</h2>
<div class="content">
<asp:Label ID="Label17" runat="server" Text="Comprar" CssClass="second-menu-title"></asp:Label>
<br/>
<b><asp:Label ID="Label18" runat="server" Text="Proveedor: "></asp:Label></b>
<asp:Label ID="Label19" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label20" runat="server" Text="Tipo: "></asp:Label></b>
<asp:Label ID="Label21" runat="server" Text=""></asp:Label>
<asp:Label ID="Label22" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label23" runat="server" Text="Cantidad pedida: "></asp:Label></b>
<asp:TextBox width="50px" ID="TextBox2" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
</div>
</div>
</div>
</asp:Panel>
The probelm is the modual popup does not appear on the button click. I am unsure why. Any help would be verry appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
function HideModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClick="Unnamed_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Panel ID="pnlPopup" runat="server" style="display:none;">
<asp:ImageButton ID="btnTest" ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClientClick="HideModalPopup(); return false;" />
<p>Content Goes here</p>
</asp:Panel>
</div>
</form>
</body>
</html>
public partial class _testPWforSO : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
int rowcount = 0;
Collection<Product> products = InternalProduct.FindAll(0, 10, ref rowcount);
gvTest.DataSource = products;
gvTest.DataBind();
}
}
protected void Unnamed_Click(object sender, ImageClickEventArgs e)
{
// code to find out which one was clicked
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup()", true);
}
}
hope you all are fine
i am new on asp.net i am facing a problem when i input the data in textbox and the result related to that textbox can not showing in gridview popup.
here is my code below
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#Button1").live("click", function () {
$("#popup").dialog({
title: "Displaying GridView Data",
width: 600,
buttons: {
// if you want close button use below code
// Close: function () {
// $(this).dialog('close');
// }
}
});
return false;
});
</script>
<div id="popup" style ="display:none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="OpprId" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="CardCode" HeaderText="CardCode"
SortExpression="CardCode" />
<asp:BoundField DataField="OpprId" HeaderText="OpprId" ReadOnly="True"
SortExpression="OpprId" />
<asp:BoundField DataField="SlpCode" HeaderText="SlpCode"
SortExpression="SlpCode" />
<asp:BoundField DataField="PredDate" HeaderText="PredDate"
SortExpression="PredDate" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDataBaseConnectionString %>"
SelectCommand="SELECT [CardCode], [OpprId], [SlpCode], [PredDate] FROM [OOPR] WHERE ([CardCode] = #CardCode)">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="CardCode" PropertyName="Text"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</form>
</body>
Kindly help, your help will be highly appreciated
Thanks
Your code is kind of incomplete. I don't see the textbox1 control. Also You have gridview in a div which has "style=display:none";
Please share your complete code or enough code so someone can understand and help you out.
UPDATE
Add
$( "#popup" ).dialog({ autoOpen: false });
before the code
$("#Button1").live("click", function ()
Also remove the style on #popup div.
More details are here https://api.jqueryui.com/dialog/#entry-examples
Hope it should work.
I have mentioned my code below, the problem is I am unable to clear textbox. Kindly see my javascript code for textbox clearing and piont out the error?
<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=txtname.ClientID %>").innerHTML =txtname.Text='';
}
</script>
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server">
</asp:UpdatePanel>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm" onclick="btnConfirm_Click" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID ="btnConfirm"
ConfirmText ="Are you sure you want to click this?" OnClientCancel ="CancelClick"
ConfirmOnFormSubmit="false" runat="server">
</asp:ConfirmButtonExtender>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
With jQuery (as you asked for)
<script type="text/javascript">
function CancelClick() {
$("#<%=txtname.ClientID %>").val("");
}
</script>
You need to set the value not the innerHtml:
document.getElementById("<%=txtname.ClientID %>").value = '';
<script type="text/javascript">
function CancelClick() {
var textBoxId = '<%= #txtname.ClientID %>';
$(textBoxId).val('');
}
</script>
i have the following code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
document.body.onload = function RefreshPanelEveryMinuteLoop() {
if (document.getElementById('<%=drptime.ClientID %>').value > 0) {
__doPostBack('UpdatePanel1', '');
//var SelectedValue = ddlRefreshGrid.options[ddlRefreshGrid.selectedIndex()].value;
setTimeout(RefreshPanelEveryMinuteLoop, document.getElementById('<%=drptime.ClientID %>').value);
}
}
</script>
<div class="dropbox">
<asp:DropDownList ID="drptime" runat="server">
<asp:ListItem Value="60000" Text="1 Minute" Selected="True"></asp:ListItem>
<asp:ListItem Value="180000" Text="3 Minute"></asp:ListItem>
<asp:ListItem Value="0" Text="Don't Refresh"></asp:ListItem>
</asp:DropDownList>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Repeater ID="gvd" runat="server" OnItemCommand="gvd_ItemCommand" OnItemDataBound="gvd_ItemDataBound">
<HeaderTemplate>
</headertemplate>
<ItemTemplate>
....
....//lines of code
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
now when i call that JavaScript function on windows load then it will continue refresh the page
in that javascript i have give the settimeout method but it is not working...
it is continuously do _dopostback but i want to do _dopostback after some minute which i have defined in
so how can i perform this ?
I have created a design using asp .net. On clicking the submit button a validator message will come but style is changed. I have seen that "required" keyword is used for showing validator message in php and it won't change any style. Is it possible to use such a validator in asp .net?
I have tried:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name"></asp:RequiredFieldValidator>
But I need to show the error message as pop up.
You need to
Set ShowMessageBox="true" in your ValidationSummary control;
Set Display="none" in your RequiredFieldValidator control;
Example:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name" Display="none" />
<asp:ValidationSummary ID="MyValidationSummary" runat="server"
ShowMessageBox="true"
ShowSummary="false" />
Based on your question, I believe you are looking for a validation example in ASP.net.
Please see the simple example I have for you below:
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="None" ControlToValidate="txtName"
runat="server" ErrorMessage="Name is required."></asp:RequiredFieldValidator>
<br />
Email:
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="None" ControlToValidate="txtEmail"
runat="server" ErrorMessage="Email is required."></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</form>
</body>