Prism.js Disturbs Ajax? - javascript

I have two simple Python code files hello.py and world.py.
print("hello")
print("world")
Based on this way, I wrote, using both Prism.js and Ajax, an HTML file helloworld.htm that formats and presents either hello.py or world.py at a time as follows.
<!doctype html>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js></script>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-coy.min.css>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function btnclick(_url){
$.ajax({
url : _url,
type : 'post',
success: function(data) {
$('#DIVID').html(data);
},
error: function() {
$('#DIVID').text('An error occurred');
}
});
}
</script>
<div style="width:50%;height:100%;position:fixed;top:0;left:0">
hello.py<br>
world.py
<div style="width:50%;height:100%;position:fixed;top:0;left:50%">
<pre class=line-numbers><code class=lang-py><div id="DIVID"><?php include('hello.py');?></div></code></pre>
Unfortunately, this HTML file does not work correctly with <code class=lang-py> in the last line. Though <code> instead of <code class=lang-py> solves this problem, I still want to use Prism.js to format the code files. How can I address this issue?
P.S. It seems that this problem is related to How to Re-Run Prism.js on AJAX Content and that Prism.highlightAll(); needs to be run together with Ajax, though I could not find the correct location of Prism.highlightAll(); yet.

Related

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

Why isn't this JQuery Color Picker plugin not getting included/detected in my webpage?

JSFiddle here.
I am trying to include this JQuery plugin (Github) into my a web page. But it seems to Not get included.
I checked this demo page, particularly their <head> tag to see what they have included, and so included JQuery, tinycolor.js, and jquery.colorpickersliders.js (the other scipts included like prettify.js and bootstrap.js don't seem to have an effect - I tested that by removing those <script> tags from their demo).
Then I tool the first example code snippet from their tutorial/guide here, and used it. The problem is that it does not seem to work. What am I missing?
index.php:
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.css" />
<script src="jquery-2.1.3.js"></script>
<script src="jquery-colorpickersliders-master/libraries/tinycolor.js"></script>
<script src="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
</head>
<body>
<span class="hsl-demo">...</span>
<script>
$(".hsl-demo").colorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
</script>
</body>
$(".hsl-demo").colorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/libraries/tinycolor.js"></script>
<link href="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.css" rel="stylesheet" />
<span class="hsl-demo">...</span>
EDIT:
The error in console is:
Timestamp: 4/28/2016 11:05:52 AM
Error: TypeError: $(...).colorPickerSliders is not a function
Source File: http://localhost/Tests/Test1/index.php
Line: 17
Line 17 is the beginning of the <script> tag in the <body> tag.
EDIT 2:
Try to upper case the 'c' in colorPickerSlider to make the code
$(".hsl-demo").ColorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
Note:Never try to include the libraries from github repo directly ,because the resource is read as text/html from github repo over the net. instead try consuming the resource from a CDN.
Live Demo # JSFiddle

HTML is not reading external Javascript file

I am trying to write a very simple HTML page that displays a message generated by a JS file. I am somewhat new to HTML / JS and I am certain there is something pretty simple I am missing, but I cannot for the life of me get the page to read the script. When I load the page, it is completely BLANK without any errors in the inspector.
This is the project folder structure:
-Project (folder)
--templates (folder)
----home.html
--src (folder)
----home.js
--styles (folder)
----home.css
Also, I'm pretty sure that my HTML page SEES the script, because when I remove or rename the script, I get an error in the browser's inspector telling me that it cannot find the script. So it SEES the script, it just is not running it for some reason.
Here is the code...
home.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/home.css"></link>
<script type="type/javascript" src="../src/home.js"></script>
</head>
<body>
<div id="bodytext"></div>
</body>
</html>
home.js:
(function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
})();
Could some generous soul out there please clue me in to what extremely simple mistake I'm making?
Thank You!
Value for type attribute should be text/javascript as follows:
<script type="text/javascript" src="../src/home.js"></script>
Your script is running before the DOM is completely done loading. If you put your <script> tag right before your closing body tag (</body>), it will run after the DOM is loaded, and you will be able to traverse the DOM like normal.
Value for type attribute should be text/javascript as follows
enter code here
ALong with this you will have to change your java script code as follows, so that script gets executed only when page is completely loaded & document object is availabe.
window.onload = function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
};
What worked for me was adding charset="utf-8" to my css link as well as my javascript script (for me, both did not work). Example:
<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8"></link>
<script src="javascript/script.js" charset="utf-8"></script>

