So, after a lot of searching I finally thought I enabled inline scripting on my sharepoint page (by changing the parser settings in web.config). However, the following still isn't working:
This:
<asp:Button runat="server" Text="Go!" id="GoBtn" OnClick="test()"/>
Should be calling this:
<script type="text/javascript" runat="server">
function test()
{
alert('Hello World!');
}
</script>
But it's not. Any suggestions?
OnClick attribute means server-side event.
You need:
<asp:Button runat="server" Text="Go!" id="GoBtn" OnClientClick="test()"/>
Try removing runat="server" from your script tag . There is no need for this .
Related
I recently added MathJax to my webform, I'm able to do everything except figure out how to use MathJax as a placeholder inside a TextBox.
example:
<asp:TextBox ID="textbox1" placeholder="$x^2$"></asp:TextBox>
My placeholder doesn't want to use MathJax even though everywhere else it's fine.
Is there a specific way to do this when using MathJax inside the placeholder attribute?
Here is my MathJax configuration:
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
You can add custom attributes in server side with Attributes property and the Add() method.
In the Page_Load event:
textbox1.Attributes.Add("placeholder","$x^2$");
When your page is rendered you should have in the HTML result:
<input id="textbox1" type="text" placeholder="$x^2$" />
Don't forget to add the runat="server" in your ASP.NET control.
<asp:TextBox ID="textbox1" runat="server" placeholder="$x^2$"></asp:TextBox>
I'm a beginner trying my first program to add external jscript file in scr attribute of script tag, followed all steps as I searched but it's not working the way it should. Can someone please help me with this?
I have one aspx form, and one button onclick calling internal javascript function.
I also have one button onclick calling external .js file function.
This is my aspx code
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
And this is my .js code
ExternalJSFileFunction()
{
alert("I m from external file");
}
There should not be code in between the script tags of an external script. Try changing it to:
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js"></script>
<script type="text/javascript">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
Also, the Language attribute is deprecated and is not needed
Edit
It's because the function you are trying to call isn't actually a function because the function keyword is not used. Change the external file so that it is:
function ExternalJSFileFunction()
{
alert("I m from external file");
}
Then it will work
Additionally, there are some other tips as well:
If you're using the HTML5 doctype, you can also get rid of the type attribute on <script> elements too
Also have your opening curly braces on the same line as the function or conditional, so do:
function ExternalJSFileFunction() {
but not:
function ExternalJSFileFunction()
{
You should almost always add your scripts to the end of the page, just before the closing </body> tag for performance
Using the onclick attribute is also not the recommended way of attaching event handlers, you should use the proper addEventListener() method instead. If you need to support <= IE8 you'll need to use IE's older event API. Using a JS library. like jQuery, can really help out with this kind of stuff.
The function in your external JavaScript file is not defined properly.
It should look like this (I added the function keyword).
function ExternalJSFileFunction()
{
alert("I m from external file");
}
You also need to make the changes that danwellman suggested in his answer.
I am trying to change background color of textbox by using javascript but my code is not working. I search SO but not find any suitable answer. Here is my code.
<head>
<script type="text/javascript" language="javascript">
function abc() {
var v = document.getElementById("<%=TextBox1.ClientID%>");
v.setAttribute('BackColor', 'Red');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="abc()" onclick="Button1_Click"/>
</div>
</form>
</body>
You are trying to change the UI that is html, so you need to use javascript/css properties.
Here there is a list of css attributes accessible by javascript.
Try with:
<script type="text/javascript" language="javascript">
function abc() {
var v = document.getElementById("<%=TextBox1.ClientID%>");
v.style.backgroundColor = "red";
}
</script>
Furthermore I have the Visual Studio 2010 and the Intellisense also show me the style attribute:
You are right jams, when I pretend to point to an id from a html generated by asp the intellisense doesn't works for the style attribute:
I think the Intellisense doesn't reach to this id because at the moment of you are writting this code, the html doesn't exists.
BackColor does not exist on the client side. That's an ASP.NET server-side notion. Rather, you want to set it with CSS:
v.style.backgroundColor = 'Red';
Here is a reference of the names of CSS properties as they would appear in JavaScript.
I wrote a javascript with a asp.net page.
In Asp.net Page
<HTML> <HEAD>
<script type="text/javascript">
function Myfunction(){
document.getElementId('MyText').value="hi";
}
</script>
</HEAD> <BODY>
<input type="text" id="MyText" runat="server" /> </BODY>
In Code-behind
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Session("My")= "Hi" Then
I want to call "Myfunction" javascript function
End If
End Sub
How can I do?
One way of doing it is to use the ClientScriptManager:
Page.ClientScript.RegisterStartupScript(
GetType(),
"MyKey",
"Myfunction();",
true);
This is a way to invoke one or more JavaScript methods from the code behind.
By using Script Manager we can call the methods in sequence. Consider the below code for example.
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg",
"$(document).ready(function(){EnableControls();
alert('Overrides successfully Updated.');
DisableControls();});",
true);
In this first method EnableControls() is invoked.
Next the alert will be displayed.
Next the DisableControls() method will be invoked.
There is a very simple way in which you can do this. It involves injecting a javascript code to a label control from code behind. here is sample code:
<head runat="server">
<title>Calling javascript function from code behind example</title>
<script type="text/javascript">
function showDialogue() {
alert("this dialogue has been invoked through codebehind.");
}
</script>
</head>
..........
lblJavaScript.Text = "<script type='text/javascript'>showDialogue();</script>";
Check out the full code here: http://softmate-technologies.com/javascript-from-CodeBehind.htm (dead)
Link from Internet Archive: https://web.archive.org/web/20120608053720/http://softmate-technologies.com/javascript-from-CodeBehind.htm
If the order of the execution is not important and you need both some javascript AND some codebehind to be fired on an asp element, heres what you can do.
What you can take away from my example:
I have a div covering the ASP control that I want both javascript and codebehind to be ran from. The div's onClick method AND the calendar's OnSelectionChanged event both get fired this way.
In this example, i am using an ASP Calendar control, and im controlling it from both javascript and codebehind:
Front end code:
<div onclick="showHideModal();">
<asp:Calendar
OnSelectionChanged="DatepickerDateChange" ID="DatepickerCalendar" runat="server"
BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ShowGridLines="true" BackColor="#B8C9E1" BorderColor="#003E51" Width="100%">
<OtherMonthDayStyle ForeColor="#6C5D34"> </OtherMonthDayStyle>
<DayHeaderStyle ForeColor="black" BackColor="#D19000"> </DayHeaderStyle>
<TitleStyle BackColor="#B8C9E1" ForeColor="Black"> </TitleStyle>
<DayStyle BackColor="White"> </DayStyle>
<SelectedDayStyle BackColor="#003E51" Font-Bold="True"> </SelectedDayStyle>
</asp:Calendar>
</div>
Codebehind:
protected void DatepickerDateChange(object sender, EventArgs e)
{
if (toFromPicked.Value == "MainContent_fromDate")
{
fromDate.Text = DatepickerCalendar.SelectedDate.ToShortDateString();
}
else
{
toDate.Text = DatepickerCalendar.SelectedDate.ToShortDateString();
}
}
asp:run javascript method
Add this line to the bottom of the page before </form> tag, at least under the js function you wrote.
the reason of doning this is avoid calling your method before your
browse knowing what is the funcion and finally do nothing.
<% Response.Write($"<script>yourfunction('{Config.id}');</script>"); %>
ps: I've tried all methods up there but nothing worked fine for me. And I figure out this easy and wonder way of calling js method on my own!
I have a button (<asp:button id="MyButton" runat="server" />). I want this button to be automatically clicked onload. So I added JavaScript for that to happen:
<script language="javascript" type="text/javascript">
var myButton = document.getElementById('myButton');
myButton.click();
</script>
The error I'm getting is "Microsoft JScript runtime error: 'myButton' is null or not an object"
The page this button is on has a MasterPage in the back. Would that be the reason this is happenening?
document.getElementById() is case sensitive. Try document.getElemenById('MyButton').
You want to write the client ID rather than the server ID.
<script language="javascript" type="text/javascript">
var myButton = document.getElementById('<%=MyButton.ClientID%>');
myButton.click();
</script>
I see, this code will run before the button is loaded on the client so you will need to place this script block after the button or if you are using jQuery or something similar they will offer document ready functionality. The following code will be run once the document has loaded completely.
$(document).ready(function () {
var myButton = $('#<%=MyButton.ClientID%>');
myButton.click();
});
You'll want to set a few properties to implement your requirements.
<asp:button
id="MyButton"
runat="server"
UseSubmitBehavior="false"
OnClientClick="return changeBackgroundColor();" />
Setting the UseSubmitBehavior to false means that the button will not post back to the server. The OnClientClick property is as literal as it sounds. When clicked the client will execute the JavaScript code specified.
What is the Id of the button in the rendered HTML on the client side? ASP .NET has a tendency to have longer auto-generated client-side IDs for its own use. One thing you could do is set the name attribute of the button and reference that in the JavaScript.
Also of potential use to you is a method of finding a .NET client ID using jQuery.
The button probably has another ID when it's rendered to the client. Try to set ClientIDMode="Static" for the button. Then the id will be then same as on the server side.
Change the id="MyButton" to id="myButton" case matters in javascript/DOM
The page may not have loaded fully so when this code is executed 'myButton' may not be available yet. You can either make a function that calls this on body load:
<body onload="functionForButton()">
or put your script at the end of the body tag:
<script language="javascript" type="text/javascript">
var myButton = document.getElementById('myButton');
myButton.click();
</script>
</body>
Also make sure the case is the same. MyButton != myButton
Change your script to :
<script language="javascript" type="text/javascript">
var myButton = document.getElementById('<%= myButton.ClientID %>');
myButton.click();
</script>
And put this script at the end of page just before </body>.