I am using a Javascript package that makes a popup of inline html: http://www.enthropia.com/labs/ibox/
The following works correctly:
Click to Open
However, I want to be able to open the link as above by clicking a asp.net server control button:
<asp:Button ID="searchButton" runat="server" Text="Search Stories" OnClick="searchButton_Click" />
How do I acomplish this? I tried:
<asp:Button ID="searchButton" runat="server" Text="Search Stories" OnClick="searchButton_Click" />
and it works, but it breaks the OnClick C# ability. Also, I found out this is incorrect. So how do I do it correctly?
You want this to occur in the browser, not serverside, so you will not be able to use the .net OnClick.
You'll need to set the asp.net button's JS onclick behavior, and issue a click event on the link when it triggers.
With your existing code, i would do something like this:
ASPX page:
<a id="linkId" href="#inner_content" rel="ibox&width=800&height=400" title="Search Non Scrum Stories">Click to Open</a>
<div id="buttonContainer">
<asp:Button ID="searchButton" runat="server" Text="Search Stories" />
</div>
<script>
var link = document.getElementById("linkId");
var button = document.getElementById("buttonContainer").children[0];
button.onclick = function(){link.click();}
</script>
Here is a working example of the js: http://jsfiddle.net/MaxPRafferty/f8jqP/
Related
I have a dnn site, which has a label and an imagebutton, clicking on which replaces the label with textbox and user can enter their text, once submitted the label will be updated with this text. Now clicking on the imagebutton causes the page to postback, i don't want a postback for this, hence i have placed telerik RadAjaxLoadingPanel control, so the cool loading div gets displayed while processing is going on, but for some reason it's not working, It always throws below error:
Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.
Below is the markup of my page: (I tried the wrapping the code with RadScriptBlock and RadCodeBlock, in both case it throws same error as above)
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<a class="subscribetoday" href="#">
<strong>Subscribe Today!</strong> <asp:Label ID="lblsubscribemsg" runat="server" Text="12 issues for $14.95"></asp:Label>
<asp:ImageButton ID="imgEditSubscribe" runat="server"
OnClick="imgEditSubscribe_Click" ToolTip='Edit' ImageUrl="~/images/edit.gif" AlternateText='Edit' Visible="false" />
<div id="editsubscribe" runat="server" visible="false">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox> <asp:ImageButton ID="imgSave" runat="server"
OnClick="imgSave_Click" OnClientClick="return validateSubscribeNote();" ToolTip='Save' ImageUrl="~/images/save.gif" AlternateText='Save' /> <asp:ImageButton ID="imgCancel" runat="server"
OnClick="imgCancel_Click" ToolTip='Cancel' ImageUrl="~/images/cancel.gif" AlternateText='Cancel' />
</div>
<img src="img/prosound-subscribe.png" alt="Subscribe Today!">
</a>
</telerik:RadScriptBlock>
</telerik:RadAjaxPanel>
Can anyone tell me where i am going wrong with this.
The problem is with other server code blocks on the page (<%=%> for example, generally - <% ... %>), not with this concrete piece of code you are trying to AJAX-enable. You can read more here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock
So, you should find the place where those code blocks are used and wrap THEM in a RadCodeBlock controls. It is often scripts that reference controls, e.g.:
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script>
function getReference() {
return $find("<%=someControl.ClientID%>");
}
</script>
</telerik:RadCodeBlock>
With DNN, however, I cannot say where these may originate.
Thus, your other option is to use an <asp:UpdatePanel> control to get AJAX requests instead of full postbacks. The native AJAX toolset also offers the <asp:UpdateProgress> control that you can use instead of RadAjaxPanel.
I have been trying to get a Modal Popup to work for the last few months. I try and try, and after a while I just give up and find another way to work around it. I am very new to programming and have been doing some helpful things for my department, but in order to make these things viable alternatives I need to get more functionality out of them.
I want to be able to update a row in my SQL server, but the gridview is pulling data from a View, so the built in edit options won't work for me. I was hoping to be able to have a Modal Popup appear on the screen so that I can have the user put the data in and it will build the proper SQL statement to update the row.
I can't even get a Modal Popup with a single line of text to 'popup' though.
At the top of the page I have this:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then in my main div I have this:
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat=server"></cc1:ToolkitScriptManager>
Then down in the body I have this:
<asp:Button ID="btnTest" runat="server" Text="Test" />
<cc1:ModalPopExtender ID="mp1" runat="server" PopupcontrolID='pnlEdit" TargetControlID=btnTest" OkControlID="btnSubmit" CancelControlID="btnClose" BackroundCssClass="modalBackground" ></cc1:ModalPopupExtender>
<asp:Panel ID="pnlEdit" runat="server" style="display:none">
<div class="modalPopup>
<p>Text goes here.</p>
<asp:Button ID="btnSubmit" runat="sever" Text="Submit" />
<asp:Button ID="btnClose" runat="sever" Text="Close" />
</div>
</asp:Panel>
Code Behind currently has nothing for this. I have tried the same code with the variation of giving the btnTest an OnClick that does mp1.Show();. And also tried adding a "dummy" TargetControlID that is rendered but not shown in order to use the Code Behind to fire.
Every variation produces the same results. The "Test" button is clicked and then nothing happens. It appears that the page is reloaded. What am I missing here?
Please take a look at this Solution
I have looked at other questions and answers and still cant seem to solve my issue.
I am using jQuery UI tabs with 3 tabs: Basic Info, Payment, Confirmation
What I want to do is pass the values on the basic information tab textbox's, and payment tab into a label that is on the confirmation tab
ASPX:
<ul>
<li>Basic Information</li>
<li>Payment Information</li>
<li>Confirmation</li>
</ul>
<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>
</div>
Script in head:
$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});
The next tab function works fine, and the values retain in the textbox when the next tab is selected, however it wont pass to the label on the 3rd tab.
I think the problem is asp.net rename your server controls if the page has a master page.
add the attribute: ClientIDMode="Static" to your asp controls.
As you are using the ASP.NET controls, the ID will get changed while rendered. Use the jQuery Ends With selector for selecting the elements.
Use jQuery text method for ASP.NET Labels (i.e. html span), and jQuery val method for ASP.NET Toolboxes (i.e. html input).
Also, as the button is ASP.NET button, it gets post back every time you clickit, so use return false; at the end of button click method.
You have a AutoPostBack="true" for textbox, which might also create problem by resetting the label text while post back.
Below code will work if AutoPostBack="true" is removed from textbox.
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
$("input[id$=btnContinue]").click(function () {
$("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
return false;
});
});
I have an ajax extender in my aspx page.
I want to make the button do something in code behind when is pushed but my button inside the panel doesn't work.I created another button outside the panel and wrote the same thing to do and is working.
This is my button inside the panel:
<ajax:AccordionPane ID="AccordionPane1" runat="server">
<Header>Adauga titlu</Header>
<Content>
<asp:Panel ID="UserReg" runat="server" DefaultButton="but">
<cc1:Editor ID="Editor1" runat="server" width="500px"/>
<br /><br />
<asp:Button runat="server" ID="but" Text="Adauga Titlu" />
</asp:Panel>
</Content>
</ajax:AccordionPane>
This button is not working but the other button outside is working and they both do the same thing.Can you provide a solution?
Perhaps you are simply missing the OnClick attribute, like this:
<asp:Button runat="server" ID="but" Text="Adauga Titlu" OnClick="but_Click" />
Have you included the Asp ScriptManager?
http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx
I am trying to bypass the ConfirmButtonExtender depending on the value of another field in the page.
Basically, when a user click on my "Cancel" button, I normally display a modalpopup using the confirmbuttonextender and the modalpopupextender to display a dialog box confirming that they wish to cancel any changes they have made and return to the prior screen. If they click Yes, the button's onclick event fires which calls some code in the codebehind and redirects the user to another page. If they click no, it just returns to the same page, with no changes.
However, in some situations, I know that my user is unable to perform any edits (they aren't allowed to) and for those users, I don't want to display the "Are you sure you want to leave you will loose any changes" dialog box.
I've set a hidden checkbox field named "cbAllowEdit" to indicate whether the user is allowed to edit the fields or not.
I was trying to use the technique found at link text to get this working but it just doesn't even seem to be firing the button's onclientclick event at all.
Here is my code.
ASPX & Javascript
<asp:CheckBox ID="cbAllowEdit" runat="server" Checked="true" />
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="btnCancel" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="btnCancel" />
<asp:Panel ID="ConfirmCancelPanel" runat="server" CssClass="modalWindow"
Height="200" Width="450">
<p class="confirmMessage">
Are you sure you want to navigate away from this record?
</p>
<div align="center">
<p class="feedbackError">If you have made any changes to the record since the last time
you saved, they will be lost.</p>
<asp:Button ID="btnConfirmCancel" runat="server" Text="Yes" Width="75" />
<asp:Button ID="btnCancelCancel" runat="server" Text="No" Width="75" />
</div>
</asp:Panel>
<script type="text/javascript">
function disableSubmit() {
if (document.getElementById('<%= cbAllowEdit.ClientID %>').checked) {
return checkSubmit();
}
else {
return true;
}
}
function checkSubmit() {
var confirmButton = $find('ConfirmButtonExtenderbtnCancel');
confirmButton._displayConfirmDialog();
}
</script>
Code behind:
/// <summary>
/// Runs when the btnCancel button is clicked.
/// </summary>
protected void btnCancel_Click(object sender, EventArgs e)
{
Page.Response.Redirect("~/Searches/LookupCode/Default.aspx");
}
any ideas on what I am doing wrong?
As Chris said, you don't have to have a ConfirmButtonExtender and ModalPopupExtender (although this looks like a way round the fact that the JavaScript confirm() function is limited to OK and Cancel buttons in its' dialog - noted as a technique for the future :-) )
If you know in your code-behind that the user isn't going to be doing any editing (as evidenced by your cbAllowEdit control), then you should be able to just disable the ConfirmButtonExtender:
ConfirmButtonExtenderbtnCancel.Enabled = false;
Then clicking the Cancel button should take you into your code-behind function without confirmation at all.
EDIT: The ConfirmPopupExtender shouldn't be pointing to the btnCancel. Instead, it should be pointing to a hidden button (this is what the example in the link does).
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<!-- This is the Hidden Buttons that you need to add and reference in the ConfirmButtonExtender -->
<asp:Button ID="HiddenButtonConfirm" runat="server" Text="" style="display:none;" />
<asp:Button ID="HiddenButtonModal" runat="server" Text="" style="display:none;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="HiddenButtonConfirm" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<!-- You'll also want the ModalPopup to point to a seperate hidden button. -->
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="HiddenButtonModal" />
This javascript might work:
var confirmbtn = $find('ConfirmButtonExtenderID');
confirmbtn.enabled =false;
//ConfirmButtonExtenderID needs to be the name of your ConfirmButtonExtender ID [:$]