Issue in my Javascript - javascript

I actually created a Javascript to get a plot of statistics of my assembled genome : here is the name of my Javascript: myscript.html
First, I had to convert my assembly.fa file in a JSON format object:
perl asm2stats.pl genome_assembly.fa > myoutput.json
Then, here is the usage gave in the github:
usage
The simplest plot requires a target div, an assembly span, a count of ACGT bases, the GC percentage and an array of scaffold lengths, however it is best to use the asm2stats.pl/asm2stats.minmaxgc.pl perl scripts described above to generate a richer, pre-processed input format. See the Danaus_plexippus_v3.assembly-stats.json file for a complete example using pre-binned data, basic usage is detailed below:
<div id="assembly_stats">
<script>
d3.json("Danaus_plexippus_v3.assembly-stats.json", function(error, json) {
if (error) return console.warn(error);
asm = new Assembly (json);
asm.drawPlot('assembly_stats');
})
</script>
Then I wrote:
<html>
<head>
<title>assembly stats</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/circle-plot.css">
<link rel="stylesheet" type="text/css" href="css/square-plot.css">
<link rel="stylesheet" type="text/css" href="css/table.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript" src="js/circle-plot.js"></script>
<script type="text/javascript" src="js/square-plot.js"></script>
<script type="text/javascript" src="js/table.js"></script>
<div id="assembly_stats">
<div class="my_class"></div>
<script>
d3.json("output_0035.json", function(error, json) {
if (error) return console.warn(error);
asm = new Assembly (json);
asm.drawPlot('assembly_stats');
asm.drawTable('my_class');
asm.toggleVisible(['asm-longest_pie','asm-count']);
})
</script>
</body>
</html>
and when I try to run it in my browser, I only get the circular plot, but I should also get a tabular representation as in the github exemple.
I'm not really familiar vith html code, does someone could tell me if I forgot somethingin the code to get this code? Here is the manual : github
Thanks for your help :)

Add a div Element inside the body and give it a class attribute:
<div class="my-class-name"></div>
After
asm.drawPlot('assembly_stats');
create the table with
asm.drawTable('my-class-name');

Related

How to fetch a particular div from one html file and place it in other html file using normal JavaScript?

