I am trying to implement a full calendar on my web page, although when I navigate to the page where it should be, it simply does not display.
Here is my code:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/fullcalendar")
#{
ViewBag.Title = "Index";
}
<h2>Forecasts</h2>
<div id='calendar'></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekends: false // will hide Saturdays and Sundays
})
});
</script>
and here is what is in each of the rendering bundles:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
"~/Scripts/moment.js",
"~/Scripts/fullcalendar.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/fullcalendar.css",
"~/Content/site.css"));
Libary Versions:
jquery - 1.11.3
moment - 2.11.2
fullcalendar - 2.4.0
bootstrap - 3.0.0
Any help is greatly appreciated.
EDIT: Added a snippet of the rendered HTML code below. Note: all sensitive information has been replaced with '#'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - ###</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/Resources/logo.png" width="75" height="35" alt="Logo" />
</a>
</div>
<p class="nav navbar-text navbar-right">
User: ###<br />
Date: ###
</p>
</div>
</div>
</div>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<h2>#</h2>
<div id='calendar'></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekends: false // will hide Saturdays and Sundays
})
});
</script>
<hr />
<footer>
<p>© 2016 - #.</p>
</footer>
</div>
<script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
I managed to fix my own problem, I believe there was some sort of conflict with fullcalendar and bootstrap/respond.js.
In my shared views folder, these scripts were being rendered at the end of the page (which I didn't realise).
I removed these and it worked fine.
Below shows the rendering bundle and below that shows the scripts that are part of that bundle.
Scripts.Render("~/bundles/bootstrap")
RenderSection("scripts", required: false)
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
Related
i have a project formed by html, js, bootstrap, angularjs.
my site have many pages that all pages have a template.
now, i think header ,navigation , footer and etc isn't reusable and i should write those any time.
example in JSF :
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
I do not know if I can use Angular to do this.
Thank you for any help you receive.
this is sample of my page:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>main template</title>
<meta charset="utf-8">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/styles/responsive.css">
...
</head>
<body>
<script src="app/js/jquery-3.2.1.min.js"></script>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
....
<div class="super_container" ng-controller="showcaseController">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
....
</div>
</div>
<!-- Main Navigation -->
<div class="main_nav_container">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
</header>
//content of page like this
<div include-html="queryManagement.html"></div> // <<---- url clicked
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/elasticsearch/elasticsearch.angular.js"></script>
<script src="app/apps/app.js"></script>
.....
</body>
</html>
tip:
Pages are clicked on the bar, and they look like they are on the page.
But in any case, the layout page is loaded as a main page, which opens
the content of the selected page within itself.
i found solution with angularjs.
in layout page:
<html lang="en" ng-app="FirstPage">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
....
</head>
<body>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
.....
<div class="super_container" ng-controller="layout">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
......
<nav class="navbar">
<ul class="navbar_menu">
look ng-click <li>link 1</li>
look ng-click <li>link 2</li>
</ul>
</div>
</nav>
....
</div>
</div>
</header>
<!--<div ng-bind-html="contentUri"/>-->
<div id="ext-content" ng-include="contentUri"/> //<== use ng-include for content
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="app/apps/app.js"></script>
....
</body>
</html>
and then in js:
app.controller("layout", function ($scope, client, esFactory) {
$scope.contentUri = '';
$scope.loadContent = function (uri) {
$scope.contentUri = uri;
}
});
this worked for me
I am trying to show silder using ng-repeat. But picture and other things in controller don't appear.
Here is my js code
angular.module('starter', [])
.controller('slider', function($scope) {
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
$scope.pictures=[
{
img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg,
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630×tamp=1204139644&table=sgcengco",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
}
] ;
})
This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="slider" ng-app="starter" ng-controller="slider">
<ul class="slides">
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div><!--slider-->
why it doesn't appear?
You should include controller in your index.html page. and use ng-app="moduleName" and use ng-controller="yourController". say script.js your controller file.
<!DOCTYPE html>
<html data-ng-app='starter'> /* used your module name as ng-app name */
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script> /* load your controller file */
</head>
<body ng-controller="slider"> /* use your controller */
<h1>Hello Plunker!</h1>
<div class="slider">
<ul class="slides">{{pictures}}
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div>
</body>
</html>
PLUNKER Demo Link
I wrote a jQuery code that have all the pages code in one html file and I wanted to add a slider in the left side that will show the pages on.
It works in the home page but it's not working for the other pages? Nevertheless the code is similar. I don't know what to change or add to make working for all of the pages.
My HTML header:
<head>
<meta charset="utf-8">
<title>WELCOME</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.sidr.dark.css">
<script>
$(document).ready(function(){
{$(".p1").hide()};
$("#hide1").click(function(){
$(".p1").hide();
});
$("#show1").click(function(){
$(".p1").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p2").hide()};
$("#hide2").click(function(){
$(".p2").hide();
});
$("#show2").click(function(){
$(".p2").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p3").hide()};
$("#hide3").click(function(){
$(".p3").hide();
});
$("#show3").click(function(){
$(".p3").show();
});
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu1').sidr();
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu2').sidr();
});
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/mobile.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
And here is the home page slider (the one that works):
<!-- Home Page -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Here is the code for the slider for the one of the pages (It didn't work):
<!-- Page (2) -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Have you try to replace $ with jQuery . Or either you can check error on console .
This is for a Backbone + Marionette app.
Here's the offending code.
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
Here's the whole document.
<!DOCTYPE html>
<html>
<head>
<title>Gameq</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
//<![CDATA[
window.gon = {};gon.environment="production";gon.signed_in=true;gon.current_user={"created_at":"2013-11-21T23:53:28Z","email":"mikeborg85#gmail.com","id":1,"name":null,"provider":null,"uid":null,"updated_at":"2013-11-28T22:42:42Z"};gon.user_session={};
//]]>
</script>
<link href="/assets/application-66c0c36aa2fa6c5e2193b02c1ab6534b.css" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/overrides-5e3c108b1b6688f22c03c69f670b1925.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-86895940b8f231c1d77366a2444fecc5.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="bk8ryvwdGqulNZ5Utfu5Q4L3vJ9AjWzYnGgj/H9tMOw=" name="csrf-token" />
</head>
<div id="wrap">
<div id="global-nav-region" class="navbar"></div>
<div id="main-region"></div>
</div>
<div id="footer">
<div class="bottom-menu">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ul class="bottom-links">
<li>Privacy</li>
<li>Terms</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-2">
<ul class="bottom-icons">
<li><a class="fui-facebook" href="https://www.facebook.com/gameqme"></a></li>
<li><a class="fui-twitter" href="#fakelink"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
</html>
When I use any desktop browser it works, but when I test in iOS I get a "Reference Issue Can't Find Variable Gameq" error. It works fine in iOS when its hosted on localhost but not when its on heroku.
Why would Heroku cause this problem?
EDIT:
I've tried wrapping the offending code in document ready functions.
It turns out the problem was indeed only with mobile browsers. Moving the following code into app/assets/javascripts/application.js within the rails application fixed the problem.
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
I can't really explain what is different about loading within mobile devices that causes this error.
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.