I am using Morris bar chart, I want to show bar:
This my Controller :
public function detail_grafik()
{
$row = $this->Tb_grafik_model->get_data()->result();
$iklan = $this->Tb_iklan_model->get_all();
$berita = $this->Tb_berita_model->get_all();
($row) {
$data = array(
'row' => json_encode($row),
'iklan' => $iklan,
'berita' => $berita,
'content' =>"frontend/detail_grafik"
);
$this->load->view('layout/frontend', $data);
} else {
$this->session->set_flashdata('message', 'Record Not Found');
redirect(site_url('frontend'));
}
}
This my view:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>assets/vendor/morris/morris.css">
<div style="width: 500px;height: 500px">
<canvas id="grafik"></canvas>
</div>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/jQuery/jQuery.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/raphael/raphael-min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/vendor/morris/morris.min.js"></script>
<script>
Morris.Bar({
element: 'grafik',
data: <?php echo $data;?>,
xkey: 'kd_spbu',
ykeys: ['kd_spbu', 'desa', 'nama_persahaan', 'alamat', 'pemilik', 'jumlah_nozzle'],
labels: ['kd_spbu', 'desa', 'nama_persahaan', 'alamat', 'pemilik', 'jumlah_nozzle']
});
</script>
</section>
</body>
</html>
This my eror :
raphael-min.js:10 Error: attribute width: Expected length, "Infinity"
can't show bar. help me..
Your xkey (kd_spbu) is also in ykeys. You need to remove it from from the ykeys.
Also none of the xkeys / ykeys are defined in your PHP code.
Related
I have commentBox.jsx file, with following code:
var CommentBox = React.createClass( {
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
</div>
);
}
});
In index.html, I want to render this component:
<div id="content"></div>
<script type="text/babel" src="scripts/commentBox.jsx"></script>
<script type="text/babel">
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>
But I'm getting error: "CommentBox is not defined"; Why this is not working?
If I will place all code in one file(commentBox.js) - it will work.
You need to declare var CommentBox; in its own script block above the other two. The scope of your variables is not shared between your script imports.
<div id="content"></div>
<script>
var CommentBox;
</script>
<script type="text/babel" src="scripts/commentBox.jsx"></script>
<script type="text/babel">
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>
You can also remove the var from your jsx file.
CommentBox is not declared. If you want it that way, then your codes should go like this:
<script type="text/babel">
var CommentBox = React.createClass( {
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>
So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container')
Here is my code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backbone Project</title>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/template" id="task_template">
<label>Task: </label>
<input type="text" id="task_desc"/>
<input type="button" value="Add Task" id="btn"/>
</script>
<div id="container"></div>
<script type="text/javascript">
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
</script>
</body>
</html>
The example is using jQuery to select DOM elements, add the library to your head...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!-- ... time passes ... -->
<script type="text/javascript">
// use jQuery onReady wrapper to ensure DOM has loaded before
// executing JS that might depend on DOM elements, and scripts to exist
$(function(){
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
});
</script>
Not sure what I'm doing wrong. The Masonry works, but the Infinite Scroll doesn't.
I'm trying to make the simplest Masonry/InfiniteScroll theme to build upon. I've tried a lot of different methods but I still get stuck.
<title>{title}</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}">
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script type="https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#container');
$content.masonry({itemSelector: '.item', columnWidth:300
});
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.item'
});
});
</script>
<style>
.item{width:300px;}
img{max-width:100%;}
</style>
</head>
<body>
<div id="container">
{block:Posts}
{block:Photo}
<div class="item"><img src="{PhotoUrl-500}" title="{PhotoAlt}"/></div>
{/block:Photo}
{/block:Posts}
</div><!--wall-->
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
</body>
</html>
Perhaps you could use this code if you want, this is the best one i have found so far:
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('.posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : "div#navigation",
nextSelector : "div#navigation a#nextPage",
itemSelector : ".entry",
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.posts').show(500);
});
</script>
<script>
$.fn.changebackgroundColor = function(msg) {
$("#perma").css("#000");
};
</script>
I have no issue with the infinite scroll with it and it's rather simple. You should just check the Selector and var names to put those that are in your theme. else than that, I think the problem could be the scripts you are using. Try to use different ones maybe. I used to have some similar to yours and I realized that they didn't even respond when i debugged my page. It could be a similar issue.
Please help me about this , I have a textfield in my page , and i want when i click on textfield or a button , elfinder open in a popup and when i choose a file that close and url of the file return in to the textfield , i able to use another filemanager if that works fine
<script type="text/javascript" src="../elfinder/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../elfinder/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/smoothness/jquery-ui-1.8.13.custom.css">
<script type="text/javascript" src="../elrte/js/elrte.min.js"></script>
<script type="text/javascript" src="../elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../elfinder/js/jquery.dialogelfinder.js"></script>
<script src="../elrte/js/i18n/elrte.en.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elrte/css/elrte.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/dialog.css">
<body>
<input type="text" id="fileurl" />
<div id="finder"></div>
</body>
see this url : https://github.com/Studio-42/elFinder/issues/395
Script :
$(document).ready(function() {
$("#editor").click(function(e) {
var elfinder = $('#elfinder').elfinder({
url: 'php/connector.minimal.php',
resizable: false,
getfile : {
onlyURL : true,
multiple : false,
folders : false,
oncomplete : ''
},
handlers: {
dblclick: function(event, elfinderInstance) {
fileInfo = elfinderInstance.file(event.data.file);
if (fileInfo.mime != 'directory') {
$("#editor").val(elfinderInstance.url(event.data.file));
elfinderInstance.destroy();
//$('#elfinder').dialog('close');
return false; // stop elfinder
}
},
destroy: function(event, elfinderInstance) {
elfinder.dialog('close');
}
}
}).dialog({
title: 'filemanager',
resizable: true,
width: 920,
height: 500
});
});
});
Html :
<div id="elfinder"></div>
<input type="text" id="editor" style="width:500px;">
in latest vesrion of elFinder:
You can use
getFileCallback : function(file) {
cosole.log(file);
}
Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.
Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'python',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/ErxMb/
I figured out how to do it using overlay.js by looking at the CodeMirror: Overlay Parser Demo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<style type="text/css">
.cm-highlightSearch {background: yellow;}
</style>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var keyword = 'hello';
CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
var searchOverlay = {
token: function(stream, state) {
if (stream.match(keyword)) {
return "highlightSearch";
}
while (stream.next() != null && !stream.match(keyword, false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay);
});
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'highlightSearch',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/HkjY7/