This code works fine in .aspx page no issues. but if i use master page then nothing works fine here,i tried placing the JQuery script in Master page, even then nothing is working. is there any thing setting need to be done here. Still not getting why info div is not loading count. Below is the link
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
I refer following blog also:
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
MasterPage.master 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>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx code
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
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" />--%>
<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" />--%>
<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" />
Thank you.
There should be a file called jquery-1.3.2.js and/or jquery-1.3.2.min.js.
You need to reference one of those two. The VSdoc file you are using is just for intellisense purposes in older versions of Visual Studio.
Your Script tag should look like this:
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
In addition you might want to update to a newer verison of JQuery. According to Jquery.com/download, the uptodate-versions are 1.11.3 and 2.1.4.
Inside visual Studio you can also use the package manager console to install a new version of Jquery using the following command(s):
Install-Package jQuery
Update-Package jQuery
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>
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>
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>
This code works fine in .aspx page no issues. But if I use master page then nothing works fine here. I tried placing the jQuery script in Master page, even then nothing is working. Are there any settings needed to be done here? Still not getting why info div is not loading count. Below is the link
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
I referred following blog also:
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
I added below code, script in the master page header also and got from jQuery new version script also.
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script src="scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
MasterPage.master 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>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx code
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
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" />--%>
<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" />--%>
<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" />
Thank you.
looks like jquery is not loaded.
Try to use the online jquery google api or online jquery path as follows
google api path
JQUERY.COM
I've searched the net and watched videos on this but no one really helps. What I want to do is add an already typed java script file to my aspx form in Visual web developer.
All tell me that i should just add:
<html>
<head>
<title><title>
<script src="JScript.js" type="text/javascript"></script>
</head>
</html>
but....
in an aspx form theres no <head> or <body> tags only:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >
</asp:Content>
If even possible to add java script to this aspx form please give me the code or help me do this right.
I have a picture and i want a button to change the picture to the next one in the gallery on my web page
Edit 1
Here is the html code to the buttons and picture
<tr>
<td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClientClick="init();"/> </td>
<td> <img ID="pic" alt="" src="010.JPG" runat="server" width="200" height="200" /> </td>
<td> <asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="init();"/> </td>
</tr>
And here is the code to the javascript init()
var imagePath = new Array();
var imageIndex = 0;
function init(){
addPath("Bell.jpg");
addPath("Dads.png");
getImagePath(0);
}
function addPath(path){
var index = imagePath.length;
imagePath[index++] = path;
}
function getImagePath(index){
var length = imagePath.length;
if(index <= length){
if(index >= 0){
document.getElementById("pic").src = imagePath[index];
document.getElementById("pic").alt = imagePath[index];
imageIndex = index;
}
} else {
document.getElementById("pic").src = "DOES NOT EXIST";
document.getElementById("pic").alt = "DOES NOT EXIST";
}
}
it doesn't appear to be calling the javascript init() method however
The above is now solved thank you
BUT Edit 2
the init function needs to run when you load the page before the buttons will know where to point the image source to. How can I call the init() when the page loads up?
You need to put here
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
<script src="JScript.js" type="text/javascript"></script>
</asp:Content>
Edit 1
function getImagePath(index){
var length = imagePath.length;
if(index <= length){
if(index >= 0){
document.getElementById("<%= pic.ClientID %>").src = imagePath[index];
document.getElementById("<%= pic.ClientID %>").alt = imagePath[index];
imageIndex = index;
}
} else {
document.getElementById("<%= pic.ClientID %>").src = "DOES NOT EXIST";
document.getElementById("<%= pic.ClientID %>").alt = "DOES NOT EXIST";
}
}
Also
function init(){
addPath("Bell.jpg");
addPath("Dads.png");
getImagePath(0);
return false;
}
Just put the script in your Content.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
<script src="JScript.js" type="text/javascript"></script>
</asp:Content>