I am currently developing a SQL QUERY editor where users can enter queries. The entered text is then passed to a SQL COMMAND for execution, and the results are displayed to the user in a GRIDVIEW. However, I am facing an issue in retrieving the text entered in a DIV with the attribute contenteditable="true" in the codebehind.
The project consists of three files: html, JScript.js, and StyleSheet.css. I have added a textbox to test retrieving the value in the textbox upon button click, but it is not working. Below is my ASPX code:
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="form1" runat="server">
<div id="editor" contenteditable="true"></div>
<br />
<asp:Button runat="server" OnClick="load" Text="Submit" />
<asp:TextBox ID="TextBox1" ForeColor="White" runat="server"></asp:TextBox>
</form>
</asp:Content>
Here is the ASPX.CS code snippet:
public void load(object sender, EventArgs e)
{
HtmlGenericControl footer = (HtmlGenericControl)mainContent.FindControl("editor");
String cmd = footer.InnerHtml.ToString();
TextBox1.Text = cmd;
}
And this is the JScript.js code snippet:
$(function () {
$("#editor").on("keydown keyup", function (e) {
if (e.keyCode == 32) {
var text = $(this).text().replace(/[\s]+/g, " ").trim();
var word = text.split(" ");
var newHTML = "";
$.each(word, function (index, value) {
switch (value.toUpperCase()) {
case "SELECT":
case "FROM":
case "WHERE":
case "LIKE":
case "BETWEEN":
case "NOT LIKE":
case "FALSE":
case "NULL":
case "FROM":
case "TRUE":
case "NOT IN":
newHTML += "<span class='statement'>" + value + " </span>";
break;
default:
newHTML += "<span class='other'>" + value + " </span>";
}
});
$(this).html(newHTML);
//// Set cursor postion to end of text
var child = $(this).children();
var range = document.createRange();
var sel = window.getSelection();
range.setStart(child[child.length - 1], 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
$(this)[0].focus();
}
});
});
Everything seems to be working fine, but I am still trying to figure out how to retrieve the text from the DIV in the codebehind that the user enters in the form of a query. Any help would be appreciated. Thank you.