Avoid Render Blocking by plugins which have both css and js dependencies

I am using a jQuery plugin it has plugin.css and plugin.js as dependencies and code is in script.js. I cant have plugin.js and script.js merged because i am using plugin only on one webpage of my website.
In order to make sure plugin.css is loaded before execution of plugin.js and script.js, normally I have no option but to have plugin.css in <head> which causes render blocking(until all resources in head are loaded,
browser doesnt render html).
Normal Way: Having CSS in <head> and JS before </body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="/js/plugin.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
Proposed Way: Load CSS and JS via ajax calls and inject them when all of them are loaded, using jQuery $.when promise
<!DOCTYPE html>
<html>
<head>
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script class="load-plugin">
$(document).ready(function(){
var loadPlugin = {
css : $.ajax({ url: $(".jquery-plugin-css").data("src") }),
js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
};
var scriptJs = $.ajax({ url: $(".script-js").data("src") });
$.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
loadPlugin.css.done(function(data){
$(".jquery-plugin-css").html(data);
});
loadPlugin.js.done(function(data){
$(".jquery-plugin-js").html(data);
});
scriptJs.done(function(data){
$(".script-js").html(data);
});
});
});
</script>
<style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
<script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
<script class="script-js" data-src="/js/script.js"></script>
</body>
</html>
This improved my first render time from 3.4 secs to 2.4 secs and total page load time from 8.5secs to 8secs.
But this has some limitations:
Publicly hosted urls cant be used because the urls inside the plugin files like background-images inside css files if mentioned relative to their directory then the path changes after code is pasted into html.
As the injected code is not part of the source files or external scripts they cant be debugged in developer tools.
This way of lazyloading plugins has pros and equal amount of cons. Can anyone suggest is it worth it to do it this way or any better way to do things.
What I would try is:
Combine the JS files so that the dependent code is after plugin.js
Insert a script at the bottom of the page to dynamically load the CSS first and the combined JS second. If you need example code, you might look at https://github.com/filamentgroup/loadJS/ and https://github.com/filamentgroup/loadCSS/.
Using this approach, neither the CSS nor the JS blocks rendering. The CSS is appended to the DOM, so there should be no problems with relative URLs.

Syntax error in JavaScript using Dreamweaver

I have a JavaScript code in Dreamweaver, but it tells me there's a syntax error on line 2. Where's the problem?
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="scripts/rates/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
the same script works on a site ak-invest.com and in the new website does not work http://69.73.130.182/~akinvest/index.php/en/kembimi-valutor
I am not seeing any syntax errors in the code presented. Are you sure that jquery is loading? Try adding a simple script to replace your current one:
alert($);
This should alert something if jquery is loaded.
You could also check in the html panel of firebug to make sure the libary is being loaded.
Another solution would be to load jquery from a known source such as the Google CDN so that you know you have it.
Example:
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
Change
<script src="scripts/rates/jquery-latest.js"></script>
to :
<script src="scripts/rates/jquery-latest.js" type="text/javascript" />
Older versions may not detect the jquery way of accessing variables and elements. You can ignore those errors and see if your script actually works. Did your script works well, despite of those errors?
Alternatively try changing adding type attribute as posted by Mateusz.
<script src="../scripts/rates/jquery-latest.js" type="text/javascript" />
or
<script src="./scripts/rates/jquery-latest.js" type="text/javascript" />
Your syntax error is almost certainly going to be in the included js file. And it looks like you didn't write it (it's a jquery library, right?) so the likelihood of there really being a syntax error in the file is rather low.
Therefore, what is actually happening is the file isn't at the path you're looking for it (it's a relative URI), and a HTML 404 page of some sort is being parsed as JavaScript instead of the JavaScript file itself.
Most probably.

Categories

Resources