I am trying to highlight c-sharp with Code Mirror. Everything but the syntax highlight works. I am using .ASPX pages to delivery the content.
<asp:TextBox runat="server" ID="codeBox" TextMode="multiline" Rows="30" Width="1000"></asp:TextBox>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(
document.getElementById("MainPagePlaceholder_codeBox"),
{ lineNumbers: true, matchBrackets: true, mode: "text/x-csrc" }
);
</script>
I have the following stylesheets added:
<link href="codemirror.css" rel="stylesheet" type="text/css"/>
<link href="neat.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/mirror/clike.js"></script>
<script src="/Scripts/mirror/codemirror.js"></script>
<script src="/Scripts/mirror/matchbrackets.js"></script>
I figured it out. I was able to resolve this issue: codemirror.js needs to be first before clike.js.
Related
I have a jquery datepicker in an asp.net web form, it is working but has no style at all, I can only see the numbers floating over the page.
I have the following scripts in the master page:
<script src="Scripts/jquery-ui-1.11.3.min.js" type="text/javascript"></script>
I included the jquery-ui using nuget, so I have the themes very similar to
The date picker is associated to the control:
<div>Date: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> </div>
With the script:
$(document).ready(function() {
$("#<%=txtDate.ClientID%>").datepicker({ dateFormat: 'd/m/yy' });
});
The result is as I mentioned early the calendar without any style.
What I am missing to have the datepicker with some style (theme)?
Thank you
Here's what I have referenced. The datepicker works fine - apart from when you mouseover the arrows and the little white triangle goes gray - and can't be seen. Must have a little graphic missing I guess.
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css"/>
<script type="text/javascript" src="js/jquery-ui.js"></script>
thanks to #Martin Smellworse advice, based on the the files in my project I included:
<link href="Content/themes/base/all.css" rel="stylesheet" type="text/css" />
And worked
I have copied this code from a website http://www.aspdotnet-suresh.com/2012/04/jquery-dropdownlist-selection-for.html and its not showing me the desired output, I'm Naive at this but the calendar is not visible below the textbox which should as per the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1970:2012'
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
You can also set up calendar by using ajax calendar extender..
<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtDate" Format="dd/MMM/yyyy">
</asp:CalendarExtender>
As per you First statement you copied the code so check that your application contain js folder or not
Make sure that your website project includes the reference files in your project
css/ui-lightness/jquery-ui-1.8.19.custom.css
js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js
If not you can download the same from jquery site and include same in your project or provide http path for reference files
i'm trying to create date picker like this in asp.net, but its throwing me error. I'm using MVC architecture to create.
Here is the code i'm using. i'm getting error as:
Microsoft JScript runtime error: Object doesn't support this property
or method
I need date to be selected and sit in the edittext.
<tr>
<td style="width: 450px" class="" height="40px">
<%= Html.TextBox(ViewControlNames.DateTime, "", new { maxlength = "40", id = ViewControlNames.DateTime, Class = "LongInputField" })%>
</td>
</tr>
<script>
$(function () {
$("#CabDateTime").datepicker();
});
</script>
</asp:Content>
Probably you have not included the necessary jQuery UI library.
Add these script tags inside your page AFTER jQuery:
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
<script src="js/jquery-ui.custom.min.js"></script>
In this way you'll have the jQuery UI widgets bound to jQuery.
Ref: https://learn.jquery.com/jquery-ui/getting-started/
If you need a datetimepicker; you can use a widget plugin that extends datepicker functions by adding a time selection.
Project site: http://trentrichardson.com/examples/timepicker/
Demo code:
$(document).ready(function () {
$('#timePicker').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm ss'
});
});
Demo: http://jsfiddle.net/IrvinDominin/Ljt4T/1/
Have you added?
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
See from your comments you don't seems to be have added libraries and api at top of the page plese check it like i posted here
And for the further documentation please check here http://jqueryui.com/datepicker/
I use jquery and I see that currently, Jquery is given a reference in every content page.
I am planning to move all the references to the master page so that it will be easy to update them when its needed.
So , I remove the jquery references from the content page and place them in the head section of the master page as shown below :
<head id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
When I run the application I get the following error :
JavaScript runtime error: 'jQuery' is undefined
From my research online this is the right way to do it .. but I get the error. Can anyone help me and point out whats wrong or what needs to be done ?
Move the jquery script tag above the jquery ui script tag and remove one of the jquery ui references since you don't need to include them twice:
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
jQuery is undefined since the jquery ui library is trying to use the jQuery reference before it is defined in the jquery-1.9.1.js file.
First, change the order of the call to jQuery UI and jQuery library, all library or plugin that use jQuery need that defined jQuery before you call it, this is for all libraries or framewors:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
then so that you can see in your code you are calling twice a jQuery UI, check this and also if you are calling twice a jQuery or other libraries:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js
you are calling jQuery ui library before jQuery library is loaded
your code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
change it to
call jQuery library file first
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I am using .NET Studio 2003 and Framework 1.1 for designing a Wen Application. I tried to include css and js files using the following lines of code. But after putting this lines VS dosen't allow me to view aspx file in design view. Showing alert with "Could not open in Design view. Quote Values differently inside a '<%... "value" ...%>' block"
What should I do to view page in design view by keeping ResolveUrl function as it is in LINK and Script tags?
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/header.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/tooltip.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/menu.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/dropcheckbox.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/DateTime.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/time.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/Common.css")%>">
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/jQuery.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/header.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/menu.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/DateTime.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/time.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/dropcheckbox.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/common.js")%>"></script>
Design view is known to be totally unreliable in VS 2003 and we configure all our instances to open code-behind by default (in Options) - for example, it will continually break your layout. I strongly recommend you do the same.
The issue is simply as stated - which unfortunately is not stated simply.
Change following statement
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/jQuery.js")%>"></script>
to (note I switched " to ')
<script type="text/javascript" src='<%=ResolveUrl("~/JSFiles/jQuery.js")%>'></script>