I am having a problem with CKEditor inside an update panel in asp.net.
I have tab control on page with multiple CKEditor's i.e one ckeditor in each tab.
string scriptAdd = #"var editor = CKEDITOR.instances['ctl00_ContentPlaceHolder1_faqeditor']; if (editor) { editor.destroy(true); } CKEDITOR.replace('ctl00_ContentPlaceHolder1_faqeditor');";
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "", scriptAdd, true);
The above code snippet helps in rendering the editor in update panel. But when a postback is done it still shows the earlier value and not the changed one i.e the editor does not reflect the changes made after the tab is changed in the update panel.
The same thing works perfectly fine without update panel.
Is there any solution for this problem?
just force ckeditor to update the textarea on change :
var ckEditor = CKEDITOR.replace('ctl00_ContentPlaceHolder1_faqeditor');
ckEditor.on("change", function (event) {
event.editor.updateElement();
});
Sorry for the late response on this, but the answer may be helpful to others as well. You also need to do the following in code behind:
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "updatescript", "CKEDITOR.instances['ctl00_ContentPlaceHolder1_faqeditor'].updateElement();");
Hope this helps.
<form id="form1" runat="server">
<asp:ScriptManager ID="scrpM" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnshow" runat="server" Text="Show Hidden Editor" />
<div id="divEditor" runat="server" visible="false">
<asp:PlaceHolder ID="plCKEditor" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
----------
Add editor inside a div with visible="false"
and on the button click you set visible="True"
it's works fine for me
Related
On my ASP.NET page I am using Google Visualization charts inside of an asp:UpdatePanel. The user selects a chart they want to see from two asp:DropDownLists and then my C# code generates the JavaScript and I then call ScriptManager.RegisterStartipScript(...). When the page first loads the first default chart (i.e. first call to RegisterStartupScript) works and I can view the javascript from View Source. It is only on the postbacks that I get a blank chart and when I then go to View Source the page didn't receive the new JavaScript and it still has the old default JavaScript from the first page load.
Here is the weird behavior. If I use the exact same code but replace my Google Chart code with alert(...); then the alert() fires every time and when I view the source the script is there.
I've tried may different things and also followed such answers as here. Below is my code and any help would be appreciated, I've had other people look at this and we are all stumped.
FYI: If I remove all UpdatePanels and related items (ScriptManager and UpdateProgress) and use ClientScript.RegisterStartupScript() then everything works fine and I get the new JavaScript code on my page and the new chart appears as it should.
<asp:ScriptManager ID="ScriptMgr" runat="server" />
<asp:UpdatePanel ID="UpdatePanelData" runat="server">
<ContentTemplate>
<p>
<asp:DropDownList ID="PlotList" runat="server" AutoPostBack="true" Width="500px"
onselectedindexchanged="PlotList_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="RangeList" runat="server" Width="125px"
style="float:right;" AutoPostBack="True"
onselectedindexchanged="RangeList_SelectedIndexChanged">
</asp:DropDownList>
<br />
<asp:Label ID="PlotDescription" runat="server" Width="100%"></asp:Label>
</p>
<div id="chart_material" class="GoogleChart" style="width:100%;height:450px;"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RangeList" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="PlotList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgressData" runat="server" DisplayAfter="500">
<ProgressTemplate>
<div class="LoadingPanel">
<asp:Image ID="LoadingImage" runat="server" ImageUrl="~/Images/loading_2.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
And my C# code looks like this. The function DisplayPlot is called from the two DropDownList events and each list passes in themselves as 'control'.
private void DisplayPlot(Control control)
{
PlotInformation Plot = new PlotInformation(ChartDivID);
double Range = Convert.ToDouble(RangeList.SelectedValue);
string JavaScript = Plot.GetPlotScript(PlotList.SelectedItem.Text, Range);
PlotDescription.Text = Plot.GetDataPlotDescription(PlotList.SelectedItem.Text);
//string TestScript = "<script type=\"text/javascript\">\n\talert('" + PlotList.SelectedItem.Text + "');\n</script>";
ScriptManager.RegisterStartupScript(control, control.GetType(), ScriptKey, JavaScript, false);
//ScriptManager.RegisterStartupScript(control, this.GetType(), ScriptKey, JavaScript, false);
//if (!ClientScript.IsStartupScriptRegistered(ScriptKey))
// ClientScript.RegisterStartupScript(this.GetType(), ScriptKey, JavaScript);
}
I know this is late, but I spent a lot of time on the same bug.
Try changing:
ScriptManager.RegisterStartupScript(control, control.GetType(), ScriptKey,
JavaScript, false);
To
ScriptManager.RegisterStartupScript(UpdatePanelData, UpdatePanelData.GetType(), ScriptKey,
JavaScript, false);
I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().
Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.
How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?
Here is a mini project that shows the problem:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
edit
</div>
<div id="edit-div" style="display:none; border: 2px black solid;">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script>
$(document).ready(function(){
$('#edit-link').on('click', function () {
$('#edit-div').show();
});
});
</script>
The code for the submit button:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.UtcNow.ToString();
}
The simplest solution to this problem would be: -
don't use jQuery to show edit-div
make edit-div a server control
convert your edit to an <asp:LinkButton> control, and in its server-side click event, show your edit div
The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.
There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.
Hope that helps.
i need to be able to update the label text whenever i want without clicking on a button or something similar to that. the update happens based on server-client logic. i tried to use java script, but when i call the script from a function i wrote it doesn't work. now i'm trying to use updatepanel and no luck so far. i tried to use
UpdatePanel1.Update();
but it didn't refresh the label. the label defined inside the updatepanel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label" AccessKey="l"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
is there a away to force it to refresh?
If you just want to update your label from javascript you can try this function:
<script type="text/javascript">
function updateLabel(newValue) {
$('#<%= Label3.ClientID %>').val(newValue);
}
</script>
I'm using more than one TabContainer on a page in an ASP.NET project and I noticed a really strange behavior: when the page is loaded the focus jumps to the last TabContainer on the page, causing it to scroll down. I don't explicitly focus on any control so I don't understand where this is coming from. I also switched places between the controls and it is always the last one that is focused.
The TabContainers don't have any fancy settings, this is basically what they look like:
<cc1:TabContainer ID="tabContainer" runat="server">
<cc1:TabPanel runat="server" HeaderText="Header1" ID="tabPanel1" TabIndex="0">
<HeaderTemplate>
<asp:Label ID="lblTab1" runat="server" Text="Tab1"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="Header2" ID="tabPanel2" TabIndex="1">
<HeaderTemplate>
<asp:Label ID="lblTab2" EnableViewState="False" runat="server" Text="Tab2"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
I know I can set focus on a control, I tried it but the page first scrolls to the tab container and then returns to the focused control (it doesn't look good). I tried this to set the focus to another control:
<body id="main" onload="javascript:document.getElementById('lnkLogout').focus();">
Is this the standard behavior for the TabContainer? How can I get rid of it?
Place script below right after ScriptManager control:
<script type="text/javascript">
Sys.Extended.UI.TabContainer.prototype._app_onload = function (sender, e) {
if (this._cachedActiveTabIndex != -1) {
this.set_activeTabIndex(this._cachedActiveTabIndex);
this._cachedActiveTabIndex = -1;
var activeTab = this.get_tabs()[this._activeTabIndex];
if (activeTab) {
activeTab._wasLoaded = true;
//activeTab._setFocus(activeTab); -- disable focus on active tab in the last TabContainer
}
}
this._loaded = true;
}
</script>
Try this out. It helped me:
window.Sys.Application.findComponent('<%=tabContainer.ClientID %>');
tabContainer.set_activeTabIndex(1); ( //Here set the id of the last tab that is the index of the last tab. Index will start with 0 upto last - 1 as in array.. )
This is an old thread, but it never got resolved – here or in any of the other threads I found – and I had the same problem.
I fixed it by putting my javascript in the body element: onload="scrollTo(0,0);"
You can set focus server-side to avoid the page jumping around.
Try this in Page_Load:
PageUtility.SetFocus(foo);
Also check you whether you are setting Page.MaintainScrollPositionOnPostback.
Let me know if that helps.
UPDATE - you can simply call .Focus() on whatever control you want to be in focus by default.
eg: YourControlToFocus.Focus()
I had a similar problem, but I found a more simple solution.
In the case you use a:
<asp:toolkitscriptmanager ID="ScriptManager1" runat="server">
</asp:toolkitscriptmanager>
and more panel in the tab container ( 3 for example):
<asp:tabcontainer runat="server" ID="tc1" ActiveTabIndex="0" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
For example, you can use the property:
ActiveTabIndex="0"
OR
tc1.ActiveTabIndex = 2 'code behind
Where the integer is the ID of the tab you want to Focus.
It works for me! I Hope I can Help someone!
Enjoy
I have an update panel within a div that I modal using the JQuery plugin BlockUI. Inside the UpdatePanel is a textbox and a button. When I enter something in the textbox and click the button I am unable to retrieve the text in the textbox. When I debug it shows the textbox having no value.
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="divTest">
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
SERVER-SIDE:
protected void cmdTest_Click(object sender, EventArgs e)
{
string x = txtTestVS.Text;
}
This should clarify things. Here are the total contents of the page.
SHOW MODAL
<div id="divTest">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is a common problem with dialog plug-ins. The problem is when content is put in the blockUI container, it's appended to the element, and no longer in the form being submitted to the server. To solve this you need to edit the blockUI code a bit:
Here's the source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js
Change this:
Line 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);
and this:
Line 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:
els = $('form').children().filter('.blockUI').add('form > .blockUI');
That should get you going and the textbox values coming through.
(Response courtesy of Nick Craver https://stackoverflow.com/users/13249/nick-craver)
If you are trying to use blockUI on a button within an update panel (i.e. you click the button within the update panel and the UI gets blocked), you need to handle it using PageRequestManager events
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function() {
$.blockUI({ message: '<img src="../../Content/images/Busy2.gif" />' });
});
prm.add_endRequest(function() {
$.unblockUI();
});
Or on a button click, if you want to display a modal window with this text box and a button, you can try something like this