I am new to jquery and javascript coding, and I am using the following code to read data from a csv file and use that to form a wordCloud using jquery.
<!DOCTYPE html>
<html>
<head>
<title>jQCloud Example</title>
<link rel="stylesheet" type="text/css" href="jqcloud.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jqcloud-1.0.4.js"></script>
<script type="text/javascript" src="csvjson.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax("http://localhost:8000/wordCloud.csv", {
success: function(data) {
console.log('Obtained csv file');
var jsonobject = csvjson.csv2json(data);
$(function() {
console.log('creating cloud');
$("#example").jQCloud(jsonobject);
});
},
error: function() {
console.log('Not Obtained');
}
});
});
</script>
</head>
<body>
<div id="example" style="width: 550px; height: 350px;"></div>
</body>
</html>
I am getting a blank page when i am running it. It is not even displaying any console statements.It's not executing the function at all. What might i be doing wrong. Or is there any other way to generate a word cloud obtaining the 'word'and'frequency' data from a csv file.
Related
I'm trying to make make an include of html2canvas and jQuery screenshot the div #trump. When calling the html2canvas functions in the my.js file, there is no output whatsoever in the console which leads to me being unable to find the bug :(
Here is my head in index.html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/uikit.min.js"></script>
<script type="text/javascript" src="html2canvas.js" defer></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript" src="my.js" defer></script>
</head>
Here is my.js:
function export(){
document.getElementById('trump').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly.
html2canvas( [ document.getElementById('trump') ], {
onrendered: function(canvas) {
document.getElementById('trump').parentNode.style.overflow = 'hidden';
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800, height=800");
$(document).append(canvas);
//Canvas2Image.saveAsPNG(canvas);
}
});
}
$(document).ready(function () {
$('#submitter').click(function () {
var but = $('#submitter');
but.text('Hi!');
export();
});
});
Any help would be greatly appreciated! There is no output in the console but all of the files look like they are showing up correctly within Chrome dev tools. The defer tag was added afterwards as an attempt to fix but no cheerios.
Thank you!
The export() function was predetermined which was why it was not being called
I'm trying to display a graph from json film went from NEO4J db. But it shows a blank page and in the console it shows an error. Here output:
Here the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/styles/vendor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<script src="lodash.js"></script>
</head>
<body>
<div class="alchemy" id="alchemy"></div>
<script type="text/javascript">
alchemy.begin({
dataSource: "../result.json",
dataType:'html',
nodeCaption:'name',
nodeMouseOver:'name',
cluster: true,
clusterColours:["#1B9E77,#D95F02,#7570B3,#E7298A,#66A61E,#E6AB02"]
})
</script>
</body>
</html>
I dont think that's the way to initialize the library. modify your script to
<script type="text/javascript">
var config ={
dataSource: "../result.json",
dataType:'html',
nodeCaption:'name',
nodeMouseOver:'name',
cluster: true,
clusterColours:["#1B9E77,#D95F02,#7570B3,#E7298A,#66A61E,#E6AB02"]
};
alchemy = new Alchemy(config);
</script>
Referencce
http://graphalchemist.github.io/Alchemy/#/examples
It looks like you are not loading the alchemyjs. you are loading only the dependency for alchemyjs. Include both the scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
I'm writing Qunit tests for the following html file:
var PinPointService = {
doAjax: function(doAjax_params) {
//do some stuff
}
//a bunch more variables and functions
}
The test I'm writing in a seperate file:
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
The error I get:
PinPointService is not defined
My main js file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pinpoint Test</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
<script type="text/javascript" src="C:\path\to\jshamcrest.js"></script>
<script type="text/javascript" src="C:\path\to\core.js"></script>
<script type="text/javascript" src="C:\path\to\integration.js"></script>
<script type="text/javascript" src="C:\path\to\jsmockito-1.0.4.js"></script>
<script type="text/javascript" src=""></script>
<script src="C:\path\to\pinpoint.html"></script>
<script src="C:\path\to\pinpointTest.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Is there something additional I have to do besides including pinpoint.html in my main js file? I'm new to JavaScript, so I think I could be missing some fundamentals of how the language works in contrast to Java which I'm very comfortable with.
Make sure you import the file where
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
is located, after you imported PinPointService.
So in your html file it should be something like
...
<script src="C:\path\to\pinpointTest.js"></script>
<script src="file_containing_the_code_above"></script>
...
the html page is read and included from top to bottom so if you have not included the pinpointTest file yet, you can not use anything inside it.
Please help i know this is a noob question but I stuck on this for several days.Thanks in Advance.
This is my Jquery when I open JS cosole it shows me error $ is not definded.
Why my Jquery code doesne't work. Am i properly connected to Html?
$(document).ready(function() {
$('#container').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('#container').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('#container').click(function() {
$(this).toggle(1000);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="dev.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>
Since your script file uses jQuery, ti should be added after jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dev.js"></script>
This question already has answers here:
jQuery Mobile loading message
(11 answers)
Closed 7 years ago.
I am building a basic jqm page and at the end of the page I am getting a big tag with the text "loading". I have seen a lot of answers but no one working for me. I have this html code:
<!DOCTYPE html>
<html>
<head>
<title>StackMob JS SDK Examples</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_migrate.js"></script>
<script type="text/javascript" src="js/jquery_mobile.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.7.0-bundled-min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$.mobile.hidePageLoadingMsg();
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<input type="button" value="bbbb" id="bb">
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
</html>
and this in my main.js file:
$(window).load(function(){
$.mobile.hidePageLoadingMsg();
});
jQuery('document').ready(function() {
$.mobile.hidePageLoadingMsg();
jQuery('#bb').click(function(){
$.mobile.hidePageLoadingMsg();
});
});
Nothing is working! Thanks!
You need to do it during mobileinit event, like this:
<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.mobile.loadingMessage = false;
})
</script>
One more thing, this must be done before jQuery Mobile is loaded, like this:
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.mobile.loadingMessage = false;
})
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
Here's an jsFiddle example: http://jsfiddle.net/Gajotres/RwRx9/
More about this can be found here: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
If you want to completely remove the loading message, there is a global property to set that
$.mobile.loadingMessage = false;
If you want to do it in page level. Bind it inside the "mobileinit" function.
$("your page").on("pageinit", function(){
// hide here
});