innerHTML not changing text on browser in Materialize - javascript

innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>

By using this -
$(document).ready(function() {
$('#change').text("Alex");
});

Related

removeClass doesn't work when clicking a button

I have a problem with removing classes when clicking a button. I use jQuery and want to use removeClass('details') to remove it, but it still doesn't work. Do you have any idea for it? The solution was provided and I updated the code. See the answer below. Just put $(this).prev().closest('.details').remove(); before $(this).remove();.
$(document).ready(function() {
$('ul').on('click', 'button', function(){
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
$(this).closest('.tour').append(message);
$(this).remove();
// this doesn't remove a class details
//$(this).removeClass('details');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<ul class="list-group list-group-flush">
<li class="usa tour list-group-item"; data-discount="299">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour list-group-item" data-discount="176">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour list-group-item" data-discount="349">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>
The this refers to the button and not the span. You have to use .prev():
$(this) // is button
.prev() // this is span
.removeClass('details');
$(document).ready(function() {
$('ul').on('click', 'button', function(){
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
$(this).closest('.tour').append(message);
$(this).remove();
// this doesn't remove a class details
$(this) // is button
.prev() // this is span
.removeClass('details');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<ul class="list-group list-group-flush">
<li class="usa tour list-group-item"; data-discount="299">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour list-group-item" data-discount="176">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour list-group-item" data-discount="349">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>

html drop-down button not working

Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}

Make div disappear when list from drop down menu is selected

I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })

How to show localStorage data in header using AngularJS

Hello I am working in MEAN Stack And I want show the local-storage value into the
Header of theme.I am using the Metronic theme.
Actually Local Storage data is accessible in view file.everything working fine But
I want to view LOcalStorage data in header that is not showing.
I am using like this.
{{adminData.email}}
It is not showing email of admin in header.
But when I am using same {{adminData.email}} in content file that is
showing mail of admin.I don't know what is the issue.
here is the index.ejs file.
<!DOCTYPE html>
<style type="text/css">
.page-spinner-bar {
display: none;
}</style>
<html lang="en" ng-app="myApp">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>Ditro Infotech App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script>
<script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/module/module.js"></script>
<script src="js/controller/controller.js"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../assets/'); // Set the assets folder path
});
</script>
</head>
<body>
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div ng-view></div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'js/view/footer.html'" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</body>
<!-- END BODY -->
</html>
index.ejs file include header footer and sidebar file.
here is my header file.
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner container">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="#/dashboard.html">
<img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
</a>
<div class="menu-toggler sidebar-toggler">
<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN PAGE ACTIONS -->
<!-- DOC: Remove "hide" class to enable the page header actions -->
<div class="page-actions">
<!--<div class="btn-group hide">
<button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
<i class="icon-bar-chart"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User </a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
</a>
</li>
</ul>
</div>-->
<!--<div class="btn-group">
<button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-docs"></i> New Post </a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i> New Comment </a>
</li>
<li>
<a href="#">
<i class="icon-share"></i> Share </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
</a>
</li>
</ul>
</div>-->
</div>
<!-- END PAGE ACTIONS -->
<!-- BEGIN PAGE TOP -->
<div class="page-top">
<!-- BEGIN HEADER SEARCH BOX -->
<!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
<!--<form class="search-form search-form-expanded" action="#" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="query">
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>-->
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user">
<a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
{{adminData.name}} q</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="#/login">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END PAGE TOP -->
</div>
<!-- END HEADER INNER -->
try to use service/factory. a little not angular way but works fine(ES6)
export function metadataService(httpFactory) {
'ngInject';
this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){
var bImgUrl = httpFactory.baseImgUrl;
var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png';
document.querySelector('meta[itemprop=name]').content = title;
document.querySelector('meta[itemprop=description]').content = description;
document.querySelector('meta[itemprop=image]').content = photo;
};
}
and inside your controller/component/directive get your localStorage data and
metadataService(/localStorage.getItem(someItem)/)

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Categories