I am trying to make popover using Angularstap.js .I read documentation from here
http://mgcrea.github.io/angular-strap/##popovers
But my pop over not display on click can you tell me where I am doing wrong .
here is my plunker
http://plnkr.co/edit/Cp7wrpeh8SS4oY5GGRfY?p=preview
getting error :
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>
<script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>
<script src="https://dl.dropboxusercontent.com/s/qhgexynaog5ul5l/popover.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" title="this" data-content="{{popover.content}}" data-template="pop.html" data-animation="am-flip-x" bs-popover>Custom Popover
</button> </body>
<script>
var myapp =angular.module('myApp', ['mgcrea.ngStrap']);
</script>
</html>
Actually, the documentation have already mentioned about the template attribute, but it quite hard to notice:
It should be a div.popover element following Bootstrap styles conventions like this.
Therefore your pop.html should have the same structure like this:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<ul class="list-group">
<li class="list-group-item" ng-click="hidePopover();editRowName(student)">Edit</li>
<li class="list-group-item " ng-click="deleteRow($index)">Delete</li>
</ul>
</div>
</div>
Example Plunker: http://plnkr.co/edit/sKApS5eC0NCv1PLsQKZx?p=preview
Related
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
So, I'm trying to connect to my Parse Server using Javascript.
Problem is I keep getting that parse is undefined.
I included the unpkg resource file.
I also manually downloaded that file and saved it in a parse.js file and made a reference it on my site.
Here's the code for my website
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/login-css.css">
<link rel="stylesheet" href="css/backend.css">
<title> iCheckIn Backend</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-EJG_73OiPF-fZEu-QkEUwRoq75Ew60E"></script>
<script src="https://unpkg.com/parse/dist/parse.js"></script>
<script src="js/parse.js"></script>
</head>
<body>
<div id="sideBar">
<div id="standName">
<span id="pageName">iCheck In </span>
</div>
<div id="avatar">
<div id="admin">
<img src="img/user.png" id="img"><br>
<span id="welcomeSpan">Welcome, Admin.</span> <br><br>
</div>
<div id="menu">
<button class="pure-button menuBtn" onclick="CreateUser()">Map</button>
<button class="pure-button menuBtn" >List</button>
<button class="pure-button menuBtn " >Add Location</button>
<button class="pure-button menuBtn" onclick="CreateUser()" >Add Person</button>
</div>
</div>
</div>
<div id="fullContentDiv">
<div id="topDiv"></div>
<div id="fullCarContent">
<div id="carModels">
<span id="span"> All Tracking Records</span>
</div>
<div id="showSearchDiv">
<hr>
<span id="entrySpan">Show Entries</span>
<div id="search">
<form class="pure-form">
<button class="pure-button" >Search</button>
<input class="pure-input-1-4">
</form>
</div>
</div>
<div id="map">
</div>
</div>
</div>
<footer>
Copyright © 2017 Hugo Monteiro
</footer>
</body>
</html>
And the simple function I'm using is
function CreateUser(){
var Parse = require('parse');
Parse.initialize("mykey");
Parse.server('myurl');
var TestUser = parse.Object.extend("TestUser");
var testuser = new TestUser();
testuser.set("name","Hugo");
testuser.save(null,{
sucess: function(testuser){
alert("Object Created!");
},
error: function(testuser,error){
alert(error.message);
}
});
}
I've already done some searching and I'm unable to come across the solution.
Thanks in advance !
I can't get my bootstrap tooltips to work, I've tried literally everything, multiple jQuery versions, multiple bootstrap versions, multiple code snippets (seen a lot of similar problems here on stackoverflow), javascript on the head and after the body, nothing seems to work ...
Here's my current code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>
You are trying to use jQuery before it has loaded.
If you look in the console, you will see the error:
Uncaught ReferenceError: $ is not defined
To resolve this, move your script tag after the jQuery library and the Bootstrap JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
Try to do it in this way:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>
you have 2 problems over here:
1) Initialize jquery first
2) You have an illegal (invisible) character inserted after your tooltip initialization. It sucks I know, but you need to remove that char.
Following code should work
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>
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.