I have two html files named homepage.html & dashboard.html at same level under same folder. I only want to fetch a particular div as my main project has a lot of divs.
Here's the code of homepage.html
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
<link rel="stylesheet" href="css/homepage.css">
</head>
<body>
<div class="homepage-side-menu">
<div id="homepage-home">
<label>Home</label>
</div>
<div id="homepage-dashboard">
<label>Dashboard</label>
</div>
</div>
<div id="homepage-main-view"></div>
<script src="js/homepage.js"></script>
</body>
</html>
And here's the code of dashboard.html
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<div class="dashboard-side-menu"></div>
<div id="dashboard-main-view"></div>
<script src="js/dashboard.js"></script>
</body>
</html>
I want to only fetch the content from the div class="homepage-side-menu"> and show it under <div class="dashboard-side-menu"></div> using simple JavaScript.
First you have to refer the file which you want to consume. then you use getElementByClass()
here is how you import the html file into another html
<link href="homepage.html" rel="import" />
or using javascript:
<script>
$(function(){
$("#addContentFromAnotherHTML").load("homepage.html");
});
</script>
and you can view something like this:
<body>
<div id="addContentFromAnotherHTML"></div>
</body>
something like this:
var classData = document.getElementsByClassName('homepage-side-menu');
Since html5 you can use imports
<link rel="import" href="/path/to/imports/stuff.html">
In older browsers the only way is using javascript (XHR, fetch, or Jquery .load
Using jQuery you could add this to dashboard.html :
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>
There are several ways in which you can share HTML template across several pages
1. jQuery - AJAX load() Method
$(selector).load(URL,data,callback);
The load() method loads data from URL and puts the returned data into the selected element.
Read more about it here
2. Server side inclueds using some server side programming languages
<?
php include 'header.php';
?>
Read more about it here
3. Using some build tools like gulp or grunt or webpack
https://www.npmjs.com/package/file-include-webpack-plugin
https://www.npmjs.com/package/gulp-file-include
4. Using HTML imports
HTML imports is an exciting technology that promises to change how we build websites. Imports allow you to include HTML documents within other HTML documents.
Read more about it here
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
https://blog.teamtreehouse.com/introduction-html-imports
This one is recomended but not works with older browser

Display javascript alert as toast

I'm sure this has been asked before but the solutions i found can't work in my case...
(One thing to know: I'm a complete beginner with java/android)
as the title says I'm trying to display a javascript alert as a toast but all the solutions i found use the WebChromeClient and the OnJsAlert problem is, im using WebViewClient and i have overridden a lot of it's stuff... some stuff that the chrome one doesn't support... So, my question is: Is it somehow possible to get the javascript alerts from a page so i can handle them with the normal WebViewClient? Thanks!
Here's a sample code that will work in your html page
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function clickFunction() {
M.toast({html: 'I am a toast!'});
}
</script>
<body>
<a onclick="clickFunction()" class="btn">Toast!</a>
</body>
Reference: https://materializecss.com/toasts.html
I suggest you use this light and simple ToastMaker library which is only 1KB in size.
$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
<button id="mybutton">Show Toast</button>
Check documentation for more examples.

EJS File Not Recognizing JavaScript File's Code

I am creating a website, I am using a NodeJS server. In my public folder I have a script named website.js and it has the jQuery code to give a console.log when the h1 is clicked. (Code Below). But when I click on the h1 in the browser it does not work. The file is loaded properly, gives no 404 error and my CSS stylesheet works fine.
Further Testing: I did a simple test to see if it would give back the text when I called the variable (test code below) it responds with: "" (two quotation marks) so it must not be recognizing it.
//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/javascripts/website.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<h1 id="testh1">TEST</h1>
</body>
</html>
You need to load jQuery before your script.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
You need to wait for the DOM to be ready before accessing any elements in it. You can either do it with the following code:
$(document).ready(function() {
$("#testh1").on("click", function(){
console.log("Clicked");
});
});
or by putting your <script>s at the bottom of the <body> instead of in the <head>.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
</body>
You're getting an empty string in your test code because your #testh1 element hasn't been loaded yet.

"$" Undefined when using jQuery in Visual Studio

I am trying to learn how to get JSON data using jQuery (using Visual Studio) but am hitting a runtime error in VS.
Error message: JavaScript runtime error: '$' is undefined
It seems that VS is just not recognizing jQuery. Alternatively, I have tried referencing the external jQuery library via their CDN but it did not resolve it.
Anyone have an idea why I am running into the error?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min"></script>
<script src="/js/default.js"></script>
</head>
<body>
<button onclick="canWeGetData()">Get Data!</button>
</body>
</html>
Default.JS:
function canWeGetData() {
var error = "Null data!";
var success = "Good data!";
$.getJSON("http://ip.jsontest.com/?callback=showMyIP", function (data) {
if (data == null) {
document.writeln(error);
}
else {
document.writeln(success);
}
});
};
Jquery isn't present.
Look at this line:
<script src="/js/jquery-1.10.2.min.js"></script> <!-- you missed the .js -->
Also, Check whether the path is correct. Or simply use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
doubt jquery is not present
try
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

Page load order problematic - styles not applying

I am building a simple web app for mobile platforms using jQuery Mobile and in that, I intend to read some data from an API sending it as JSON (which I have exposed from a server side Django based project), and then parses it using jQuery's mechanism and then I create list elements based off that data.
Now, I have the following index.html:
<html>
<head>
<title>Playism App</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
</head>
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->
<li>Dummy</li>
</ul>
</div>
<script type="text/javascript" src="js/gamesRenderer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>
</body>
</html>
Now, just to test I created that Dummy list element and it's rendering perfect but there is no styling applied to any of the new elements which I inject using .append() calls from jQuery. The code is as follows:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
}
and as can be seen in index.html, I am calling it at DOM ready but no jQuery mobile styling gets applied to these manually injected list elements whereas the Dummy element gets proper styling. I believe something is wrong with the order in which the elements are called.
Thanks in advance !
Don't get me wrong but this question was asked so many times, but here's a solution for you:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
You need to use:
$("ul#gamesList").listview('refresh');
When working with a dynamically added jQuery Mobile you must manually start markup enhancement process. Read more about it in this article.
One other thing, never use document ready with jQuery Mobile, they should not be combined. Read more about it here. Sometimes it works sometimes not. Basically when working with jQuery Mobile always use page events.
Your final javascript should look like this:
$(document).on('pagebeforeshow', '#gameContainer', function(){
renderGames();
});
function renderGames(){
for (var i = 10 - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
Working example: http://jsfiddle.net/Gajotres/5uPfM/
Seems the for loop make the css cannot load properly. Don't know what is the 'objCreated'.
Try to migrate the code here in JSFiddle.
Here is the code:
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<li>Dummy</li>
</ul>
</div>
</body>
$(document).ready(function(){
renderGames();
});
function renderGames(){
$("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")
}
The css seems works on the injected elements. The list-style is "none" because of the jQuery Mobile UI css works.
first apply css and see your css file are linked properly
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
then JS and see your js file are linked properly
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>

Categories

Resources