This is my first attempt with using bower packages and NPM. I am trying to use Gridstack.js - link.
What am I missing? Any help or input would be greatly appreciated.
Here is the tags for my html:
<head>
<link type="text/javascript" href="bower_components/gridstack/dist/gridstack.min.css" />
<script type="text/javascript" src="bower_components/gridstack/dist/gridstack.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="bower_components/lodash/dist/lodash.min.js"></script>
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
<script>
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
</body>
Related
Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed
I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html
You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki
I am new to javeScript and I am creating a website with slideshow feature. I want "when the user click the forward or backward button, the slideshow URL will change to "slideshow/img#1, slideshow/img#2, etc", but it is still a single page application." Can anyone give some idea? Thank you.
Note: This is not a homework or any academic work, but just my personal project.
There is a slider in angularjs which can be used by injecting ui.bootstrap.
Working plunker: https://plnkr.co/edit/aTl515SYqSawOk6f97RM?p=preview
script.js
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
</html>
I am attempting to run an method after the DOM is ready, but cannot access the element. It is coming back as undefined. The code is below. I know the element is accessible because code ran after the DOM elements processes fine. The alert in the separate js file come back undefined. The alert at the bottom of the html returns the correct value.
HTML
<%# Master Language="C#" inherits="test.master"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>test</title>
<link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('<%= varthing %>'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="hdr_toolslct_cursys_payer" runat="server"></span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="hdr_toolslct_name" class="hdr_toolslct_name" runat="server"></span>!
Thing1:
<select id="hdr_toolslct_gp" runat="server">
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="nav" class="nav" runat="server">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
<asp:ContentPlaceHolder id="cntnt_phldr" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help.
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Javascript
function ajaxStuff(vartest) {
alert($("#ftr").html());
}
ViewSource
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>
test
</title><link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('no'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="ctl00_hdr_toolslct_cursys_payer">Mcaid</span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="ctl00_hdr_toolslct_name" class="hdr_toolslct_name">Name Name</span>!
Thing1:
<select name="ctl00$hdr_toolslct_gp" id="ctl00_hdr_toolslct_gp">
<option selected="selected" value="OP1">Option 1</option>
<option value="OP2">Option 2</option>
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="ctl00_nav" class="nav">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Please bear in mind that the reason you're getting undefined is because the function ajaxStuff is being invoked immediately. If you use any of the following forms, it should work as expected. (), or (arguments) invokes the function right away:
$(ajaxStuff);
Or
$(document).ready(ajaxStuff);
Or
$(function() {
ajaxStuff('no');
});
Or
$(document).ready(function() {
ajaxStuff('no');
});
JS FIDDLE DEMO
Live demo
HTML
<div id="test">hello</div>
JS
$('document').ready(function(){
alert($('#test').html());
});
You forgot the jQuery ready event:
http://api.jquery.com/ready/
Your code might work with:
$( document ).ready(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
Or
$(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
in the JavaScript part.
Demo
UPDATE:
As this is not working, you should try to analyze the DOM that is generated:
$(function() {
// Handler for .ready() called.
console.log($("body").html());
});
Maybe there IDs are changed? Or something like that? You tell us :D
I m trying to make a slider using jquery..i downloaded the cycle plugin for my slider and included that too in my file...i m using 7 pic for my slider.. below is the code...please tell what is the problem
<!DOCTYPE html>
<html>
<head>
<style>
#hero{width:200px;height:220px;display:block;position:relative;margin:auto;border-style:solid;border-color:grey;}
#slider{width:200px;height:200px;display:block;position:absolute;}
#next{display:block;float:right;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
#prev{display:block;float:left;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
</style>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
timeout: 2000,
next: '#next',
prev: '#prev'
});
</script>
</head>
<body>
<div id="hero">
<div id="prev">
<img src="right.jpg">
</div>
<div id="next">
<img src="left.jpg">
</div>
<div id="slider">
<div id="1"><img src="1.jpg"></div><br><br>
<div id="2"><img src="2.jpg"></div><br>
<div id="3"><img src="3.jpg"></div><br>
<div id="4"><img src="4.jpg"></div><br>
<div id="5"><img src="5.jpg"></div><br>
<div id="6"><img src="6.jpg"></div><br>
<div id="7"><img src="7.jpg"></div><br>
</div>
</div>
</body>
</html>
Have you tried to change the position of plugins? Shouldn't <script type="text/javascript" src="jquery-2.1.0.min.js"></script> be before <script type="text/javascript" src="jquery.cycle.all.js"></script>?