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
Related
why button of text editor for AjaxControlToolkit not working with me like
color font - size only drop down worked ok
but others one can't uses
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<label class="control-label">Enter Title News</label>
<asp:TextBox ID="Title1" CssClass="form-control" runat="server"></asp:TextBox>
<br />
<label class="control-label"> Content News</label>
<cc1:Editor ID="Editor1" runat="server" />
You must use TargetControlID like that
<cc1:Editor ID="Editor1" TargetControlID="Title1" runat="server" />
I think I understood your problem.
Open this link: HTML Editor Sample
You say you try to change the font-color and background pressing the control buttons. Those buttons work when you select the text first.
Type something into the Editor, then select that text.
After that press the font-color change button. It should turn you text into another color.
It works the same way with the background.
Also, if you press the button, then star typing, your text should start showing the color. (Works exactly like Word)
problem was when page load the editor tool and when i want post content
if when i press on button there is not working like (fore color , insert link )
This problem was due to my use bootstrap because when i create new web form and include the editor it's working fine and all the buttons can press and uses
Thank you for helping me
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 a website developed by using ASP.NET. In there lot of ajax request are happening. So I want to display a image when ajax request is happening and hide the image after data loaded. Now this is works fine,
Here what I did so far
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="uppnlLocation">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="uppnlLocation">
<ContentTemplate>
<asp:DropDownList ID="ddContinents" runat="server" CssClass="form-control" OnSelectedIndexChanged="ddContinents_SelectedIndexChanged" AutoPostBack="true"> </asp:DropDownList>
<asp:TreeView runat="server" ID="tvCountries" OnSelectedNodeChanged="tvCountries_SelectedNodeChanged"></asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
So in above code when a user select a continent from the dropdown list the countries which belongs that continent will be load to the below treeview. So I want to display a loading image when a user select a continent from the dropdown while loading the countries. Now this is working. But the problem is when user select a tree node in treeview It also shows this progress control image. I don't want to display that image on that action. How to disable it?
I saw a post regarding this.
Is there a way to disable UpdateProgress for certain async postbacks?
I implemented it. but then postback is not happening for the dropdown menu.
So how to achieve this?
Thank you very much.
Its better just to use the DisplayAfter parametre to raise the delay that this is appears because I understand that this just happening so fast. Do not go with complicate javascript solutions just add a delay of 1 or 2 seconds...
<asp:UpdateProgress ID="UpdateProgress1"
runat="server" AssociatedUpdatePanelID="uppnlLocation" DisplayAfter="2000">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Well why not just use javascript to force it display none if you are okay with it...
For normal update panel and to call update progress is not always show up. Better to use javascript to pop up update progress rather than using default ways.
Code to pop up Update Progress
function showUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'block';
}
function HideUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'none';
Sys.Application.remove_load(HideUpdateProgress);
}
If you are using this way when your job is done in Code behind u need to call javascript to hide the update progress
As per following
In CS file
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Script", "Sys.Application.add_load(HideUpdateProgress);", true);
Hope this help you
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/
I have a website where the user can select different cards. I need a way where when a new card is selected then the page does not refresh. When I click the back button now it just goes back to previous selections. I need it to go back to the previous page. Here is the code for the image change
<div class="imgCard" style="padding-right: 50px">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<fieldset style="border-width: 150px; border-style: none">
<asp:Image ID="imgCardChoice1" runat="server" />
<br />
<br />
<a id="openChange1" href="#" style="color: Red">Change Card</a>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the user clicks on "Change Card" then a jquery modal box opens and allows them to change the card. Thank you for any help/advice. If needed the code behind to select a new card is in C#.
Without knowing more, it sounds like you need to use AJAX to do that. If you are already using jQuery, check out jQuery.load(). You can make an AJAX request to a url on your site that will only return the image information and load that into the element you specify.
Here is a link to the docs:
http://api.jquery.com/load/
Try to use some javascript function.
create a div where you want to put your image.
then give him an ID, on javascript function call the div id and change the src to the image that you want to put.
on your link or wathever you have to change the image, call the onclick function and use the javascript function.
On my website i have 2 images, that onmouseover change an image in other div completely different.
see it on:http://roundhillevents.com
and pass the cursor on the facebook and on the youtube logo's.
If nothing appears, let stay the cursor over that a little while.
PS: Only works with forefox and don't know why.