Searching on google, i deffinitly can't find a non-javascript way to show and hide my panel/updatepanel.
I do have panels and updatepanels, I want to show/hide them on the fly, after a button click, preferably without javascript, or if so, with jQuery.
All the examples I found consumes a lot of code and honestly I don't want to crap out my code just because of this.
Ideas?
It doesn't really take a lot of code with jQuery:
<input type="button" onclick="$('#blah').toggle();" />
<someelement id="blah"></someelement>
For ASP.NET (modified from your code):
<asp:Button ID="btnSubmit" runat="server" CssClass="button-login" OnClientClick="$('#login').toggle();" />
You could as well use the multi view and a couple of views inside. By doing this you can use a button control to choose which view (panel) is to be displayed. The code below will toggle between two views containing two image tags.
ASP.NET Form (HTML)
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<imgage = "my picture"> //add image tage here
</view>
<asp:View ID="View2" runat="server">
<imgage = "your picture"> //add image tage here
</view>
</asp: Multiview>
</div>
CODE BEHIND
Private button click toggleImageView
If multiview1.ActiveViewIndex=0 then
multiview1.ActiveViewIndex=1
ElseIf
multiview1.ActiveViewIndex=1 then
multiview1.ActiveViewIndex=0
EndIf
You may also use a list box to select which view to display on the fly like this
But note that your control o select which view to be displayed should be outside the multiview control and also be rendered on page load
<asp:DropDownList ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
runat="server" AutoPostBack="True">
<asp:ListItem Value="0">View 1</asp:ListItem>
<asp:ListItem Value="1">View 2</asp:ListItem>
</asp:DropDownList><br />
Related
I am using bootstrap tooltip that has black background and white letters on it. The entire tooltip and radiobutton is inside the update panel. when I click on the radio button and postback occurs, tool tip looses the black background and becomes white. I am not sure what am I doing wrong. I have several controls inside the update panel so I dont want to use seperate update panel for each control. Below is my code:
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="A Multi-Titled document is written in such a way that it performs multiple functions simultaneously. (e.g., Deed of Trust and Assignment of Rents; Substitution of Trustee and Reconveyance) ">
<img src="../Images/InfoOrange.png" width="26" />
</button>
<asp:RadioButton ID="rdbtest1" runat="server" Text="Test1" OnCheckedChanged="test100" AutoPostBack="true" />
<asp:RadioButton ID="rdbTest2" runat="server" Text="test2" OnCheckedChanged="test100" AutoPostBack="true" />
<asp:TextBox ID="txtTest1" runat="server" Visible="false"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
below is the image of the tooltip and radio button before postback:
any help will be highly apprecaited.
After each update on UpdatePanel you need to initialize again your JavaScript.
UpdatePanel gives the pageLoad() function that is called on each update - so you can use this for init, and re-init your javascript. So just change your code to this.
function pageLoad()
{
$('[data-toggle="tooltip"]').tooltip();
}
I have a webpage containing one ASP.NET file upload control and a button to upload the file to server. The existing code looks like below.
<div runat="server" style="width: 110%">
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>
But our client don't want to see the default look and feel of a standard file upload control. He wants us to add another button and wrap the file upload control with the button, so that whenever user clicks on the button, file upload dialog window opens.
Thanks
you cna do that using jquery you can set fileupload visiblity as none and can open fileuploader from button click like
<div runat="server" style="width: 110%">
<asp:FileUpload style="display:none" ID="fileUpload" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" onclick="$('#fileUpload').trigger('click'); return false;" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>
you need to reference of jquery for this.
In addition to #Kevin Shah's solution, I got it working this way:
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClientClick="$('#ContentPlaceHolder1_FileUpload1').trigger('click'); return false;" Text="Upload" />
My Webform is inside a MasterPage, so I had to look at "View source" while debugging in Chrome to get the correct element ID ContentPlaceHolder1_FileUpload1 instead of just FileUpload1
I have created Website. After I login When I hit enter key for add Product, my Website just kick me out.? I dont have problem with adding my cart with mouse click. Does Any One have same Issue or Any suggestion ..
You need to add your controls inside an ASP:Panel and make your AddProduct Button as Default Button:
<asp:Panel ID="panel1" runat="server" DefaultButton="btnAddProduct"">
//Your Other Stuff
<asp:Button ID="btnAddProduct" runat="server" onclick="btnAddProduct_Click"/>
</asp:Panel>
This will Fire AddProduct Button when you hit enter.
Regards
Here is another approach I found here - if you don't want to add a panel
<asp:Button ID="btnDisableEnter" runat="server" Text=""
OnClientClick="return false;" style="display: none;" />
<form id="form1" runat="server" DefaultButton="btnDisableEnter">
If you are using Master Page in asp.net C# and if you are using a button for logout, please type in Button:
<asp:Button ID="btn" runat="server" Text="logout"
UseSubmitBehavior="false" />
Use UseSubmitBehavior="false" in your master page. That's how my problem was solved.
I have an ajax panel (actually it' a Rad Ajax Panel - the behavior is similar to an Ajax Update Panel with everything in the ContentTemplate section and no Triggers), with an image button (asp:ImageButton) and a button (asp:Button).
I notice that they behave differently - the image button advances to postback (Page_Load and Button_Click server functions), when the button doesn't!
How can I achieve this behavior with the Button too? (Replacing the Button with an ImageButton solved the problem... Is there a way to maintain the Button and have the ImageButton's behavior?)
This is what my code looks like (two buttons, two click functions, and two client click functions):
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div style="width: 800px;">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function validateSave() {
// ...
return true;
}
function validateAdd() {
// ...
return true;
}
</script>
</telerik:RadScriptBlock>
<asp:Panel ID="Panel1" runat="server" Visible="false">
<fieldset>
<legend>New item</legend>
<%--..........--%>
<asp:ImageButton ID="Button4" runat="server"
ImageUrl="~/App_Themes/ThemeDefault/images/add.gif"
OnClientClick="return validateAdd();"
OnClick="Button4_Click" />
</fieldset>
<%--..........--%>
<asp:Button ID="Button2" runat="server"
OnClientClick="return validateSave();"
Text="Save" ToolTip="Save" OnClick="Button2_Click" />
</asp:Panel>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
</div>
UpdatePanels can often be problematic with Buttons. An easy thing that you can do is move the Button out of the UpdatePanel. After all, the more contents in your UpdatePanel, the slower the asynch postback will be.
I have some asp;View controls in asp:MultiView control. The strange problem is, when I move from View3 to View4, some controls from the View3 are visible within View4. Why ? It's the first time I occur that problem
<asp:View ID="View3" runat="server">
<br />
<label id="Label1">Test</label>
<br />
<asp:Button ID="RejectButtonGrid" runat="server" Text="Erase1" OnClick="RejectButton_Click" />
<asp:Button ID="AcceptButtonGrid" runat="server" Text="Accept" OnClick="AcceptButton_Click" />
</asp:View>
<asp:View ID="View4" runat="server">
<asp:Button ID="RejectButtonDuplicates" runat="server" Text="Erase2" OnCommand="RejectButtonDuplicates_Command"/>
<asp:Button ID="AcceptButtonDuplicates" runat="server" Text="Accept" OnCommand="AcceptButtonDuplicates_Command"/>
<br />
<asp:Button ID="BackButton" runat="server" Text="Go back" OnClick="BackButton_Click"/>
</asp:View>
Buttons from View3 are visible on View4
The markup seems to be ok, I presume views 1 and 2 are working fine? Looking at the code I would expect view 3 to show two buttons "Erase1" and "Accept", and then for view 4 it should show two buttons with "Erase 2" and "Accept"...?
Why are the buttons in view 4 using the 'OnCommand' attribute instead of 'OnClick' as they do for view 3?
Maybe the controls are cached...
try cleaning the folder 'C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET' Files and try again...