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>
Related
I am using ImageGallery control of FreeTextbox DLL for uploading images to server.
The issue i am facing is when i click on upload button this error page is shown
I Check the console of chrome, i got following error
here is my aspx code of ftb.imagegallery.aspx
<%# Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox, Version=3.3.1.12354, Culture=neutral, PublicKeyToken=5962a4e684a48b87" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<FTB:ImageGallery ID="ImageGallery1"
AllowImageDelete="true" JavaScriptLocation="InternalResource" UtilityImagesLocation="InternalResource"
AllowImageUpload="true" AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
</div>
</form>
</body>
</html>
I didn't able to solve this issue, Alternatively I manage to get past to this problem by manual uploading the image using A FileUpload Controll. Here is my code for anyone who face this problem in future.
1.ftb.imagegallery.aspx
<form id="form1" runat="server">
<div>
<FTB:ImageGallery ID="ImageGallery1"
AllowImageDelete="true" JavaScriptLocation="InternalResource" UtilityImagesLocation="InternalResource"
AllowImageUpload="False" AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
</div>
<div class="col-md-6">
<div class="col-md-8">
<asp:FileUpload runat="server" ID="fileupload1" CssClass="form-control" AllowMultiple="False" />
</div>
<div class="col-md-4">
<asp:Button runat="server" Text="UPLOAD" CssClass="btn btn-success" ID="btnsumbit" OnClick="btnsumbit_OnClick" />
</div>
</div>
</form>
2.Code behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnsumbit_OnClick(object sender, EventArgs e)
{
if (fileupload1.HasFile)
{
foreach (HttpPostedFile file in fileupload1.PostedFiles)
{
string fileName = Path.GetFileName(fileupload1.PostedFile.FileName);
fileupload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
Response.Redirect(Request.Url.AbsoluteUri);
}
}
}
Asp.Net 4.5 (WebForm)
How can I invoke a js function in Iframe from code behind successfully?
I am using RegisterClientScriptBlock to fire JS function in aspx page that in turn invokes the JS function in html page of iframe.
The Client Button in main page works fine.
The Server Button does not work as intended. However it does recognize the iframe object and contentWindow.
Error
TypeError: Object doesn't support property or method 'TestFunc'
Any constructive help would be appreciated. Note: this is a stripped down example for clarity.
MainPage.aspx
<head runat="server">
<title></title>
<script type="text/javascript">
function InvokeJS(param) {
var iframe = document.getElementById("MyIFrame");
try {
iframe.contentWindow.TestFunc(param);
//=============================================================
//Would really like to use the .apply method over calling the
//function directly. This does work in pure HTML, but not aspx
//=============================================================
//var _ARGS = [];
//_ARGS.push(param);
//iframe.contentWindow('TestFunc').apply(null, _ARGS);
} catch (e) {
alert(e);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="ServerButton" runat="server" Text="Server" />
<input id="ClientButton" type="button" value="Client" onclick="InvokeJS('From Client');" />
<br />
<br />
<iframe id="MyIFrame" runat="server" src="Pages/Test.html" style="width: 700px; height: 300px;"></iframe>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
MainPage.aspx (CodeBehind)
Protected Sub ServerButton_Click(sender As Object, e As EventArgs) Handles ServerButton.Click
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "InvokeJS", "InvokeJS('From Server');", True)
End Sub
Test.html (loads into iframe)
<head>
<title>Test</title>
<script type="text/javascript">
function TestFunc(param) {
document.getElementById("DisplayParam").innerHTML = param;
}
</script>
</head>
<body>
<h1>HTML Page</h1>
<h2 id="DisplayParam"></h2>
</body>
</html>
window.onload = TestFunc(); doesn't work because Test.html actually didn't fully loaded before the onload event raised, it's same with ServerButton, because the scriptblock was registered before the test.html loaded. that's why no TestFunc is not available to call.
You can try
<asp:Button ID="ServerButton" runat="server" Text="Server" OnClientClick="InvokeJS('From Server');" />
I don't think you like it if you want it to do something before run the script
Then play this trick
<script type="text/javascript">
//this is help check if postback by Server Button, if yes then invoke
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
if (args._postBackElement.id == '<%=ServerButton.ClientID%>')
$('#MyIFrame').load(function(){
InvokeJS('From Client');
console.log('load the iframe');
});
}
</script>
How to call server side function using HTML anchor tag.
Here I showed some example of my code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Update
</div>
</form>
</body>
</html>
c#
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Update User Details
}
Try like this,
create one submit button and hide that
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update</title>
<script language="javascript" type="text/javascript">
function fireServerButtonEvent(){
document.getElementById("btnSubmit").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="btnSubmit" runat="server" text="Submit" xmlns:asp="#unknown">
onclick="btnSubmit_Click" style="display:none" /></asp:button>
Update
</div>
</form>
</body>
</html>
You can either add runat="server" and OnServerClick="btnSubmit_Click" to your anchor tag like this:
Update
Or you can use asp:LinkButton. This has an OnClick attribute that will call the method in your code behind:
<asp:LinkButton ID="LinkButton1" runat="server"
OnClick="LinkButton1_OnClick">Update</asp:LinkButton>
protected void LinkButton1_OnClick(object sender, EventArgs e)
{
//Update User Details
}
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()"/>
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();