I'm trying to display java code in html page, It's not working, it shows this error
any help will be appreciated. my code look like
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" />
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreEclipse.css" />
<h3>Java Code:</h3>
<pre class="brush: java;">
public class JavaClass {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
<!-- Highlight all -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
when i comment the following line
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
the above error will not appear but shows diffrent error.
Related
Newbie problem. I am playing with Polymer.dart, and following the beginner tutorials. The Dart code gets invoked, but is unable to instantiate the PaperItem. How can I do this ? The error I get is :
Cannot read property 'toString' of null (first line of addTodoItem below)
mini.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_menu.dart';
PaperInput paperInput;
CoreMenu coreMenu;
void main() {
print("enter main");
initPolymer().run(() {
Polymer.onReady.then((_) {
paperInput = querySelector('#todo-input');
coreMenu = querySelector('#todo-list');
paperInput.onChange.listen(addTodoItem);
});
});
}
void addTodoItem(Event e) {
PaperItem newTodo = new PaperItem.created();
newTodo.text = paperInput.value;
paperInput.value='';
coreMenu.children.add(newTodo);
}
mini.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini</title>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<link rel="import" href="packages/paper_elements/paper_item.html">
<script type="application/dart" src="mini.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="mini.css">
</head>
<body unresolved touch-action="auto">
<core-header-panel> <core-toolbar>
<paper-tabs id="tabs" selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab> <paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs> </core-toolbar>
<h2>TODO list</h2>
<div>
<paper-input floatingLabel label="Action Item" id="todo-input">
</paper-input>
</div>
<div>
<core-menu id="todo-list"> </core-menu>
</div>
</core-header-panel>
</body>
</html>
This is not the right way to dynamically create instances of Polymer elements
PaperItem newTodo = new PaperItem.created();
the right way is
PaperItem newTodo = new Element.tag('paper-item');
or
var newTodo = new Element.tag('paper-item') as PaperItem;
Just as additional note:
Polymer elements that extend DOM elements (which is not the case for core-elements or paper-elements) need an additional parameter - see Dynamically create polymer element for more details.
How can I apply/put external or extra <script> references and CSS <link> in my Razor content/child pages?
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="...../ui/jquery.ui.mouse.js"></script>
<script src="...../ui/jquery.ui.draggable.js"></script>
}
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
#section JavaScript {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"></script> "
In your _Layout you could have 2 sections: one for the scripts and one for the styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
#RenderSection("Styles", false)
</script>
</head>
<body>
#RenderBody()
#RenderSection("Scripts", false)
</body>
</html>
and then in your view override the sections you want:
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Styles {
<!-- main CSS -->
<link href="#Url.Content("~/Content/Site.css)" rel="stylesheet" type="text/css" />
<!-- some external CSS -->
<link href="http://www.example.com/foo.css" rel="stylesheet" type="text/css" />
<!-- some inline CSS -->
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
</style>
}
#section Scripts {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="#Url.Content("~/ui/jquery.ui.mouse.js")></script>
<script src="#Url.Content("~/ui/jquery.ui.draggable.js")></script>
<script type="text/javascript">
// some inline javascript
</script>
}
Another way,
It's useful while same css and script files are referenced from different cshtml files and you are not using a default layout.
Create a partial view(let _Reference.cshtml) in shared folder and add the following for raw output :
#Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
.....
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Now in the head tag of your referencing cshtml, add this :
<head>
<title>MVC Test</title>
#Html.Partial("_Reference")
</head>
Hope this will help someone.
I have tried many methods to show the mapView in phonegap application that online provided. but still cant works. here is my code. Hope someone can help me to solve the problem
Thanks in advance
this is the map.js file code
function onMapLoad(){
if(isConnected){
//load google api
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","http://maps.googleapis.com/maps/api/js?sensor=true&callback="+"getGeolocation");
document.getElementByTagName("head")[0].appendChild(fileref);
}
else{
alert("Must be connected to the internet");
}
}
function getGeolocation(){
var options ={
maximumAge:3000,
timeout:5000,
enableHighAccuracy:true
};
navigator.geolocation.getCurrentPosition(loadMap,geoError,options);
}
function loadMap(position){
var latlng = new google.maps.LatLng(
position.coords.latitude,position.coords.longitude);
var myOptions ={
zoom:8;
center:latlng,
myTypeId:google.maps.MapTypeId.ROADMAP
};
var mayObj = document.getElementById("map_canvas");
var map = new google.maps.Map(mapObj,myOptions);
var marker = new google.maps.Marker({
position:latlng,
map:map,
title:"You"
});
}
function geoError(error){
alert('code: '+error.code +'\n' +'message: '+error.message +'\n');
}
$(document).bind("pageload",onMapLoad);
Here is the map.html file
<!DOCTYPE html>
<html>
<head>
<title>Map page</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role ="page" id="map-page">
<div id ="map_canvas" style =" width:300px; height:400px">
</div>
<script type="text/javascript" charset ="utf-8" src="js/map.js"></script>
</div>
</body>
</html>
I have been trying to get a simple example of the jquery-ui autocomplete to work. I have a controller setup to handle the query, and it returns the string that looks to be in order, but I am getting no suggestions showing up.
Here are the libraries I am including on that page
<link href="/Content/css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/coupon1.css" rel="stylesheet" type="text/css" />
<link href="/Content/Slider/slidder.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/el7r_notify.min.jq.js" type="text/javascript"></script>
<script src="/Scripts/ZeroClipboard.js" type="text/javascript"></script>
<script src="/Scripts/jquery.spellcheck.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery-func.js" type="text/javascript"></script>
<script src="/Scripts/Coupon.js" type="text/javascript"></script>
and here is the javascript and the form tags:
$(document).ready(function () {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/GetCompanyNames',
success: function (msg) {
response($.map(msg));
}
});
}
});
});
<div class="ui-widget">
<label for="tags">tags: </label>
<input id="tags" />
</div>
I get back a string response that looks reasonable from my controller:
"LTJRKK,
KTOYQQ,
GDADKT,
PVFOQT,
PVFOQT,
YNKYVS,
YNKYVS,
DQBOVU,
DQBOVU
"
this string seem to be the default naming that autocomplete is looking for.
But I get no joy at all. Any thoughts?
Your call to $.map is incorrect. You are not supplying the callback function to $.map, which is probably causing the problem.
In this case, you do not need to use $.map at all since your action returns data in the correct format. The following should work fine:
$(document).ready(function () {
$("#tags").autocomplete({
source: '/Home/GetCompanyNames'
});
});
Probably you need this:
$("#tags").autocomplete({
source: function(request, response) {
$.ajax({
url: "url",
data: request,
dataType: "json",
method: "post",
success: response
}
}
});
I am trying to set click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). As illustrated in the code below when I pass a variable to the handler function that is an integer it works but when I pass it a string it does not. Can anyone explain whey this is?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
//The Line Below works
$("#main").html('click test');
/*
//The Lines Below Do not work
//$("#main").html('click test');
var test = 'hello world';
//$("#main").html('click test');
*/
$("#main").trigger('create')
});
function test(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content"></div>
</div>
</body>
try this ::
var testParam = "'hello world'";
$("#main").html('click test');