I am developing an e-commerce website using Node, Express, Mongoose, and Bootstrap, and I am experiencing unexpected behavior regarding "bootstrap.min.css.map".
I've seen it appear in the console with the following error: 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model "Product"'.
I am also seeing it appear as the text of a button. When I remove the link to the bootstrap.min.css in my header then the expected behavior returns, but then I lose the bootstrap styling on the page.
I've searched and have seen posts about removing the following from my code: /*# sourceMappingURL=bootstrap.css.map */ via not linked to bootstrap.css.map but shows in console, but I use the cdn to include the boostrap.min.css file, so I don't think it's possible for me to do that.
It also appears for me in the dev console: DevTools failed to load SourceMap: Could not load content for http://localhost:3000/products/sort/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
I reduced the code to the smallest way I can reproduce it. The following code will show navigation buttons for pages on the left and a dropdown for sorting on the right.
Upon changing the sort the button on the left will be overridden with "bootstrap.min.css.map" as shown in the following pictures :
This is how the button looks before I change the sort
This is how the button looks after I change the sort
The following is the routes and ejs, the routes are prepended by 'products'
const express = require('express');
const router = express.Router();
const userUtil = require('../utilities/user');
const Product = require("../models/product");
let foundProducts;
let page;
let pages;
router.get("/sort", (req, res) => {
//res.send('page = ' + page);
if (foundProducts.length > 0) {
console.log('we are in the sort');
sort.sortBy(foundProducts, req.query.sortBy);
return res.render("products/products", {
products: foundProducts,
query: "",
order: req.query.sortBy,
successMsg: "",
noMessage: true,
currentPage: page,
pages: pages
});
}
res.redirect("/products");
});
router.get("/:page", async(req, res) => {
try {
page = req.params.page || 1;
const limit = 10;
const products = await Product.find({})
.limit(limit * 1)
.skip(page - 1)
.exec();
const count = await Product.estimatedDocumentCount();
pages = Math.ceil(count / limit);
foundProducts = products;
userUtil.setAdmin(req);
const successMsg = req.flash('successfulMsg')[0];
res.render("products/products", {
products: products,
successMsg: successMsg,
noMessage: (successMsg) ? false : true,
order: "",
query: "",
currentPage: page,
pages: pages
});
} catch (error) {
console.log("The error is " + error);
}
});
router.get("/", async(req, res) => {
res.redirect("/products/1");
});
module.exports = router;
<!-- header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/main.css">
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- header end-->
<div class="container">
<div class="row text-center align-items-start mb-2" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-4 mt-4 mb-0">
<nav aria-label="Page navigation">
<ul class="pagination">
<% if (currentPage> 2 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
<% } %>
<% if (currentPage> 1 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) - 1 %>" aria-label="Previous">
<span aria-hidden="true"><</span>
<span class="sr-only">Previous</span>
</a>
</li>
<% } %>
<% if (pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) %>">
<%= currentPage %>
</a>
</li>
<% } %>
<% if (pages> 1 && pages > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) + 1 %>" aria-label="Next">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
<% if (pages> 1 && pages - 1 > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(pages) %>" aria-label="Last">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="col-sm-6 mt-4 mb-0">
<form action="/sort/" method="POST" class="float-right">
<div class="form-group " style="display:inline-flex;">
<label for="l-sort-by" class="mt-2 mr-2">Sort: </label>
<select class="custom-select selectpicker" name="sortBy" id="inputGroupSelect02" onchange="this.form.submit();" value="price_desc">
<option value="price_asc">Lowest Price</option>
<option value="price_desc">Highest Price</option>
<option value="name_asc">Name Ascending</option>
<option value="name_desc">Name Descending</option>
</select>
<input type="hidden" name="searched" value="<%=query%>">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$("#inputGroupSelect02 option[value='<%=order%>']").attr("selected", "selected");
</script>
<!-- footer -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>
</body>
</html>
<!-- footer end -->
The problem seemed to stem from the bootstrap version I was using. I was using version 4.4.1 and when I reverted to version 4.1.3 everything began working as expected. The reason I figured this out was because I went through my git history and realized at some point that I changed the bootstrap version. The problem didn't present itself until later but that hint put me in the right direction.
Related
I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.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>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
I am creating a website using angular JS which is online advertisement booking. I am using RestAPI for getting data from backend like newspapers, categories etc.What I have to do in this is that to get User's location (city) and show data (newspapers) according to his city just like Zomato.com. So first I have created a locationController to get user's location from his IP and set the location to URL then I tried to get data according to city on newspaper controller. I am using ui-router for routes but in ui-view, data is not rendering and I am still confused about to get city and showing data. Here are my code --
locationController.js
adsApp.controller('locationCtrl',['$scope', '$http', '$uibModal', '$state', '$stateParams',
function($scope, $http, $uibModal, $state, $stateParams){
$scope.getLocation = function () {
if($stateParams.cityName){
$scope.cityName = $stateParams.cityName;
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$http({
url: 'http://ipinfo.io/json',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function (response) {
var data = response.data;
$scope.cityName = data.city.toLowerCase();
if($scope.cityName){
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$scope.getLocationPopup();
}
});
}
}
$scope.getLocationPopup = function () {
var modalInstance = $uibModal.open({
templateUrl: 'custom/popup.html',
});
}
angular.element("#ads_body").scope().getLocation();
}]);
newspaperController.js
adsApp.controller('newspaperCtrl',function($scope, $log,$state, $http, $window, $location, $stateParams){
console.log($stateParams);
$scope.formData = {};
if($stateParams){
$scope.formData = {
'city_name' : $stateParams.cityName,
'category_id' : $stateParams.categoryName
}
}
$scope.processForm = function () {
$http({
method: 'POST',
url: 'apocalypse/api/newspapers/newspaperData.json',
data: $.param($scope.formData), // pass in data as strings
headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
})
.then(function (response) {
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
console.log(data);
$scope.newspapers = data.newspapers;
$state.go('app_city_category',{
'cityName' : $scope.formData.city_name,
'categoryName' : $scope.formData.category_id,
})
});
};
});
routes.js
adsApp.config([ '$stateProvider', '$routeProvider', '$urlRouterProvider', '$locationProvider' ,
function ($stateProvider, $routeProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
url: "/:cityName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
})
.state('app_city_category', {
url: "/:cityName/:categoryName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
});
}]);
newspaper_index_data.html
<div class="container" ng-controller="newspaperCtrl">
<div class="white_box_wrapper">
<h2 class="primary_heading text-center">Choose a Newspaper below for {{currentCity}}</h2>
<p class="text-center m-b p-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
<br>
<div class="mobile_white_box_wrapper" ng-repeat="newspaper in newspapers">
<div class="col-md-3 p-n">
<h5>{{newspaper.newspaper.name}}</h5>
</div>
<div class="col-md-9 p-n ">
<div class="col-xs-6 p-n">
<div class="col-md-6 p-n p-b">
<h6>{{newspaper.city.name}}</h6>
</div>
<div class="col-md-6 p-n">
<h6>{{newspaper.category.name}}</h6>
</div>
</div>
<div class="col-xs-6 p-n text-right">
<div class="col-md-6 p-n p-b">
<h6><i class="fa fa-inr" aria-hidden="true"></i>{{newspaper.basic_price}} <span class="text-muted ">Per {{newspaper.number}} {{newspaper.newspaper.price_type}} </span></h6>
</div>
<div class="col-md-6 p-n">
<a href="#" class="btn btn-primary btn-md">
Select
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--Most Popular Newspaper in and around Lucknow -->
<div class="white_box_wrapper-no-shadow">
<h3 class="footer-heading-bold Lucknow-news">Most Popular Newspaper in and Around {{currentCity}}</h3>
<div class="mobile_white_box_wrapper">
<div class="container">
<ul class="popular_newspaper">
<li class="col-md-4" ng-repeat="newspaper in newspapers">
<a href="#">
{{newspaper.newspaper.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="adsYogiApp" id="adsyogi_id">
<head>
<title>Adsyogi.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<base href="/adsyogi_php/">
<!-- lib css files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<!-- js files -->
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="js/lib/off-canvas/iptools-jquery-offcanvas.min.js"></script>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/lib/off-canvas/iptools-jquery-offcanvas.css">
</head>
<body style="overflow-x: hidden">
<header role="primary_header">
<div class="container">
<nav ng-include="'custom/navigation.html'"></nav>
<!-- Search Box start-->
<div class="row search-box ">
<div class="col-md-12">
<h1>Find the Best Newspapers to<br> Advertise in {{currentCity}}</h1>
<p class="sub-small-text">consectetur adipiscing elit. Nulla cursus tincidunt augue, in iaculis mi ac</p>
<div class="col-md-1"></div>
<div id="header_search_wrapper" class="col-md-10" ng-controller="newspaperCtrl">
<form method="post" ng-submit="processForm()">
<div id="city_search_wrapper" class="col-md-4 p-n icon" ng-controller="citiesCtrl">
<select class="form-control b-r-white header_dropdown" name="city_name" ng-model="formData.city_name">
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{cityN.slug}}">{{cityN.name}}</option>
</select><!--
<input class="form-control b-r-white header_dropdown" name="cityName" ng-model="formData.cityName" type="text" list="listid">
<datalist id='listid'>
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{ cityN.name }}">
</datalist> -->
<i class="fa fa-location-arrow"></i>
</div>
<div id="category_search_wrapper" class="col-md-4 p-n icon" ng-controller="categoriesCtrl">
<select class="form-control b-r-white header_dropdown" name="category_id" ng-model="formData.category_id">
<option>-- Select Category --</option>
<option class="header_dropdown_option" ng-repeat="categoryN in parentCategories" value="{{categoryN.id}}">{{categoryN.name}}</option>
</select>
<i class="fa fa-search"></i>
</div>
<div class="col-md-4 p-n">
<button type="submit" class="btn btn-primary btn-md">SHOW NEWSPAPERS </button>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="col-md-1"></div>
<div class="clearfix"></div>
</div>
</div>
<!-- Search Box end -->
</div>
</header>
<!-- header end -->
<section id="main-wrapper" role="main-wrapper">
<div ui-view>
</div>
</section>
<div ng-include="'custom/footer.html'"></div>
<script type="text/javascript" src="js/lib/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-route.min.js"></script>
<!-- Include UI Bootstrap library -->
<script src="js/lib/angular/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="js/app/app.js"></script>
<script type="text/javascript" src="js/app/routes.js"></script>
<script type="text/javascript" src="js/app/controllers/locationController.js"></script>
<script type="text/javascript" src="js/app/controllers/citiesController.js"></script>
<script type="text/javascript" src="js/app/controllers/categoriesController.js"></script>
<script type="text/javascript" src="js/app/controllers/newspaperController.js"></script>
</body>
</html>
app.js
angular.module('core', ['ui.router', 'ngResource', 'ngMessages', 'ngRoute', 'ui.bootstrap']);
angular.module('controllers', []);
angular.module('factories', []);
angular.module('services', []);
angular.module('configs', []);
angular.module('runs', []);
var adsYogiApp = angular.module('adsYogiApp', ['core', 'runs', 'configs', 'services', 'factories', 'controllers']);
If the probleme is that in newspaper_index_data.html values like {{newspaper.newspaper.name}} are not corresponding to any data. It's because you set those values when you call the function processForm but this function change the view so the scope too and values like $scope.newspaper are not existing anymore in the new scope.
In AngularJS if you use the same controller for multiple views, each time the view is loaded the controller is initialized and fresh and a new $scope is injected.
To do what you want you need to use $rootScope (a scope shared by all controllers) or to use a provider
I have search high and low but cant find the answer I need.
Here is my page. You will see that I am returning results from my SQL server from the tblPackageType table. This table holds color codes example #7A2D2D.
What I need to do is change my page background color based on the value returned.
I'm well off under standing how to do this, but i'm sure its something like
IF <%=(PackageType.Fields.Item("intPackageID").Value)%> = "" Then
background-color="White"
Else
<%=(PackageType.Fields.Item("intPackageID").Value)%> = "1" Then
background-color=<%=(PackageType.Fields.Item("strPackageColor").Value)%>
else AND SO ON.....
<%#LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
Session.TimeOut = 10
If Session("MM_Username") = "" Then
response.redirect "/Account/LoginDenied.asp"
Else
// main page
End If
%>
<!--#include virtual="/Connections/LiveDataBase.asp" -->
<%
' IIf implementation
Function MM_IIf(condition, ifTrue, ifFalse)
If condition = "" Then
MM_IIf = ifFalse
Else
MM_IIf = ifTrue
End If
End Function
%>
<%
' *** Restrict Access To Page: Grant or deny access to this page
MM_authorizedUsers="1"
MM_authFailedURL="/Admin/main.asp"
MM_grantAccess=false
If Session("MM_Username") <> "" Then
If (false Or CStr(Session("MM_UserAuthorization"))="") Or _
(InStr(1,MM_authorizedUsers,Session("MM_UserAuthorization"))>=1) Then
MM_grantAccess = true
End If
End If
If Not MM_grantAccess Then
MM_qsChar = "?"
If (InStr(1,MM_authFailedURL,"?") >= 1) Then MM_qsChar = "&"
MM_referrer = Request.ServerVariables("URL")
if (Len(Request.QueryString()) > 0) Then MM_referrer = MM_referrer & "?" & Request.QueryString()
MM_authFailedURL = MM_authFailedURL & MM_qsChar & "accessdenied=" & Server.URLEncode(MM_referrer)
Response.Redirect(MM_authFailedURL)
End If
%>
<%
' *** Logout the current user.
MM_Logout = CStr(Request.ServerVariables("URL")) & "?MM_Logoutnow=1"
If (CStr(Request("MM_Logoutnow")) = "1") Then
Session.Contents.Remove("MM_Username")
Session.Contents.Remove("MM_UserAuthorization")
MM_logoutRedirectPage = "/index.asp"
' redirect with URL parameters (remove the "MM_Logoutnow" query param).
if (MM_logoutRedirectPage = "") Then MM_logoutRedirectPage = CStr(Request.ServerVariables("URL"))
If (InStr(1, UC_redirectPage, "?", vbTextCompare) = 0 And Request.QueryString <> "") Then
MM_newQS = "?"
For Each Item In Request.QueryString
If (Item <> "MM_Logoutnow") Then
If (Len(MM_newQS) > 1) Then MM_newQS = MM_newQS & "&"
MM_newQS = MM_newQS & Item & "=" & Server.URLencode(Request.QueryString(Item))
End If
Next
if (Len(MM_newQS) > 1) Then MM_logoutRedirectPage = MM_logoutRedirectPage & MM_newQS
End If
Response.Redirect(MM_logoutRedirectPage)
End If
%>
<%
Dim PackageType__varintCustomerID
PackageType__varintCustomerID = "0"
If (Request.QueryString("varintCustomerID") <> "") Then
PackageType__varintCustomerID = Request.QueryString("varintCustomerID")
End If
%>
<%
Dim PackageType
Dim PackageType_cmd
Dim PackageType_numRows
Set PackageType_cmd = Server.CreateObject ("ADODB.Command")
PackageType_cmd.ActiveConnection = MM_LiveDataBase_STRING
PackageType_cmd.CommandText = "SELECT tblPackageType.intPackageID, tblPackageType.strPackageColor, tblPackageType.strPackageName FROM tblCustomer LEFT OUTER JOIN tblPackageType ON tblCustomer.intPackage = tblPackageType.intPackageID WHERE tblCustomer.intCustomerID = ?"
PackageType_cmd.Prepared = true
PackageType_cmd.Parameters.Append PackageType_cmd.CreateParameter("param1", 200, 1, 255, PackageType__varintCustomerID) ' adVarChar
Set PackageType = PackageType_cmd.Execute
PackageType_numRows = 0
%>
<html lang="en"><head>
<title>Me2You</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/Content/simple-sidebar.css">
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Scripts/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/Content/table.css">
<script src="/Scripts/jquery.js"></script>
<script src="/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.js"></script>
</head>
<body>
<header>
</header>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="/Main/main.asp">
Menu
</a>
</li>
<li>
New Customer
</li>
<li>
Manage Customer
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Open Applications <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>No Merchant Number</li>
<li>Terminals with TBC</li>
<li>EMA Not Emailed</li>
<li>EMA Not Posted</li>
<li>INGLease Not Posted</li>
<li>Gems/SAP Order Not Completed </li>
<li>Welcome Letter Not Sent</li>
</ul>
</li>
<li>Active Customers </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Queries <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Create New Query</li>
<li>Open Queries</li>
<li>Recently Updated Queries</li>
<li>Closed Queries</li>
<li>All Queries</li>
</ul>
<% If Not ReportsView.EOF Or Not ReportsView.BOF Then %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Report's <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Orders Not Completed By Age</li>
<li>Avg Days To Complete</li>
<li>Test Report 3</li>
</ul>
</li>
<% End If ' end Not ReportsView.EOF Or NOT ReportsView.BOF %>
<% If Not BillingControl.EOF Or Not BillingControl.BOF Then %>
<li>Billing Control</li>
<% End If ' end Not BillingControl.EOF Or NOT BillingControl.BOF %>
</li>
</li>
</ul>
</div>
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="navbar-brand" style="padding-left:40px">Me2You</div> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-left navbar-form">
<form action="/Main/ManageCustomer/main.asp">
<span style="color: #FFFFFF">Quick Goto Customer ID</span>
<input name="varintcustomerid" type="text" id="varintcustomerid" autocomplete="off" size="6"></form>
</ul>
<ul class="nav navbar-nav navbar-right" style="padding-right:15px">
<span class="glyphicon glyphicon-log-out"></span> Logout
</ul>
</div>
</div>
</nav>
<div class="row" style="padding:15px">
<div class="container-fluid">
<div class="col-md-12">
Toggle Menu Back</div>
</div>
</div>
<div class="row" style="padding:15px"></div>
<div>
</div>
<div class="row" style="padding:15px">
<div class="container"></div>
<div class="clearfix visible-lg"></div>
</div>
<footer>
</footer>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
<%
PackageType.Close()
Set PackageType = Nothing
%>
Any help would be great thanks!
I would suggest putting the background color into a variable, and then writing that variable into a style tag.
...
<head>
<%
dim bg
'... database stuff goes here
If PackageType("intPackageID") = "" Then
bg = "white"
Else
bg = PackageType("strPackageColor")
End If
'...blah blah blah
%>
<style type="text/css">
body {background-color:<%=bg%>;}
</style>
</head>
...
Depending on how your page is laid out, you may actually want to put the background color on a different element -- e.g. a div with a specific ID -- but this should be enough to get you started.
I've a nav bar and when I click any tab in the nav bar, it takes me to that tab.
<section id="tabs">
<div class="mob-nav">
<div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist">
<!-- N add new class nav-tabs-scroll -->
<a class="nav-item nav-link" style="padding-top: 10px;"
ng-class="{ active: $index == 0 }"
id="nav-{{menuTab.menuURL}}-tab"
data-toggle="{{menuTab.dataToggle}}"
data-target="#{{menuTab.menuURL}}"
href="#{{menuTab.menuURL}}" role="tab"
aria-controls="nav-{{menuTab.menuURL}}"
ng-repeat="menuTab in menuList">
</a>
</div>
</div>
</section>
<!-- Tab Details -->
<section id="tabs">
<div class="">
<div class="">
<div class="mb-d-150">
<div class="tab-content py-3 px-sm-0 pl-0 pr-0"
id="nav-tabContent">
<!-- N removed py-3 class -->
<div class="tab-pane fade show"
ng-class="{ active: $index == 0 }"
id="{{menuTab.menuURL}}" role="tabpanel"
data-target="#{{menuTab.menuURL}}"
aria-labelledby="nav-{{menuTab.menuURL}}-tab"
ng-include="menuTab.colDef"
ng-repeat="menuTab in menuList">
</div>
<div class="tab-pane fade" id="changepass" role="tabpanel"
aria-labelledby="nav-about-tab"
ng-include="changePasswordTemplate">
</div>
</div>
</div>
</div>
</div>
</section>
Here's an example of menuList.
[{
menuID: "USER LANDING PAGE"
caption: "Dashboard"
parent: "root"
menuURL: "exampleModal"
cssClass: "fas fa-cog fa-lg"
cssParent: "nav navbar-nav"
aClass: "customerLandingPageTemplate"
SlNum: 98
colDef: "/js/templates/user-landing-page.html"
menuList: []
dataToggle: "modal"
},{
menuID: "USER QUERIES"
caption: "USER QUERIES"
parent: "root"
menuURL: "user-queries"
cssClass: "fas fa-comment-alt fa-lg"
cssParent: "nav navbar-nav"
aClass: "userQueriesTemplate"
SlNum: 100
colDef: "/js/templates/user-queries.html"
menuList: []
dataToggle: "tab"
}]
Here's the angularjs part which gives me the menuList:
GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
$scope.menuList = data;
console.log($scope.menuList)
});
When I refresh browser, it always takes me back to the USER LANDING PAGE no matter where I refresh. But on browser refresh, I need to reload the page where I was before refreshing.
You could use the session storage for saving the last state.
Internal code snippet does not allow to use session storage.
A working example on JSBin.
angular.module('app', ['ui.router'])
.config(($stateProvider) => {
const helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
const aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
.run(($state, $transitions) => {
$transitions.onSuccess({}, transition => {
sessionStorage.setItem('lastState', transition.to().name);
});
const lastState = sessionStorage.getItem('lastState');
if (lastState) {
$state.go(lastState);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<body ng-app="app">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>