Initially I able to preview image after select image. After added the master page, the javascript is not working anymore.
This is my master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Testing.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This is my content page
<%# Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Testing1.aspx.cs" Inherits="Testing.Testing1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#Image1').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Image ID="Image1" runat="server" height="100" Width="100" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<br />
<asp:TextBox ID="tbRetrieve" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnRetrieve" runat="server" Text="Retrieve" OnClick="btnRetrieve_Click" />
<br />
<asp:Image ID="Image2" runat="server" />
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</asp:Content>
And this is my code behind
protected void Page_Load(object sender, EventArgs e)
{
FileUpload1.Attributes["onchange"] = "imagepreview(this)";
if (!IsPostBack)
{
lblMessage.Visible = false;
}
}
So what is the problem?
on adding master page the code of finding the control id will be changed you will have to replace your code like this.
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#<%=Image1.ClientID%>').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
You need to use code like that in order to call your javascript method on behind.
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
Related
I'm trying to run a JS function that uses JQuery to append information to the HTML of an ASP page and I just can't get it to work. I've made some research about it but maybe it's something a lot simpler.
%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Pruebas.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
</body>
</html>
more specifically this is the function im trying to run
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
im trying to call this function from the C# code behind the page like this
protected void Button1_Click(object sender, EventArgs e)
{
String p = "this is a message";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "myfunction", "add('" + p + "');", true);
}
If I try to run a JS function that produces a console log or an alert on the page it works fine. Maybe it is related to the Postback property in the ASP button?
If anyone can shed some light on this I will be thankful.
There is no any .auto-style1 class in your code. Please add a class in div to work this code.
<form id="form1" runat="server">
<div class="auto-style1">
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
I'm trying to set the value of an ASP TextBox via javascript when I click a button but I can't get the ClientID of my TextBox control using code blocks.
I get this error :
The Controls collection cannot be modified because the control
contains code blocks (i.e. <% ... %>)
Here's my .aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="App.aspx.cs" Inherits="StatsWeb.App" %>
<!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 runat="server">
<title></title>
<link href="Styles/Site.css" rel="Stylesheet" type="text/css" />
<script>
function testf() {
alert("here");
document.getElementById('<%= TextBox1.ClientID %>').value = "asd";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1"
CssClass="Menu" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="5" >
<DataBindings>
<asp:MenuItemBinding DataMember="rule" TextField="name" ValueField="value"/>
<asp:MenuItemBinding DataMember="splitByField" TextField="name" ValueField="value" NavigateUrl="javascript:testf()"/>
<asp:MenuItemBinding DataMember="splitByObject" TextField="name" ValueField="value"/>
<asp:MenuItemBinding DataMember="statDefinition" TextField="name" ValueField="value"/>
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/App_Data/stats.xml"></asp:XmlDataSource>
<asp:Literal ID="Message" runat="server" Text="Status:"></asp:Literal>
<asp:TextBox ID="TextBox1" runat="server" EnableTheming="True" Height="137px"
Rows="6" TextMode="MultiLine" Width="842px"></asp:TextBox>
</div>
</form>
</body>
</html>
Replace
<asp:MenuItemBinding DataMember="splitByField" TextField="name" ValueField="value" NavigateUrl="javascript:testf()"/>
with
<asp:MenuItemBinding DataMember="splitByField" TextField="name" ValueField="value" OnClientClick="return testf()"/>
Without using master page it is working perfectly and When I am using master page it is not working.
I think this TrackCharacterCount function is not counting in mastere page.
I tried new Jquery script also:
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
Master Page Design code:
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
Default2.aspx Code:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
function TrackCharacterCount(ctl, limit, info) {
var editor = $(ctl).contents().find('iframe').eq(2);
$(editor).load(function () {
var txt = $(this).contents().find('body').text();
$(info).html(txt.length); //set initial value
$(this).contents().keyup(function () {
var txt = $(this).contents().find('body').text();
if (txt.length > limit)
$(info).html(txt.length).css("color", "red");
else
$(info).html(txt.length).css("color", "");
});
});
}
function ValidateEditor1Length(source, args) {
var editor = $(Editor1).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
function ValidateEditor1Length1(source, args) {
var editor = $(Editor2).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="Info">Info</div>
<cc1:Editor ID="Editor1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="Editor1" ClientValidationFunction="ValidateEditor1Length" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
<div id="Info1">Info</div>
<cc1:Editor ID="Editor2" runat="server" />
<asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="Editor2" ClientValidationFunction="ValidateEditor1Length1" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
put your script in masterpage's header somethink like this
<head>
<script type="text/javascript"
src="<%# ResolveUrl("~/YourScriptFolder/YourJavascript.js") %>">
</script>
</head>
I can't get this working. I want to fadeout a div after a postback. This div is inside an updatepanel. I understand that because of updatepanel it will be a partial refresh. But within this context, how can i still use fadeout?
<asp:Content ID="Content1" ContentPlaceHolderID="content_head" runat="Server">
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div_msg").delay(1500).fadeOut("slow");
});
</script>
</asp:Content>
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl_msgs" runat="server" Visible="false">
<div id="div_msg">
<asp:Label ID="lbl_msg" runat="server" Text="Label"></asp:Label>
</div>
</asp:Panel>
<asp:Button ID="but_status_new" runat="server" Text="New" CssClass="new-button-flat" onclick="but_status_new_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
I am not writing any js code in but_status_new_Click function.
Instead document.ready try using function pageLoad since ASP.NET AJAX has its own page lifecycle:
function pageLoad() {
$("#div_msg").delay(1500).fadeOut("slow");
}
Oh and move reference to jQuery to ScriptManager itself
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="js/jquery-1.6.2.min.js" />
</Scripts>
</asp:ScriptManager>
I am using CKEditor in my asp.net page. For this i have added ckeditor.dll to my project.
And i am using this reference in .aspx page.
My problem is that i can not able to read ckeditor content in javascipt.
Can any one please tell me how to achive this.
Here is my code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditorVamshi._Default" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function validate() {
var text = $('#cke_<%= CKEditorGettingStarted.ClientID %> iframe').contents().find('body').html();
alert(text);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<CKEditor:CKEditorControl AutoPostBack="True" ID="CKEditorGettingStarted" runat="server"
Height="300px" BasePath="~/CKEditor" MaxLength="10" Width="100%" CausesValidation="true">
</CKEditor:CKEditorControl>
<br />
<input type="button" id="btnPreview" value="Preview" onclick="validate();" />
</form>
</body>
</html>
Thank you in Advance
try
CKEDITOR.instances.Your_Editor_Client_ID.getData();