I'm really new to web development and I'm kind of lost here.
I'm using Bootstrap, and I'm trying to display java code (in a file called test.java) that's on my local machine on the webpage. The file is displayed, but it doesn't get syntax coloured. Please help!
I have in the header:
for prettify:
<link rel="stylesheet" type="text/css" href="../localfile/prettify.css"/>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="../localfile/prettify.js"></script>
and for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And this is the script
<script type="text/javascript">
$(document).ready(function() {
jQuery(function($) {
$.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
prettyPrint();
}, "text");
});
});
</script>
and this for the div:
<div class="panel-body" >
<pre id="sourceCodeDestination" class="prettyprint linenums lang-java">
</pre>
</div>
I finally figured out what the problem was after reading the answer to this question, here.
So, I changed the script to this and it works just fine. I just removed the prettyprinted class before calling prettyPrint.
<script type="text/javascript">
jQuery(function ($) { $.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
$('#sourceCodeDestination').removeClass("prettyprinted");
prettyPrint();
}, "text");
});
</script>
Related
I am trying to build an HTML page with Adaptive Card Designer.
I am following the instructions, using the CDN approach per this documentation:
https://www.npmjs.com/package/adaptivecards-designer
Any input is appreciated. Thanks a lot! :)
It is throwing the following error:
Uncaught ReferenceError: ACDesigner is not defined
My HTML file is the following:
<html>
<head>
</head>
<script src="https://unpkg.com/adaptivecards#latest/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptive-expressions#4/lib/browser.js"></script>
<script src="https://unpkg.com/adaptivecards-templating#latest/dist/adaptivecards-templating.min.js"></script>
<script src="https://unpkg.com/markdown-it#8.4.0/dist/markdown-it.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let hostContainers = [];
let designer = new ACDesigner.CardDesigner(hostContainers);
designer.assetPath = "https://unpkg.com/adaptivecards-designer#latest/dist";
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor#0.17.1/min/vs' } });
require(['vs/editor/editor.main'], function () {
designer.monacoModuleLoaded();
});
designer.attachTo(document.getElementById("designerRootHost"));
};
</script>
<body>
<div id="designerRootHost"></div>
</body>
</html>
monaco-editor has impacts on the process of loading modules, please change the order and load adaptivecards-designer first
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
I am trying to fire an event whenever a user clicks / declicks a radio button
Searching on stack overflow and trying out my own example on jsfiddle works.
However the same thing in a MOzilla Browser version 31 or Google chrome it fails - not sure why
I am using JQuery 2.1.1
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/>
</body>
<script>
alert("1");
$(".rg").change(function () {
alert("yahoo");
});
alert("2");
$("#r1").change(function () {
alert("yahoo");
});
</script>
</html>
May be your jquery-2.1.1.min.js path is wrong, check you path and include it. If you don't know the path or you have not downloaded the library then you can include like this :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Also put your jQuery code inside ready function like this :
$(document).ready(function(){
$(".rg").change(function () {
alert("yahoo");
});
$("#r1").change(function () {
alert("yahoo");
});
});
You are not making function in a proper way. Make it this way.
$(function(){
$(".rg").change(function () {
alert("yahoo");
});
})
$(function(){
$("#r1").change(function () {
alert("yahoo");
});
})
Do you got any error in your console ?
If there is any error in your browser console post here
Try to put your code in $(document).ready();
Change the script src and link href to following it will work fine:-
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
I have to reference my two html documents in divs to a primary html and I can't get my other htmls to render.
This is my script in the head:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
These are the divs in the body:
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
Move your script to the header:
<script type="text/javascript">
$(document).ready(function(){
$('#left').load("left.html");
$('#right').load("right.html");
});
</script>
Then ensure that your relative URIs are correct. Are both left.html and right.html in the same folder on the server as the page that requires them?