I have implemented my owm functionality for the cancel button(I'm using javascript for that) of the ModalPopUpExtender instead of writing "cancelcontrolid" property for the ModalPopUpExtender.
It is working fine but there is one issue with that this cancel button is behaving as if it is doing postback.
It is necessary to have this functionality because when i'm writing the "cancelcontrolid" property it is not resetting the ModalPopUpExtender with the default values.
Please help..
Since you're using the button to only execute client side code why are you using <asp:Button you should use simple HTML<input type="button" instead:
<form id="form1" runat="server">
<asp:Button ID="btnShow" runat="server" Text="Show" />
<asp:ToolkitScriptManager ID="scripManager" runat="server" />
<asp:ModalPopupExtender ID="modal" BackgroundCssClass="modalStyle" PopupControlID="popup"
TargetControlID="btnShow" runat="server" BehaviorID="modalBehavior" />
<asp:Panel runat="server" ID="popup" CssClass="panelStyle">
<input type="button" id="btnCancel" onclick="Hide()" value="Cancel" />
</asp:Panel>
</form>
<script type="text/javascript">
function Hide() {
$find("modalBehavior").hide();
}
</script>
Try this......
<asp:button runat="server".... OnClientClick="myfunction(); return false;" />
Related
I'm in a bit of a conundrum here.
I have a FileUpload inside an UpdatePanel. As FileUpload cannot use an ASnycPostBackTrigger it must make use of a PostBackTrigger kind of defeating the purpose of AJAX (this is a security implementation I assume). Currently when my file upload begins, I show the user a loading gif and when the page posts back it hides the animation.
This works great for all browsers except Safari. Safari freezes all animations during full postback/redirects to save resources (meaning my gif will display but not animate). I am stuck as I am unsure how to render the loading animation as FileUpload cannot use partial postback behavior.
Anyone have any ideas on how to render animations during file transfer in Safari?
UPDATE PANEL
<asp:UpdatePanel runat="server" ID="updatePanel">
<ContentTemplate>
<div class="wrapper">
<asp:Panel runat="server" ID="masterPanel">
<asp:FileUpload ID="fileUpload1" runat="server" AllowMultiple="true" />
<asp:Button ID="btnUpload" Text="Submit" runat="server" UseSubmitBehavior="false"
OnClientClick="return submitFiles()" />
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
PROGRESS PANEL (HOLDS LOADING ANIMATION
<asp:UpdateProgress ID="loadingProgess" AssociatedUpdatePanelID="updatePanel" runat="server">
<ProgressTemplate>
<asp:Panel runat="server" id="loading" >
<div>
<asp:Image src="loader.gif" runat="server" ID="loadingImage" />
</div>
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
SCRIPTS
<script type="text/javascript">
function UploadFile(fileUpload) {
if (fileUpload.value != '') {
//Display animation
document.getElementById('<% Response.Write(loadingProgess.ClientID); %>').style.display = "inline";
//Posts files
submitFiles();
}
}
</script>
Have you tried a CSS animation instead of GIF?
Check this.
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.