I have a button click event that should take the text from a text box and then write to the InnerText property of a div on the same page. The text is getting inputted to the div, but it's never on a new line. I've tried the following variations:
EDIT: To the person who chose to close this question, this is inside of a div and not inside a multi-line text box. They don't work the same, because I had this working when I was using a multi-line text box.
protected void Button1_Click(object sender, EventArgs e)
{
if (txtCategory.Text.Length > 0)
{
StringBuilder sb = new StringBuilder(drugTerms.InnerText);
sb.AppendLine(txtCategory.Text);
drugTerms.InnerText = sb.ToString();
txtCategory.Text = "";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (txtCategory.Text.Length > 0)
{
StringBuilder sb = new StringBuilder(drugTerms.InnerText);
sb.Append(txtCategory.Text).Append(Environment.NewLine);
drugTerms.InnerText = sb.ToString();
txtCategory.Text = "";
}
}
aspx
<%# Page Language="C#" AutoEventWireup="true" Inherits="_Default" Codebehind="Default.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoComplete Text Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".auto").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'CategoryName':'" + document.getElementById('txtCategory').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (x) {
alert("Error Occurred");
}
});
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">
Enter Drug Name:
</label>
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Button 2" />
<asp:TextBox ID="txtCategory" CssClass="auto" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button 1" />
<div id="drugTerms" runat="server"></div>
</div>
</div>
</form>
</body>
</html>
and I tried to add an html break line character in their as well. Every time when the button is clicked the text in the text box is added with the new term being a space instead of the newline character. Why can't I add a new line character in this div?
use "<br>" instead of Environment.NewLine
have you tried using a new Literal and a PlaceHolder?
the aspx:
<asp:PlaceHolder ID="ph" runat="server' visible="true"></asp:PlaceHolder>
then your code behind would look something like this:
c#:
Literal literal = new Literal();
lit.Text = "<br/>";
ph.Controls.Add(lit);
I actually do like #I4V's solution of using a break over the environment newline.
Related
i do have a linkbutton that do some codebehind on c#.
and i want that, after the codebehind is done, and the result comes back to the page, the scroll moves to a certain div.
<html>
<head>
</head>
<body>
<asp:LinkButton ID="lb1" runat="server" OnClick="lb1_Click"> Click Aqui </asp:LinkButton>
<div id=myDiv> Hi! </div>
</body>
</html>
code behind:
protected void lb1_Click(object sender, EventArgs e)
{
//do something in database
// then back to the page, and scroll to MyDiv
}
This could help you, just change in the javascript the file that have the code and it will output the things in the file called
<script type="text/javascript">
function lb1_Clicks() {
$.ajax({
url: "getInfo.php",//set the file that will do the magic output
success: function(response) {
$('.myDiv').html(response).fadeIn();
}
});
}
</script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<asp:LinkButton ID="lb1" runat="server" OnClick="lb1_Click()"> Click Aqui </asp:LinkButton>
<div class="myDiv"><!-- your code will update here || example hello World--></div>
</body>
</html>
<!-- getInfo.php -->
<?PHP
echo "hello world";
?>
I'm writing a C# project,
One of my needs is to expose button when TextBox (not dynamic) have more then 1 letter, As long as i know changes (which includes functions activation) will happen only between postacks.
Is there any possibilty to check the Texbox letter content without using postback (Includes skip on page load function).
Thanks Ahead.
Is there any possibilty to check the Textbox letter content without
using postback (Includes skip on page load function).
Assuming you are using ASP.NET Web Form, you could call WebMethod via Ajax.
After posting back to server via Ajax,
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox runat="server" ID="TextBox1" />
<button type="button" onclick="postData();">Post Data</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
function postData() {
var data = { text: $('#<%= TextBox1.ClientID %>').val() };
$.ajax({
type: "POST",
url: '<%= ResolveUrl("~/default.aspx/postdata") %>',
data: JSON.stringify(data),
contentType: 'application/json',
success: function (msg) {
$('#<%= TextBox1.ClientID %>').val(msg.d);
}
});
}
</script>
</form>
</body>
</html>
Code Behind
using System;
namespace WebApplication1
{
public partial class Default : System.Web.UI.Page
{
[System.Web.Services.WebMethod]
public static string PostData(string text)
{
return text + DateTime.Now;
}
}
}
I am new to C# and JQuery. I try to add jquery to a C# WebForm project.
What I want to do is this:
Add a button to a webform.
If that button is clicked serverside then display a JQuery dialogbox
This is the code that I have - if I click the button nothing happens.
I wonder where the problem is....
.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="Dialog_YES_NO_mit_JQuery.frmMain" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
</body>
</html>
.aspx.cs file :
public partial class frmMain : System.Web.UI.Page
{
protected void btnDemo1_Click(object sender, EventArgs e)
{
string message = "Message from server side";
//ClientScript.RegisterStartupScript (this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
ClientScript.RegisterClientScriptBlock(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}
}
}
Here's a complete example that works:
You need to add a reference to jQuery UI library after the reference to jQuery as this is where the dialog logic is defined
You need to add a reference to the jQuery UI CSS file to enable the modal popup styling.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
<div id="dialog"></div>
</div>
</form>
</body>
Output:
here an example that works for me :
code behind :
protected void ShowDialogClick(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(), "ShowDialogJS();", true);
}
aspx :
<script type="text/javascript">
function ShowDialogJS() {
jQuery("#dialog").dialog();
}
</script>
<asp:Button runat="server" ID="btnShowDialog" Text="Show Dialog"
OnClick="ShowDialogClick"></asp:Button>
EDIT :
I have two js files for jQuery :
<script src="ressources/jQuery/scripts/jquery-1.11.4.js" type="text/javascript"></script>
<script src="ressources/jQuery/scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
try this
aspx
`
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<div id="dialog"></div>
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
`
added
<div id="dialog"></div>
i also added javascirpt files
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
I already created a textbox id called txt which it empty at the start. After I click button, the C# assigned information from user input to txt.Text and it did display the result in txt textbox then calling the javascript function and I use document.getElementById('txt'); to get value that is already displayed. However the javascript is showing that the txt is null even the information is already displayed on textbox. I tried with alert, it does trigger when calling that function. I don't understand why?
C# codes,
protected void ButtonRequest_Click(object sender, EventArgs e)
{
//more codes, I cut this short to main point
txt.Text = deviceName;
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "<script>CreateIsm();</script>", false);
}
In asp.net and javascript,
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" CodeBehind="~/Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
// global variables
id = 'AUTH';
notes = '';
ismClassId = '';
caseType = '';
l1 = '';
l2 = '';
l3 = '';
// Create ISM Ticket
CreateIsm = function (funct) {
// alert("hello");
var textBox = document.getElementById('txt');
var txt = "Please add the following DNS entries\n" + textBox;
ismClassId = 'ServerName';
caseType = 'Request';
l1 = 'Request';
l2 = 'Network';
l3 = 'Static IP Address';
notes = txt;
//notes = $('#txt').val();
$.support.cors = true;
$.ajax({
type: "POST",
url: "http://serversite/SubmissionPage.aspx",
data: {
'Form_ID': '08.01.7',
'ISM_Class_ID': ismClassId,
'Case_Type': caseType,
'Level_1': l1,
'Level_2': l2,
'Level_3': l3,
'Case_Notes': notes,
'Contact_ID': id
},
success: function (data) {
//console.log(data);
var str = data;
var ticket = $(str).find("#ticketIDOutput").val();
var hreff = "http://egsd.jvservices.com/Form/SRApproval/SRApproval.aspx?ticketID=" + ticket;
var a = "<a href='" + hreff + "' target='blank'>" + ticket + "</a> created."
$('#output').html(a);
},
error: function (jqXHR, textStatus, errorThrown) {
$('#output').html("Error creating ISM ticket: " + textStatus + " - " + errorThrown);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<asp:Button ID="ButtonRequest" runat="server" onclick="ButtonRequest_Click"
Text="Request" Visible="False" style="height: 26px" />
<br />
<br />
<div id="output">
</div>
<asp:TextBox ID="txt" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px"></asp:TextBox>
</center>
</form>
</body>
</html>
You need to access ClientID
var textBox = document.getElementById('<%=txt.ClientID %>');
If you are using .Net framework 4.0 or higher you can use ClientIDMode Enumeration on your control.
In your aspx page specify ClientIDMode = "Static" wiht your control like:
<asp:TextBox ID="txt" ClientIDMode="Static" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px"></asp:TextBox>
and then you can access it like:
var textBox = document.getElementById('txt');
If you look at the markup generated in your browser.. you'll see that the ID isn't actually what you think it is.
You can force it to be what you want.. by setting the ClientIDMode to Static:
<asp:TextBox ID="txt" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px" ClientIDMode="Static"></asp:TextBox>
Or you could use the ClientID property of the control in your page code.
Is there a way to send data to an aspcontrol say a label called label1? Via jquery?
I know jquery only likes html but is there a way to just send the raw text to an asp control using a similar method below:
<script type="text/javascript">
$(function () {
$('button').click(function () {
$(document).ready(function () {
var x = $('textarea').val();
$('textarea').val('');
var label = $("#<%= Label1.ClientID %>");
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
var serializer = new XMLSerializer();
label.text(serializer.serializeToString(newdiv));
return false;
});
});
});
</script>
I think the bigger issue is asp.net changes the id and trying to get that in the code isn't that easy.
Can you use the name attribute? If so you can just look for the name attribute containing your name using the jquery selector '[ name *="YourName"]'
EDIT: I meant to add firebug is a great help for examining page elements and figuring exactly what you can use (Ex: asp.net adds a name attribute to a button by default) and whats going on (like your return false failing) then tweaking your jquery from the watch window.
Sample asp.net form content:
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" /></p>
<p>
<asp:Label ID="Label1" name="Label1" runat="server" Text="Label"></asp:Label>
</p>
<div id="test1"></div>
jquery:
$(function () {
$('[name*= "Button1"]').click(function () {
var x = $('[name*= "TextBox1"]').val();
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
$('[name*= "Label1"]').text($('#test1').html());
$('[name*= "TextBox1"]').val('');
return false;
});
});
Here's how to do it without jQuery:
<%# Page Inherits="System.Web.UI.Page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="App_Resources/JavaScript/jquery-1.4.4.min.js"></script>
</head>
<body>
<form runat="server">
<asp:Label ID="testLabel" runat="server" Text="test" />
<script type="text/javascript">
$(document).ready(function ()
{
var label = document.getElementById("<%= testLabel.ClientID %>");
var div = document.createElement("div");
div.innerText = "content";
label.innerText = div.outerHTML;
});
</script>
</form>
</body>
</html>