We Keep Coding

CodeMirror with UpdatePanel in asp.net

I'm using CodeMirror in an ASP.NET web application. The web app uses UpdatePanel (ajax).
In ajax postback, I'm not able to get updated text from the CodeMirror textbox on server side and after the postback, the text gets reset. This WORKS if I don't use an update panel. What am I missing?
Below is the code mirror code:
editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
matchBrackets: true,
theme: "neat",
pollInterval: 100,
continuousScanning: 500
});
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="btn" />
</ContentTemplate>
</asp:UpdatePanel>
Is there an asp.net/C# sample for using CodeMirror? Any help is appreciated.

The short answer is: create a javascript event hook that fires early (before the UpdatePanel begins to do its work) and manually calls CodeMirror's .save() function.
The problem seems to arise because the auto-magic form.submit override that CodeMirror supplies is triggered after the ScriptManager has already passed the ViewState of the panel back to the server. This means the server only receives the TextBox in its initial state (CodeMirror hasn't put what you've typed into it yet). I checked the DOM events in Chrome and ScriptManager's hook was consistently ahead of the form.submit override that CodeMirror added.
I got around this by adding an .onclick to the submit button right after CodeMirror loaded. Using your example:
var editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
leaveSubmitMethodAlone: true, //since you don't need this anymore, no reason to complicate your DOM
matchBrackets: true,
theme: "neat",
pollInterval: 100,
continuousScanning: 500
});
window['cmLocalStateEvent'] = function () { editor.save(); };
//saveButton = document.getElementById("<%=btn.ClientID%>"); //grab the save button
//if (saveButton) {
// saveButton.onclick = function () { editor.save(); }; //make it do what the submit action was going to do
//}
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btn" runat="server" OnClientClick="if(window['cmLocalStateEvent'])window.cmLocalStateEvent();" OnClick="btn_Click" Text="btn" />
</ContentTemplate>
</asp:UpdatePanel>
Now the .onclick is ahead of the ScriptManager hook, and will fire first. Infact, if you put an OnTextChanged= and AutoPostBack= on the TextBox it'll fire even before the button that you just clicked does.
Essentially, the trick is to get CodeMirror's save to apply before ScriptManager submits the ViewState back to the server.
EDIT:
I've found since posting this, that you'll run into a troublesome issue if your submit button is also inside the UpdatePanel (which yours is). The .onclick will not persist after the initial submit and you'll be reset to a clean button with no event hooks. My current working solution to that scenario is adding a window['cmLocalSaveEvent'] function and adding the client .onclick to the ASP template (so the panel refresh puts it back for you). Updated code above to reflect this.

This is how I managed to make it work, just in case someone else needs it. After instantiating editor, I'm keeping the textbox aligned every time the blur event occurs.
editor.on('blur', function () {
arguments[0].save();
});

call server side method from Jquery in Dotnetnuke?

i am tried like this, i take an button control which display is none:-
<div style="display:none">
<asp:Button ID="loginbtn" runat="server" OnClick="loginbtn_Click" />
</div>
Then I call the click event of the button through jquery:-
$("input[id$=loginbtn]").click();
in Server side I call button event:-
protected void loginbtn_Click(object sender, EventArgs e)
{
}
Its working fine,But,it reload the page, I need to Stop it , Please give me some solution how to call the server side method from client side in DNN

