Just would like know how to pass textbox value to a modal popup after clicking a button using ModalPopUpExtender in ASP.NET, I've tried these codes but seems that I have no luck :(
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick", "showModalPopup(); return false;");
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick='showModalPopup(); return false;' />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" OkControlID="btnOkay" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader">
Header</div>
<div class="PopupBody">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
javascript
function showModalPopup() {
//show the ModalPopupExtender
var value;
value = document.getElementById("TextBox1").value;
$get("<%=Label1.ClientID %>").value = value;
$find("<%=ModalPopupExtender1.ClientID %>").show();
}
I wonder what I miss out :(, Thanks and I hope someone could help me :)
use
value = document.getElementById('<%=TextBox1.ClientID %>').value;
instead of
value = document.getElementById("TextBox1").value;
Related
I'm using a listview and ajax in an asp.net web form. In part of that form, I display comments, which readers can rate, either positive or negative.
This value isn't updated unless the page is refreshed, is there a way to update the value without the need of refreshing the page?
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" OnItemCommand="ListView1_ItemCommand">
<ItemTemplate>
<div class="row comm_info_bar ">
<div class="col-md-5 RightDisplay"><%# Eval("name") %></div>
<div class="col-md-5 comm_info_date"><%# Eval("date") %></div>
<asp:LinkButton ID="negBtn" class="glyphicon glyphicon-minus voteCommentIcon voteContNeg text-danger smallGlyph" runat="server" CommandName="negative" CommandArgument='<%#Eval("id")%>' />
<asp:Label ID="lblnegative" name="lblnegative" class=" voteNumNeg" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "negative") %>'></asp:Label>
<asp:LinkButton ID="posBtn" class="glyphicon glyphicon-plus voteCommentIcon voteContNeg text-success smallGlyph" runat="server" CommandName="positive" CommandArgument='<%#Eval("id")%>' />
<asp:Label ID="lblpositive" class="voteNumPos" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "positive") %>'></asp:Label>
</div>
<div class="row">
<div class="col-md-12 comments"><%# Eval("text") %></div>
</div>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
and in code:
static List<Int64> commentsUser = new List<long>();
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
string name = e.Item.DataItemIndex.ToString();
long commentId = Convert.ToInt64(e.CommandArgument);
ArticleCommentsDataClass ArticleComment = new ArticleCommentsDataClass();
if (e.CommandName == "positive")
{
if (!searchcomments(commentId))
{
ArticleComment.Comments_positive(commentId);
commentsUser.Add(commentId);
}
}
else
{
if (!searchcomments(commentId))
{
ArticleComment.Comments_negative(commentId);
commentsUser.Add(commentId);
}
}
}
Is there anyone who has an idea on how to do this?
This sounds like you are binding (reading the data of your grid) before executing the command. Since the command changes the data, you should rebind the grid or update it in any other way.
Check out this article that talks about when each event is raised
In asp.net webforms I have a UserControl with a code-behind file (shown below).
The UserControl has two <asp:Label> nodes in it that I am attempting to use as steps in a form.
The problem is that when I get to "Step2" and click Cancel, "Step1" does not re-display, despite the fact that I am setting its Visible property to true.
What am I doing wrong? Or is there a better way to do this?
UserControl
<%# Control Language="C#" AutoEventWireup="true"
CodeFile="MyUserControl.ascx.cs" Inherits="_MyUserControl" %>
<asp:Label runat="server" ID="lblStep1" Visible="true">
<fieldset>
<p>Some initial text here</p>
<asp:Button runat="server" CssClass="btn btn-primary" ID="cmdSubmit" Text="Submit" />
</fieldset>
</asp:Label>
<asp:Label runat="server" ID="lblStep2" Visible="false">
<p>Some text here</p>
<div>
<asp:Button runat="server" CssClass="btn btn-primary" ID="cmdRequest" Text="Send The Request" />
<asp:Button runat="server" CssClass="btn" ID="cmdCancel" Text="Cancel" />
</div>
</asp:Label>
Code-behind
public partial class _MyUserControl : UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
cmdCancel.Click += new EventHandler(cmdCancel_Click);
cmdSubmit.Click += new EventHandler(cmdSubmit_Click);
}
public void cmdSubmit_Click(object sender, EventArgs e)
{
lblStep1.Visible = false;
lblStep2.Visible = true;
}
public void cmdCancel_Click(object sender, EventArgs e)
{
// return to the previous step
lblStep1.Visible = true;
lblStep2.Visible = false;
}
}
you are not doing anything with those labels and that's a wrong idea to have buttons defined inside label control. Looks like you are trying to use label as container control. Rather use a <div> element/tag as container and try. It should work.
<div runat="server" ID="lblStep1" Visible="true">
<fieldset>
<p>Some initial text here</p>
<asp:Button runat="server" CssClass="btn btn-primary" ID="cmdSubmit" Text="Submit" />
</fieldset>
</div>
<div runat="server" ID="lblStep2" Visible="false">
<p>Some text here</p>
<div>
<asp:Button runat="server" CssClass="btn btn-primary" ID="cmdRequest" Text="Send The Request" />
<asp:Button runat="server" CssClass="btn" ID="cmdCancel" Text="Cancel" />
</div>
</div>
I have an AsyncFileUpload control that should show a panel and set some text when the upload completes successfully. When I debug it, the event fires and I see that the method is called correctly, but the form doesn't update.
Here's the markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="well well-large">
<form class="navbar-form pull-left">
<ajaxToolkit:AsyncFileUpload runat="server" class="search-query" ID="AsyncFileUpload" Width="400px"
UploadingBackColor="AppWorkspace" ThrobberID="myThrobber" CompleteBackColor="#068712" OnUploadedComplete="AsyncFileUpload_UploadedComplete" />
<br />
</form>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="panAlertUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="panAlert" Visible="false">
<div class="alert alert-success" id="divAlert" runat="server">
<button id="Button1" runat="server" type="button" class="close" data-dismiss="alert">×</button>
You shouldn't see this message!
</div>
<asp:Panel runat="server" ID="panMarquee" Visible="true">
<div id="Div1" runat="server" class="progress progress-success progress-striped">
<div id="ProgressBar" runat="server" class="bar" style="width: 100%"></div>
</div>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
And here's the server code:
protected void AsyncFileUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload.HasFile)
{
this.SetMessage(Message.Success);
}
else
{
this.SetMessage(Message.Fail);
}
}
#endregion
#region Miscellaneous
private enum Message { Success, Fail }
private void SetMessage(Message msg)
{
if (msg == Message.Success)
{
this.divAlert.InnerText = "Well done! The document appears to have uploaded successfully. Please wait...";
this.divAlert.Attributes.Add("class", "alert alert-success");
}
else
{
this.divAlert.InnerText = "Oh snap! Something broke. Please contact IT right away.";
this.divAlert.Attributes.Add("class", "alert alert-error");
}
this.panAlert.Visible = true;
this.panAlertUpdatePanel.Update();
}
It was working just fine when I was using a button as the trigger, but not when I changed it to just the AsyncFileUpload control.
Any ideas?
i need the users of my web system to do uploads ( up 4 ).
the upload itself its working , but i dont want all for box appering at start, so tried to hide the 2nd ,3rd and 4th upload boxes until the user need them .
here the aspx code part
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" Visible="false" /></div>
<div class="lin">
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
</fieldset>
and the code behind to show and hide the boxes
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload2.Visible == false)
{
FileUpload2.Visible = true;
}
else if (FileUpload3.Visible == false)
{
FileUpload3.Visible = true;
}
else if (FileUpload4.Visible == false)
{
FileUpload4.Visible = true;
}
}
protected void btnRem_Click(object sender, EventArgs e)
{
if (FileUpload4.Visible == true)
{
FileUpload4.Visible = false;
}
else if (FileUpload3.Visible == true)
{
FileUpload3.Visible = false;
}
else if (FileUpload2.Visible == true)
{
FileUpload2.Visible = false;
}
}
and when i click on Add File, the new box appear but the filepaths selected on the other boxes are cleared. Can i avoid this clear ?
*edit: i´m using net framework 4.0 .
The file get lost on postback. Alternatively, you can achieve that with JavaScript
<div id="div1">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div id="div2" style="display:none"> <!-- visibility:hidden -->
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div id="div3" style="display:none">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div id="div4" style="display:none">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
Then put each FileUpload control in each of the divs.
<input type="button" valud="Add" onclick="addControls()" />
Then use JavaScript to make them visible
function addControls()
{
document.getElementById('div2').style.display = 'inline-block';
//$('#div2').show(); <--- JQuery
}
The problem here is that uploading files works slightly differently to most input controls...
Rather than posting the file path value that is entered, it actually posts the file content so
on postback this value gets lost.
It seems to me like your best bet is to do something with javascript on the client to show/hide these upload controls. This would also be a better user experience as the user wouldn't have to wait for postback each time.
You could do this with jQuery...
http://jsfiddle.net/BAwfH/2/
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" class="add-button" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
<script type="text/javascript">
$(document).ready(function(){
var lines = $('.lin');
lines.hide();
lines.filter(':first').show();
$('.add-button').click(function(){
lines.filter(':hidden:first').show();
if(lines.filter(':hidden').length == 0)
$(this).hide();
});
});
I tried to make the visibility of a div through javascript.
<asp:LinkButton class="ProfilePageDetailLinks" ID="lbtnPersonal" runat="server" OnClientClick="VisibleTab('PersonalDetails')">Show Details</asp:LinkButton>
<div id="PersonalDetails">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</div>
function VisibleTab(str) {
if (document.getElementById(str).style.display == 'none') {
document.getElementById(str).style.display = 'block';
} else {
document.getElementById(str).style.display = 'none';
}
But after the postback, the div is hiding automatically.
Please check the code below... Its not working as expected.. How to make it works.. Thats my actual doubt...
<form id="form1" runat="server">
<div>
<div runat="server" id='G2'>
content</div>
<asp:Button ID="Button1" OnClientClick="javascript:document.getElementById('G2').style.visibility = 'visible';"
runat="server" Text="show" />
<asp:Button ID="Button2" OnClientClick="javascript:document.getElementById('G2').style.visibility = 'hidden';"
runat="server" Text="hide" />
</div>
</form>
You can add return false; to avoid your postback
OnClientClick="VisibleTab('PersonalDetails'); return false;"