JqPlot - Does not show simple graph - javascript

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).

Related

How properly insert JavaScript code in to PHP?

I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />

Simple JQuery Drag and Drop not working at all

I am new to JQuery stuff ,but this is ridiculous ,i cant do drag and drop work
.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Test</title>
</head>
<body>
<span id="drag">Drag me</span>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</body>
</html>
my drag js file
$(document).ready(function() {
$('#drag').draggable();
});
By the way, do i need to have JQuery UI to make drag and drop stuff?
Thank you
You should include the libraries in the correct order:
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Your custom code (drag.js) should be last, after jquery and jquery-ui have been loaded.
The draggable() function requires jQueryUI to work. After including jQueryUI your code works fine.
$('#drag').draggable();
http://codepen.io/tejzpr/pen/raXqKz
I would use cdn to save on speed and resources, and also be sure that you have a working copy. The order was probably your issue, however, as people mentioned above.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
You should first load UI script and use it after.
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Important: don't forget jQuery 2.* browser compatibility:
https://jquery.com/download/#jquery-2-x
It doesn't support IE 8 or earlier!

failed to access script from master page , but from Content page is all correct

Weired because it shouldn't matter how things done in Server side.
Master Page:
<head runat="server>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="PageHeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ContentPlaceHolderID="PageHeadPlaceHolder" Runat="Server">
<link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" />
<script src="prettyPhoto315/js/jquery.prettyPhoto.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
</script>
</asp:Content>
though client finds jquery-2.0.2.min.js it fails to execute $(document).ready...
saying '$ reference is not defined'.
I Tried:
when i move the <script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script> to the content page... everything works right.
using <script src="~/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
the script is not found at all.
same happens if i move a <link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" /> to the master page, the page does not show the specific style sheet.
when checking the output HTML, it all seem correct in the right order.
i uploaded the output HTML to http://pastebin.com/ULi228BF
please help asap. thanks.
Do it declaratively in the master page by dragging the jQuery files from Solution Explorer window to the code view of the mark-up. Then see if it works and compare the two versions of the paths.
GOT IT! OMG KNEW it is something that shouldn't matter
IrishChieftain post got me to test the pages again, and found the problem!
Apperantly the jquery.magnifier.js library i used is incompatible with jQuery 1.6+
are is breaking jQuery script for some reason overriding
therefore:
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script type="text/javascript"> $(document).ready(); </script>
wont work...
while:
<script src="jquery/jquery-1.3.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(); </script>
does!
hope someone can make use of this info.
and thanks for the help.

This HTML fails to run the alert() script. Why? Yes. jquery is installed in the correct relative location

The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:

Working with Handlebar.js

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

Categories

Resources