Here is working example https://www.codeply.com/go/bp/lxa0FF9yhw# that I need to work in one html file.
I am using this template to merge HTML, Css and javascript:
<html>
<head>
<style type="text/css">
CSS goes here
</style>
<script type="text/javascript">
JS goes here
</script>
</head>
<body>
HTML goes here
</body>
</html>
But as a result I see all lines of table instead of pages.
Is this a problem with Bootstraping? I am including jQuery and javascript
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
I still see all lines in a result. I tried this code in https://jsfiddle.net/tfyqwLkr/. It also shows all lines of table.
How to include all required elements in this case?
Try placing your Javascript just before the body end tag: </body>.
You might be calling DOM elements that haven't been parsed yet.
<html>
<head>
<style type="text/css">
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML goes here -->
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
<script type="text/javascript">
// JS goes here
</script>
</body>
</html>
EDIT: After posting your code, looks like you are trying to call size(), a deprecated method since jQuery 3.0.
Note: This method has been removed in jQuery 3.0. Use the .length property instead.
That throws some errors in the console. Change children.size() to children.length.
Check the updated Fiddle. (Line 23)
Related
I am using servlets. Now I have this in the head
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
$('#navigation').load('Navigation');
});
</script>
<script src="script.js"></script>
I have a navigation where I will put the result of the servlet in. It seems like that the CSS just counts for this HTML file and not for the HTML that is given through the servlet. Thats a problem, because I have a dropdown menu and that doesnt work if my CSS isn't considered. But my servlet does not have the head tag, of course. How can I make the CSS work for the HTML code of my servlet?
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">
I'm really new to Javascrip/Jquery/Jqplot and I'm trying to learn by myself.
Then I have some questions,
Is this code enough to show a simple graph? Because it's not working, it shows a blank page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.ohlcRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="js/customCandlestick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
document.write("<p>It works!!!</p>");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>
i used this library too for a project, its really good!.. i just check the example that you post it and i found out what it was causing you an error, you only need to change the document.write sentence, if you use for example the console.log function it will work.
ex.
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
Another thing important is that this library uses jquery, so you will need to reference all the js files of jqplot after the jquery reference to avoid the JQuery no defined error.
I hope it helps!
You need to remove
document.write('<p>It works!!!</p>');
Or replace it by
document.write('<p>It works!!!</p><div id="chart1"></div>');
Your document.write statement is replacing the body part of your html page by what you have mentionned (here '< p >It works!< / p >).
Thus your html page isn't containing any div with "chart1" id anymore.
As you specify to jqplot to plot your graphic in a div identified with "chart1" (and document.write statement has erased it) it is a normal behaviour not to be able to see your graphic.
PS : It is not compulsory to include all off jqplot plugins to draw your graph. If it will not became more complicated, I suggest you to include only "css/jquery.jqplot.css" and "js/jquery.jqplot.js".
For more complicated graph, include only necessary plugins (for example "js/jqplot.dateAxisRenderer.js" if you need to work with date axis).
Edit
Please see working jsFiddle here, try to play with the two "document.write" lines (try to comment and uncomment them).
I was actually trying to find some tutorials on Handlebar.js & I found this http://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial
But it is not actually working as expected.
What I am doing is I have an index.html file,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Messing with Handlebars</title>
</head>
<body>
<script id="ajax-comment" type="text/x-handlebars-template">
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
</script>
</body>
</html>
and an app.js which contains the code.
var source = $("#ajax-comment").html();
var template = Handlebars.compile(source);
var data = {
name : "Jack",
date : "12/04/12",
comment : "This is a really awesome tutorial. Thanks."
};
$("ul").append(template(data));
But all I am getting is a blank page. Any mistake I am making here? Detailed explanations would be helpful.
"ul" element doesn't exist, you must append it to something which actually exists.
just add a <ul></ul> somewhere in the body.
fiddle here
You might want to check the answer to this question
Seems like the jquery function was not able to access the element since the DOM wasnt loaded before the call was made. I tried some more combinations after the initial changes of calling the app.js code(without wrapping it inside a function) only after the DOM was loaded which worked.
For example I moved the script call just before the </body> which worked too.
... <script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
It also helped me to know whether we use HTML or XHTML as our document type, to understand this problem better.
try putting ref to your external JS at bottom, just above the closing body tag
eg
<body>
<ul></ul>
<!-- last thing on the page-->
<script src="app.js" type="text/javascript"></script>
</body>
this seemed to have solved it for me
I have an h2 element with an id of title and I have the following script:
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
The background-color is not changing though and I can't figure out why?
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$("#title").css("background-color","red");
$("#myTable").tablesorter();
}
);
</script>
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
You also have a syntax error in your jQuery function at the closing brackets. They should be
$(document).ready(function(){
$("#title").css("background-color","red");
});
If that still does not fix your problem, then put an alert in there like this...
$(document).ready(function(){
alert("Howdy!");
});
If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.
It seems you've made another typo:
<title>Table Sorter</table>
^^^^^
Replace table with title:
<title>Table Sorter</title>
Can you get it working without jQuery? Try:
document.getElementById("title").style.backgroundColor = "#F00";
instead of your current script. If this does not work, check that you have well-formed HTML.
UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery
Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
});
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.
Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>
When I removed the above, it worked. But I don't know why?