In this case (I'm assuming you are developing a module for DotNetNuke); The easiest way is to check "Supports Partial Rendering" in your module control. Then it will be wrapped by an Update Panel.
Host -> Extensions -> Edit your module -> Module Definitions -> Module Controls -> Edit your module control -> Check Supports Partial Rendering
However, if a control already contains JavaScript for dynamic behaviors, wrapping the control in an Update Panel has the potential to break the control's functionality.

There are a couple of ways to do this, say, using an UpdatePanel or changing your mechanism to use AJAX directly with WebMethod methods; let me introduce the easiest example for your case before you consider more. Wrap your content in an update panel, as such:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<!-- stuff to reload here -->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="loginbtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
So, then the other option is to use jQuery's ajax or equivalents (such as post) to submit your data programatically (rather than somewhat macroing the UI - which might not even work in some browsers such as versions of IE). The AJAX call can return data and you can populate your pieces in place as required.

Auto Fill Textbox in ASP.NET depending on the text typed in another textbox

how to fill textbox in asp.net while i am typing in another text
.. changes in one textbox will affect in another textbox auto.. and without refreshing my page.

Ok, try this. You will need the AJAX Control Toolkit. So read the article Installing AJAX Control Toolkit 4 in Visual Studio 2010 to see how to install it in Visual Studio.
Then you need to add a ScriptManager to your ASPX page. You will need to add the following code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
What you then need to do, is add an UpdatePanel to your page. Inside this update panel, you need to place the textbox. This means that only the controls inside the update panel will refresh, and not the whole page. To do this, add the following code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!--Add your Textbox Control to update here: Textbox1-->
<asp:TextBox ID="Textbox1" runat="server" ReadOnly="True"></asp:TextBox>
<asp:TextBox ID="Textbox2" runat="server" ReadOnly="True" ontextchanged="Textbox2_TextChanged"></asp:TextBox>
</ContentTemplate>
<Triggers>
<!--This is the textbox you will be typing text into: TextBox2-->
<asp:AsyncPostBackTrigger ControlID="Textbox2" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
The Trigger tells your page which control on the form needs to initiate the postback. Now in your .cs file, you need to add the event handler for the Textbox2 TextChanged event. Add the following code:
protected void Textbox2_TextChanged(object sender, EventArgs e)
{
// Set the text of textbox1 = textbox2
}
I hope that this helps.

No need for AJAX. JQuery is enough. The code will do it
$('#text1').bind('keyup', function(){
$('#text2').val($('#text1').val());
});
Assuming
text1 id of box writing into.
text2 textbox that text gets copied to
in .Net you will have to use client id to get the correct id so it may look like this
$('<%=text1.ClientID%>').bind('keyup', function(){
$('<%=text2.ClientID%>').val($('#text1').val());
});
Oh and wrap it up in $(document).ready as per standard. And of coures you need to include the JQuery library to your page.
No posting back or page refreshes at all. It's your lightest solution and easy to implement.

You will need to use Javascript to accomplish this. ASP.Net code runs on the server side, which means it cannot affect the page without a postback happening first. Read up on the OnTextChanged event and how to hook into it with javascript. There is a javascript library called jQuery which makes everything easier, though it isn't strictly necessary.

Use JQuery. You may need to make an AJAX call to the server if you are relying on a datasource such as a database to autofil this field.

Update GridView from a WebMethod

I need help with something, it might be a bit complicated. I call a WebMethod that does somethings from inside a js file. One of the things it does, is that it calls some functions that are located in a class within the app_code.
In that class in app_code I get a GridView Control that is on my page and I need to update it, so I do this:
ActiveGridView.DataSource = (ActiveDataTable).DefaultView;
ActiveGridView.DataBind();
The above works fine when I call the functions in app_code from a regular function, but doesn't update the grid when I call it within the WebMethod.
Any ideas how to solve this problem?
Please note that I CAN'T have the WebMethod return the data and then on client side to update the grid.
Edited
Actually I am using a updatePanel, my aspx code looks like this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="MappedDataGrid" runat="server" CssClass="pipesTbl">
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRemove" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
And again this works fine when I call the fill grid from an event on the page, but then when I call it after a webMethods calls the class in app_code that is spouse to fill the grid, it doesn't get refilled.
Edited again
I think the problem is with this line:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRemove" EventName="Click" />
</Triggers>
I tried changing it to this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="MappedDataGrid" EventName="DataBinding" />
</Triggers>
But didn't work, I am probably missing something, and since this is all new to me, I didn't know what to do.
What should I be doing now in order to make it work as you said?

If you call a method which manipulates a ASP.NET page out of the lifecycle of that page, you won't view the result. If you want to bind data to a ASP.NET control, it needs to be in the lifecycle of the page, and if you call the method from javascript throught a webmethod, that method will be executed out of the lifecycle.
Try to fill the datagrid with AJAX embedding it in a UpdatePanel.

When you call a WebMethod you are not actually loading the page and running through the page lifecycle. Even though your method is part of your page codebehind class, when you call it in this way your controls on the page are not going to be available. It's just a shortcut for making a web service out of a method in your page class.
Based on what you say you want to do, you may want to look at using an UpdatePanel. With them, it IS actually doing a full postback to the page and you can change whatever is necessary with your page controls.
Update
The point with the UpdatePanel is that you won't use your WebMethod anymore. You will just click a normal button that is a trigger for the update panel, and you will update your grid like normal in the code behind (handle the click event of the button and call your code to bind the grid). Since only the grid is in the panel, only it will get refreshed on the screen.

Using ClientValidationFunction (JavaScript) in an UpdatePanel

I'm trying to determine why my validation function is not being called on my web form. I've read through various articles at MSDN and most notably found this nugget.
When you use the CustomValidator control inside an UpdatePanel control,
make sure that the validator control and the control it is associated with
are in the same panel. For more information about using the UpdatePanel
control for partial-page updates, see Partial-Page Rendering Overview.
With this knowledge I modified my code as follows:
<asp:UpdatePanel ID="UpdatePanel0" runat="server">
<ContentTemplate>
<script type="text/javascript">
function IsNotChecked(obj, args) {
args.IsValid = false;
if (document.getElementByID("cbRegion0").checked)
{
args.IsValid = true; return true;
}
return false;
}
</script>
<asp:CheckBox ID="cbRegion0" runat="server" ValidationGroup="0" AutoPostBack="true" OnCheckedChanged="CheckBox_CheckedChanged" />
<asp:CustomValidator ID="CustomValidator0" runat="server" ValidationGroup="0" ClientValidationFunction="IsNotChecked" ErrorMessage="You did not check the box." ValidateEmptyText="True" />
</ContentTemplate>
</asp:UpdatePanel>
The issue I'm having is that the validation routine does not get executed when clicking the submit button on my page.
Some unique elements of the design is that the code above is actually inside of a .ascx that is added to the page via Control.Add() but I don't see how that would affect the ClientValidationFunction. I believe it's related to the placement of the <script> inside the form but despite following directions at MSDN it doesn't seem to have made a difference.
Thanks for any ideas!

Scripts inside of an UpdatePanel will be lost after an async postback. Try putting your IsNotChecked method outside of any update panels... or, implement IScriptControl and put your validation method in the client script file you create to accompany your script control...

I found the answer here at Stack Overflow in the How do I get Client-side validation of ASP.Net page to run? discussion. Sorry for not seeing this earlier. As #Brian pointed out, by specifying the ValidationGroup="0" in my code that it was expected that the submit button on the page have the same ValidationGroup assigned. In the end I just removed the attribute from the directive and it now calls the JS.
I found the answer because I was looking through the page source and noticed that the submit button was calling a javascript WebForm_OnSubmit() method which ultimately was checking Page_ValidationActive.
This led me to the question I've linked.
I hope this helps someone else.
Thanks!