Ckeditor instance can't destroy?

Ckeditor instance can't destroy? - javascript

How i can destroy ckeditor instance?
i have a problem ckeditor instance double. i will to destroy it.
i will check code console.log(editorID) same in the images. I see the
textarea if i add chapter1 i have 2 instance is textarea0 and
textarea1. If i add chapter2 i have 3 instance is textarea0, textarea1
and textarea2. I think this code is not destroy instance. Can you help
me for this issue? Thank you.
I'm apologize. I'm not good at English.
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}
If i cut out ckeditor this code is work and attribute id textarea is
true. See the code example.
$(document).ready(function() {
//CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
//loadEditors();
});
/* var $editors = $("textarea.editors");
if ($editors.length) {
$editors.each(function() {
var instance = CKEDITOR.instances[$(this).attr("id")];
if (instance) { $(this).val(instance.getData()); }
});
}*/
/* function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>

try this
setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

I'm complete.
I add my code
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
and change function
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
$(document).ready(function() {
CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
loadEditors();
});
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>

Related

Tabs structure working in jquery 2.1.3, showing error in 3.6.0

Uncaught Error: Syntax error, unrecognized expression: [href=#technical]
tabs.js files
$(function() {
var tab = $('.tab a'),
content = $('.tab-content');
if ( location.hash ){
tab.filter('[href='+location.hash+']').addClass('active');
content.hide().filter(location.hash).show().fadeIn();
} else {
tab.filter(':first').addClass('active');
content.filter(':not(:first)').hide();
}
tab.click(function(){
if( location.hash ){
var id = location.hash;
} else {
var id = $(this).attr('href');
}
tab.removeClass('active').filter('[href='+id+']').addClass('active');
content.hide().filter(id).show();
});
$(window).bind('hashchange', function(){
tab.trigger('click');
});
});
tabs.php files
<div class="tab">
Overview
Features
Articles
Technical
</div>
<div id="overview" class="tab-content">
<p>echo..</p>
</div>
<div id="features" class="tab-content">
<p>echo..</p>
</div>
<div id="articles" class="tab-content">
<p>echo..</p>
</div>
<div id="technical" class="tab-content">
<p>echo..</p>
</div>
Why am I having such a problem? It works when I activate the old version, but when I try to update I have a problem. thank you

There appears to be a Quote issue. You have:
tab.removeClass('active').filter('[href='+id+']').addClass('active');
So the Selector become:
[href=#overview]
I believe you want to correct the selector to the following:
[href='#overview']
Consider the following.
$(function() {
var tab = $('.tab a'),
content = $('.tab-content');
if (location.hash) {
tab.filter("[href='" + location.hash + "']").addClass('active');
content.hide().filter(location.hash).show().fadeIn();
} else {
tab.filter(':first').addClass('active');
content.filter(':not(:first)').hide();
}
tab.click(function() {
if (location.hash) {
var id = location.hash;
} else {
var id = $(this).attr('href');
}
tab.removeClass('active').filter("[href='" + id + "']").addClass('active');
content.hide().filter(id).show();
});
$(window).on('hashchange', function() {
tab.trigger('click');
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tab">
Overview
Features
Articles
Technical
</div>
<div id="overview" class="tab-content">
<p>echo..</p>
</div>
<div id="features" class="tab-content">
<p>echo..</p>
</div>
<div id="articles" class="tab-content">
<p>echo..</p>
</div>
<div id="technical" class="tab-content">
<p>echo..</p>
</div>
this does not generate the error you reported.

Jquery 3.0 deprecated bind function
// your code
$(window).bind('hashchange', function(){
tab.trigger('click');
});
// change to
$(window).on('hashchange', function(){
tab.trigger('click');
});

Angular JS Accordion issue, sometimes it expands sometimes it wont

Javascript:
angular.element(document).ready(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
$scope.$apply();
});
HTML:
<div class="box1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Products</h3>
</div>
<div class="panel-body">
<ul id="accordion" class="accordion" >
<li ng-repeat="(key, categoryType) in categories">
<div class="link">{{categoryType.name}}<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li ng-repeat="item in categoryType[categoryType.name] track by $index" ng-click="getProductDetails(item)">{{item.Name}}</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Accordion sometimes expand sometimes wont, when I inspect the element nothing triggers no action at all, I am doing this on visualforce page.
Posting part of snippet from the entire code.
Thanks

Generate Random QR Code OnClick Using qrcode.js

I am using qrcode.js for generating qrcode. I want to generate random QR code every time I click into add new tab instead of add new qr code. I created a code for a random number but when I try to add onclick function it add new not to random it.
JSFIDDLE: https://jsfiddle.net/aice09/L8pp9336/
GITHUB: https://github.com/Ailyn09/project102/blob/master/qrcode.html
CODEPEN: https://codepen.io/aice09/pen/Ogqajr
$('#lithird').click(function() {
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active">List</li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>=
</div>
</div>
</div>

Try adding $('#qrcode').html(''); as the first item in the .click(function(){}
Like this:
$('#lithird').click(function(){
$('#qrcode').html(''); // <---Add this, which should clear it out on the next click
var qrcode = new QRCode("qrcode");
function makeCode () {
function randomNumber(len) {
var randomNumber;
var n = '';
for(var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
Codepen for full review

You were missing a function transfer_new defined in your onclick that was causing a JavaScript error.
function transfer_new() {
$('#qrcode').html('');
}
$('#lithird').click(function() {
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
#qrcode img {
margin: 15px;
border: 5px solid black;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active">List</li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>=
</div>
</div>
</div>

Just clear the content before generating new
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
$('#lithird').click(function() {
var value = randomNumber(13);
$("#qrcode").html("");
var qrcode = new QRCode("qrcode");
qrcode.makeCode(value);
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active">List</li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" >Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>
</div>
</div>
</div>

$(".generatetext").click(function(e) {
e.preventDefault();
var x = randomNumber(13);
$('#output').html('').qrcode(x);
});
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
#output{border:1px solid #eee;min-height:200px;width:200px;}
.container{padding:10px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
<form class="form-inline">
<div class="form-group">
<button class="btn btn-primary generatetext">Generate Random QR Code</button>
</div>
</form>
<div class="container">
<div id="output" class="text-center"></div>
</div>
</div>

$('#lithird').click(function() {
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active">List</li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>=
</div>
</div>
</div>

Error in d3.js using jQuery and dc.js

I'm new in programming, and I'm trying to implement a search button that can enable me to filter datas .
I have on my serv a JSON data at the url /tweets_complet . Then I want to get another JSON which depends on the input from the search button . Once I have the two JSON, I wrote some code, which I think is not important .
Here is the js code :
function main(){
$.getJSON("/tweets_complet", insererDonneesJson);}
function insererDonneesJson(data){
$('button').on('click', get_data);
function get_data() {
var cashtagg=$('#cash').val();
$.getJSON("/"+cashtagg, filter);
function filter(data2) {
//Tweets datas
var tweets = data;
var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
tweets.forEach(function(d) {
d["cleandate"] = dateFormat.parse(d["cleandate"]);
d["cleandate"].setSeconds(0);
});
//Create a Crossfilter instance
var ndx = crossfilter(tweets);
//Define Dimensions
var cleandateDim = ndx.dimension(function(d) { return d["cleandate"]; });
var sentimentDim=ndx.dimension(function(d) { return d["sentiment"]; });
var bnscoreDim=ndx.dimension(function(d) { return d["bnscore"]; });
var tickerDim=ndx.dimension(function(d) { return d["collection_name"];});
var newTickerDim = tickerDim.filter(cashtagg);
//Calculate metrics
var numTweetsByTicker=newTickerDim.group()
var numTweetsByDate = cleandateDim.group();
var numTweetsByBnscore = bnscoreDim.group();
var totalScoreByDate = cleandateDim.group().reduceSum(function(d) {
return d["sentiment"]*10/(numTweetsByDate.size());})
var all = ndx.groupAll();
var numTweetsBySentiment = sentimentDim.group();
//Define values (to be used in charts)
var minDate = cleandateDim.bottom(1)[0]["cleandate"];
var maxDate = cleandateDim.top(1)[0]["cleandate"];
//Datas cashtag
var datas = data2;
var dateFormatO = d3.time.format("%Y-%m-%d");
datas.forEach(function(d) {
d["Date"] = dateFormatO.parse(d["Date"]);
});
// Create a Crossfilter instance
var ndxO = crossfilter(datas);
// Define Dimensions
var dateDimO = ndxO.dimension(function(d) { return d["Date"]; });
var volumeDimO=ndxO.dimension(function(d) { return d["Volume"]; });
var scoreDimO=ndxO.dimension(function(d) { return d["Low"]; });
// Calculate metrics
var groupeVolumeO = dateDimO.group().reduceSum(function(d) { return d["Volume"]/10000000;});
var groupeScoreO = dateDimO.group().reduceSum(function(d) { return d["Low"];});
var allO = ndxO.groupAll();
// Define values (to be used in charts)
var minDateO = dateDimO.bottom(1)[0]["Date"];
var maxDateO = dateDimO.top(1)[0]["Date"];
var minVolumeO = (volumeDimO.bottom(1)[0]["Volume"])/10000000;
var maxVolumeO = (volumeDimO.top(1)[0]["Volume"])/10000000;
var minScoreO = scoreDimO.bottom(1)[0]["Low"];
var maxScoreO = scoreDimO.top(1)[0]["Low"];
//Charts
var timeChart = dc.barChart("#time-chart");
var pieChart= dc.pieChart("#pie-chart")
var numberTweetsND = dc.numberDisplay("#number-tweets-nd");
var hitslineChart = dc.lineChart("#chart-line-hitsperday");
var shareChart = dc.lineChart("#share-chart");
var volumeChart = dc.lineChart("#volume-chart");
numberTweetsND
.formatNumber(d3.format("d"))
.valueAccessor(function(d){return d; })
.group(all);
timeChart
.width(800)
.height(160)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(cleandateDim)
.group(numTweetsByDate)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xAxisLabel("Day")
.yAxis().ticks(8);
pieChart.width(350)
.height(330)
.dimension(sentimentDim)
.group(numTweetsBySentiment)
.colors(['red','black','green']);
hitslineChart
.width(600).height(330)
.dimension(cleandateDim)
.group(totalScoreByDate)
.x(d3.time.scale().domain([minDate,maxDate]));
volumeChart
.width(800).height(330)
.dimension(dateDimO)
.group(groupeVolumeO)
.x(d3.time.scale().domain([minDateO,maxDateO]));
// .y(d3.scale.linear().domain([minVolumeO,maxVolumeO]));
shareChart
.width(800).height(330)
.dimension(dateDimO)
.group(groupeScoreO)
.x(d3.time.scale().domain([minDateO,maxDateO]));
// .y(d3.scale.linear().domain([minScoreO,maxScoreO]));
dc.renderAll();
}}};
$(document).on('ready', main);
And the HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="./static/lib/css//bootstrap.min.css">
<link rel="stylesheet" href="./static/lib/css/keen-dashboards.css">
<link rel="stylesheet" href="./static/lib/css/dc.css">
<link rel="stylesheet" href="./static/css/custom.css">
</head>
<body class="application">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./">InTwittiv</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Description</li>
<li>Analyse</li>
</ul>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<!-- <a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span>
<div class="col-sm-10">
<input type="text" class="form-control" id="cashtag" placeholder="Cashtag">
</div>
</a> -->
<div class="col-sm-3 col-md-3 pull-right">
<div class="form-group">
<input id="cash" type="text" placeholder="Change Cashtag here" >
<button class="btn btn-sm btn-success">Chercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Tweet Volume
</div>
<div class="chart-stage">
<div id="time-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="chart-wrapper">
<div class="chart-title">
Sentiment repartition
</div>
<div class="chart-stage">
<div id="pie-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="chart-wrapper">
<div class="chart-title">
Sentiment repartition
</div>
<div class="chart-stage">
<div id="chart-line-hitsperday"></div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="chart-wrapper">
<div class="chart-title">
Total nb of tweets
</div>
<div class="chart-stage">
<div id="number-tweets-nd"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Volume (*10^6)
</div>
<div class="chart-stage">
<div id="volume-chart"></div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Share Price
</div>
<div class="chart-stage">
<div id="share-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<p class="small text-muted">Built by Keyrus Capital Markets</p>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="./static/lib/js/bootstrap.min.js"></script>
<script src="./static/lib/js/crossfilter.js"></script>
<script src="./static/lib/js/d3.js"></script>
<script src="./static/lib/js/dc.js"></script>
<script src="./static/lib/js/queue.js"></script>
<script src="./static/lib/js/d3.layout.cloud.js"></script>
<script src="./static/lib/js/keen.min.js"></script>
<script src='./static/js/graph2.js' type='text/javascript'></script>
</body>
</html>
When I run the serv, I can enter a value in the input (FB for example) and it works . However, from here, I can't change the "cash" value into something else like AAPL since I get the error
Uncaught TypeError: undefined is not a function
d3.js:2716
This line is :
var n = d3_time_numberRe.exec(string.slice(i, i + 4));
I have no clue about the reason of the issue since I'm not familiar with $ and buttons...
Any help would be appreciated :)

js slideshow classname property of null

I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is

Develop Reference

JavaScript is the programming language of the Web.

Ckeditor instance can't destroy? - javascript

try this setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

Related

Tabs structure working in jquery 2.1.3, showing error in 3.6.0

Angular JS Accordion issue, sometimes it expands sometimes it wont

Generate Random QR Code OnClick Using qrcode.js

Error in d3.js using jQuery and dc.js

js slideshow classname property of null

Categories

Resources