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>
Related
I am facing one strange issue. I am upgrading my project to latest jQuery version 3.3.2. I have created a sample page which contains only update panel and a javascript link.
Now problem is instead of calling document.ready method, when I refresh the page (run the application), pageLoad method is called first and then document.ready method gets called.
I have tried using older version of jQuery 2.2.4 and up to that it was working fine with update panel, but when I upgraded to latest version 3.x.x it creates an issue.
Below is sample code
default.aspx page
<head runat="server">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
<%--<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>--%>
<script src="Scripts/JavaScript.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div> Page body
</div>
<asp:ScriptManager runat="server" ID="sm" ScriptMode="Debug" EnableCdn="false"
EnablePartialRendering="true" LoadScriptsBeforeUI="true">
<CompositeScript>
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js" />
<asp:ScriptReference Name="MicrosoftAjaxWebForms.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upSnapshot" UpdateMode="Conditional">
<ContentTemplate>
Update panel body
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Javascript:
$j = jQuery.noConflict();
$j(document).ready(function () {
alert('document.ready');
});
function pageLoad(sender, args) {
alert('Pageload');
}
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded.
Where you have invoked the pageload() method ?
Can you share the HTML?
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 .
I created an asp.net file with a working collapsible panel.
I assumed that if I take the client side's source and copy it into an HTM file it would still work - but it doesn't.
What I did was "view source" and copied all of it to a blank HTM file.
All is working besides for the collapsible panel.
Why? Can I fix it?
Thanks
You can use jQueryUI accordion functionality
http://jqueryui.com/accordion/
or jQuery slideToggle() function
Regards
Nate
Here is Why
I will try and explain in short but have to use assumptions. ASP.NET is a web application framework that is compiled at runtime meaning your page is converted from objects and controls to html, css and javascript; the Javascript (ScriptResource.axd) is encrypted and you do not have access to the scripts in your htm page. Good Link about ScriptResource.axd
How to fix it?
The Great news is yes! Assuming you are using AJAXToolKit (and yes that is a big assumption), you can instead use jQuery UI Accordion with only one section. I tested both and they work the same. I hope this helps! jQuery Accordion reference
ASPX Example using AJAX (Collapsible Panel):
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:CollapsiblePanelExtender runat="server"
TargetControlID="Panel1"
Collapsed="true"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1" />
<asp:LinkButton ID="LinkButton1" runat="server">Panel</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server">
This is a Test
</asp:Panel>
</div>
</form>
HTM Example using jQuery (Accordion):
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Panel1').hide();
$('#pnlLink').click(function () {
$(this).next().toggle();
return false;
}).next().hide();
});
</script>
</head>
<body>
<a id="pnlLink" href="#">Panel</a>
<div id="Panel1">
<div>
This is a test</div>
</div>
</body>
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.
So, I have an .aspx webpage as follows:
..
<form id="frm" runat="server">
<asp:FileUpload runat="server" id="fileupload" onchange="browsed()" />
<asp:Button runat="server" OnClick="Upload_Click" id="uploadbutton" class="uploadbutton" Text="start upload" Enabled="false" />
<div id="nfo" style="display: none">
blabla
</div>
</form>
..
Now, as you can guess correctly, user chooses file to upload, clicks #uploadbutton and, voila, Upload_Click is called after the postback.
Then, I want to show div #nfo with some jQuery effects during the upload. To do this, I write:
$(function() {
$('.uploadbutton').click(function() {
$('#nfo').slideDown().show("fast");
})
})
and everything works just fine, until the user starts browsing in IE...
First of all, in IE, user has to click #uploadbutton twice - first time to display #nfo, second time, for some reason, to initiate postback.
Secondly, after the postback, Upload_Click's this.fileupload.HasFile shows false.
FF and Chrome works quite well though.
As far, as I can understand this - in IE jQuery's function prevents something important for asp:FileUpload from happening and stops the postback. Though, on the second click it does initiate the postback, but still with no info for asp:FileUpload's Upload_Click.
Any help?
Update:
followed #joelt'd advice. turned out, there was some different problem, never thought it could be of importance, so I didn't provide source code for that part =(
see localizing <asp:FileUpload>. IE problem
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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 runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$("#progress").show();
});
});
</script>
</head>
<body>
<form runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />
<div id="progress" style="display:none; background-color:Red;">test</div>
</form>
</body>
</html>
This works fine for me in FF and IE7, except in IE, the progress indicator doesn't really give you anything because of how it's rendering, I suppose. I would say the biggest difference between our code is the "onchange=browsed()" function. It's possible that's not getting called until you click the button? In any case, I would start with a stripped down page like this, and start adding in other elements you have until it breaks.
try this:
<asp:Button runat="server" OnClick="Upload_Click" id="uploadbutton"
class="uploadbutton" Text="start upload" Enabled="false"
OnClientClick="return myFunction();"/>
<script type="text/javascript">
function myFunction(){
$('#nfo').slideDown().show("fast");
return true;//THIS WILL FIRE POSTBACK EVENT
//return false;//THIS WILL STOP POSTBACK EVENT, WHICH YOU MAY WANT IF THERE
//IS NO FILE SELECTED
}
</script>