I have the following script:
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
var global = $(this);
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
</script>
It's objective is to:
Identify if I'm opening or closing the modal window.
If I'm opening the modal window, populate a dropdownlist [A] with certain information
When another dropdownlist [B] changes it's value, update [A] value
Question:
Is it correct the use of $(this) in this script? I ask it because, although it works, if I put a breakpoint on this line:
var global = $(this);
I get an error on the debugger: Failed to load resource - 404 not found:
Update:
After applying the suggested changes the problem persists, which might be sign of another problem in the background. For this I update the result of the Html page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index - Plataforma Fantasy Park</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/jquery.dataTables.min.js?v=qcV1wr-bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG-cng"></script>
<script src="/js/dataTables.bootstrap.min.js?v=X_58s5WblGMAw9SpDtqnV8dLRNCawsyGwNqnZD0Je_s"></script>
<script src="/js/site.js?v=ViqmmChOp_51fH3dM_KEQAFClKU0vp0UrxlREwyHKHc"></script>
<link rel="stylesheet" href="/css/bootstrap-lumen.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/nestednavbar.css" />
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container body-content">
<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Plataforma Fantasy Park</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Liquidaciones</li>
<li>
Máquinas <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Registro
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines">Datos Comerciales</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Workshop">Datos de Fabricación</a></li>
</ul>
</li>
<li class="divider"></li>
<li>Familias y Tipos</li>
<li class="dropdown-submenu">
Gestión
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Management">Máquinas</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Contadores">Contadores</a></li>
</ul>
</li>
</ul>
</li>
<li>
Tiendas <span class="caret"></span>
<ul class="dropdown-menu">
<li>Registro</li>
<li class="divider"></li>
<li>Liquidadores</li>
</ul>
</li>
<li>
Proveedores <span class="caret"></span>
<ul class="dropdown-menu">
<li>Fabricantes y Marcas</li>
<li>Dealers</li>
</ul>
</li>
<li>Gastos</li>
<li>
Usuarios <span class="caret"></span>
<ul class="dropdown-menu">
<li>Usuarios</li>
<li>Roles</li>
</ul>
</li>
<li>About</li>
</ul>
<form method="post" id="logoutForm" class="navbar-right" action="/Account/SignOff">
<ul class="nav navbar-nav navbar-right">
<li>
<a title="Manage" href="/Manage">Hello adelgado!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8P12Ot7bDOBImhnZFhlI8qHPFz5Z8vuFfE8MbZPcoEDO8l20qrWS3FDx0GClCFhR3NVR5F2ysRwcKkbQ1FRaxGYDU-VJsNFpqMnyDmONltKFE6YINgnCRcBc0GSa0tnSvgJCDRrrfROVsWQRmvTIylwUR2nL5YDkJfNVwzdq9wdb8utLT5rXhZeANCwvGMFWvQ" /></form>
</div>
</div>
</nav>
<h2>Tiendas</h2>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" data-target="#modal-action-store" class="btn btn-primary" href="/Stores/Create">
<i class="glyphicon glyphicon-plus"></i> Nueva Tienda
</a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
Tienda
</th>
<th>
Dirección
</th>
<th>
Área
</th>
<th>
Distrito
</th>
<th>
Cadena
</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div aria-hidden="true" aria-labelledby="modal-action-store-label" role="dialog" tabindex="-1" id="modal-action-store" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
<hr />
<footer>
<p>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
<script src="/js/store-index.js?v=xMseET7-q434oUXfBjpd5QKjSw8t0R0P_mGdZorHwB0"></script>
<script type="text/javascript">
var global = this;
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
</script>
</body>
</html>
I also include the result of the network tab:
Simply remove the global variable and directly access wasclicked:
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
wasclicked = 0;
});
etc.....
Related
it would be great if someone can help me here .I am trying to add weight value option that let user select add to cart like this screenshot here]
this is my code`
Sorry for the long code but how can I implement the option value inside this shopping cart code.
How to add options to a select element to display it on the modal section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Shopping Cart Course Discoveryvip.com</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
crossorigin="anonymous"
/>
<style>
#output {
clear: both;
}
#checkoutdiv {
display: none;
}
.footer {
background-color: darkgrey;
color: white;
}
</style>
</head>
<body>
<header class="header">
<div class="htop">
<div id="checkoutdiv " class="container">
<div class="row">
<div class="col-md-6 text-xs-right">
(<span class="items text-muted"></span> <small>items</small>)
<span class="total"></span>
</div>
<div class="col-md-6 text-xs-right">
<span
class="btn btn-success"
data-toggle="modal"
data-target="#cart"
>Open Shopping Cart</span
><a href="checkout.html" class="btn btn-primary"
>Proceed to checkout</a
>
</div>
</div>
</div>
</div>
<div class="hbot">
<div class="container">
<nav class="navbar navbar-full navbar-dark bg-inverse">
<button
class="navbar-toggler light float-xs-right hidden-sm-up"
type="button"
data-toggle="collapse"
data-target="#nvbar"
></button>
<div id="nvbar" class="collapse navbar-toggleable-xs">
<ul class="nav navbar-nav float-sm-right">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="content">
<!-- content changes on each page -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="card-title">iPhone</h3>
<h6 class="card-subtitle text-muted">$500.00</h6>
<img src="lamb.jpg" class="img-fluid" />
<form class="myform" action="" method="dialog">
<div class="optwheight">wheight-options</div>
<!-- <wheight -->
<select id="mySelect" onchange="myFunction()">
<option value="0">select
<option value="£9.50">226.79g=80z
<option value="£8.20">220g
<option value="£9.50">280g
<option value="£8.20">220g
</select>
<p id="demo"></p>
<div class="card-block">
<div class="card-text"><h4> 28 days Ribeye Steaks</h4>
<a href="#"
class="card-link productItem btn btn-primary" data-name="Beef" data-s="Ribeye Steaks" data-price="50000" data-id="1">Add to Cart</a> </div>
</div>
<!-- <wheight/end -->
<div><input id="res" type="reset" /></div>
</form>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-xs-center">© Copyright info blah blah</p>
</div>
</footer>
<!-- Modals -->
<div class="modal fade" id="cart" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shopping Cart</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead class="thead-inverse">
<tr>
<th>Qty</th>
<th>Item Name</th>
<th>Weight</th>
<th>Cost</th>
<th class="text-xs-right">Subtotal</th>
<th>Remove</th>
</tr>
</thead>
<tbody id="output"></tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">
Continue Shopping</button
><a href="checkitout.html" class="btn btn-primary"
>Proceed to checkout</a
>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = " " + x;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
crossorigin="anonymous"
></script>
<script>
var shopcart = [];
$(document).ready(function () {
outputCart();
$(".productItem").click(function (e) {
e.preventDefault();
var iteminfo = $(this.dataset)[0];
iteminfo.qty = 1;
var itemincart = false;
$.each(shopcart, function (index, value) {
//console.log(index + ' ' + value.id);
if (value.id == iteminfo.id) {
value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
itemincart = true;
}
});
if (!itemincart) {
shopcart.push(iteminfo);
}
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
///
});
function outputCart() {
if (sessionStorage["sca"] != null) {
shopcart = JSON.parse(sessionStorage["sca"].toString());
console.log(sessionStorage["sca"]);
$("#checkoutdiv").show();
}
var holderHTML = "";
var total = 0;
var itemCnt = 0;
$.each(shopcart, function (index, value) {
console.log(value);
var stotal = value.qty * value.price;
total += stotal;
itemCnt += parseInt(value.qty);
holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
"(" +
value.s +
")</td><td> " +
formatMoney(value.price) +
' </td><td class="text-xs-right"> ' +
formatMoney(stotal) +
'</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';
});
holderHTML
holderHTML +=
'<tr><td colspan="3" class="text-xs-right">Total</td><td class="text-xs-right">' +
formatMoney(total) +
"</td></tr>";
$("#output").html(holderHTML);
$(".total").html(formatMoney(total));
$(".items").html(itemCnt);
}
function formatMoney(n) {
return "$" + (n / 100).toFixed(2);
}
$("#output").on("click", ".remove-item", function () {
var itemInfo = $(this.dataset)[0];
var itemToDelete = $(".remove-item").index(this);
shopcart.splice(itemToDelete, 1);
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
});
});
</script>
</body>
</html>
Use option:selected .
Checkout how to get selected option.
$(".productItem").click(function (e) {
e.preventDefault();
var iteminfo = $(this.dataset)[0];
let selectedItem = $('#mySelect option:selected') //add. selected option selector
iteminfo.qty = 1;
iteminfo.price = selectedItem.val().replace('£','') //add. value of selected option.
You'd better find a better way to use the formatMoney function with the numeric calculation instead of using .replace()
iteminfo.weight = selectedItem.text() //add. text of selected option
var itemincart = false;
$.each(shopcart, function (index, value) {
//console.log(index + ' ' + value.id);
if (value.id == iteminfo.id) {
value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
itemincart = true;
}
});
if (!itemincart) {
shopcart.push(iteminfo);
}
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
///
});
Add weight td in var stotal
var stotal = value.qty * value.price;
total += stotal;
itemCnt += parseInt(value.qty);
holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
"(" +
value.s +
")</td><td> " + //add
value.weight + //add
"</td><td> " +
formatMoney(value.price) +
' </td><td class="text-xs-right"> ' +
formatMoney(stotal) +
'</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';
i have poor knowledge in angular pls some one help me in localhost its working fine..
and it was works well while php5 after upgrade php7 i got this error,
angular.min.js:85 Error: [$sce:insecurl] http://errors.angularjs.org/1.2.13/$sce/insecurl?
p0=students%2Flistdata.php%3F
at angular.min.js:6
at getTrusted (angular.min.js:110)
at Object.e. [as getTrustedResourceUrl] (angular.min.js:112)
at angular-route.min.js:10
at B (angular.min.js:94)
at B (angular.min.js:94)
at angular.min.js:95
at h.$eval (angular.min.js:103)
at h.$digest (angular.min.js:101)
at h.$apply (angular.min.js:104)
list page
<?php
global $title,$titleS,$CURRENTUNIT,$addNewFn;
$path = "../";
include_once($path."includes/class.inc.php");
$title = "Students";
$titleS = "Student Details";
admin_userChk();
error_reporting(0);
if(!user_hasRights('menuStudentList')){ echo "<h1>403: Access Forbidden</h1>";exit; }
?>
<div class="row">
<div class="col-md-12">
<section class="panel" ng-controller="listController" id="listController" ng-init="filter.SearchQry='';filterListData()">
<header class="panel-heading" >
List of <?=$title?>
<div class="pull-right">
<?php //if(user_hasRights('addNewProductinfo')){ ?>
<a ng-click="addNewStudInfo()" class="btn btn-mini btn-success"><i class="fa fa-graduation-cap"></i> Add New <?=$titleS?></a>
<?php //} ?>
</div>
</header>
<div class="row">
<div class="col-md-12">
<form class="form-inline" ng-submit="filterListData()" >
<div class="form-group">
<div class="col-md-12">
<input type="text" name="SearchQry" class="form-control" placeholder="Search" value="<?=$_REQUEST['SearchQry']?>" ng-model="filter.SearchQry">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<button class="btn btn-small btn-info" type="submit">SUBMIT</button>
</div>
</div>
<script type="text/javascript">
//$('#searchForm [name="InternalCompId"]').val('<?=$_REQUEST['InternalCompId']?>')
</script>
</form>
</div>
</div>
<div class="pull-out m-t-small">
<table class="table table-bordered table-striped b-t text-small">
<thead>
<tr align="center">
<th >Sl.No</th>
<th >Student Name</th>
<!-- <th >Grade</th> -->
<th >Parent Name</th>
<!-- <th >Parent Occupation</th> -->
<th >Contact No</th>
<th >Email</th>
<th >Current Level</th>
<th >D.O.B</th>
<th >Joined On</th>
<?php if(user_hasRights('editStudInfo')){ ?>
<th >Edit</th>
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
<th >Delete</th>
<?php } ?>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td>{{data.slno}}</td>
<td>{{data.StudentName}}</td>
<!-- <td>{{data.Grade}}</td> -->
<td>{{data.ParentName}}</td>
<!-- <td>{{data.ParentOccupation}}</td> -->
<td>{{data.ContactNo}}</td>
<td>{{data.Email}}</td>
<td>{{data.CurrentLevel}}</td>
<td>{{data.Dob}}</td>
<td>{{data.Doj}}</td>
<?php if(user_hasRights('editStudInfo')){ ?>
<td>
<i class="fa fa-edit"></i>
<input type="hidden" id="editId{{$index}}" value="{{data.StudId}}" />
</td>
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
<td><i class="fa fa-trash-o"></i></td>
<?php } ?>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-lg-12 text-center">
<ul class="pagination pagination-small m-t-none m-b-none">
<li>First</li>
<li>Prev</li>
<li class="active">
<input type="text" ng-model="filter.page" id="CurrentPage" class="form-control pull-left" style="width:50px" my-enter="filterListData('Current')">
of {{filter.totalPages}}
</li>
<li>Next</li>
<li>Last</li>
</ul>
</div>
</div>
</footer>
</section>
</div>
</div>
<script>
var pageConfig = {pageTitleS: "<?=$titleS?>", bcl0: "Home", bcl1: "<?=$title?>", bcl2: "<?=$titleS?>"};
updatePageInfo(pageConfig);
function listController($scope, $http) {
$scope.filterListData = function(gotoPage) {
$http.post(
'students/forms.php?render=json&gotoPage='+gotoPage,
$.param($scope.filter), {headers:{'Content-Type': 'application/x-www-form-urlencoded'} }
)
.then(function(response){
$scope.dataList = response.data.list;
$scope.filter.page = response.data.filter.page;
$scope.filter.totalPages= response.data.filter.totalPages;
});
};
<?php if(user_hasRights('addNewStudInfo')){ ?>
$scope.addNewStudInfo = function() {
$http.get('students/forms.php?FormId=addNewStudInfo')
.then(function(response){ $('#myModal').html(response.data).modal(); });
};
<?php } ?>
<?php if(user_hasRights('editStudInfo')){ ?>
$scope.editStudInfo = function(index) {
var editId = $("#editId"+index).val();
$http.get('students/forms.php?FormId=editStudInfo&editId='+editId)
.then(function(response){ $('#myModal').html(response.data).modal(); });
};
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
$scope.deleteStudInfo = function(index) {
$.confirm({
message: '<b>Are you sure that you want to delete this?</b>',
labelOk:"Delete",
onOk: function() {
//action
var editId = $("#editId"+index).val();
$http.get('students/forms.php?action=deleteStudInfo&delId='+editId)
.then(function(response){$scope.filterListData('Current'); });
}
});
};
<?php } ?>
}
</script> ```
**index page**
```<?php
$appPath = "app/#/";
session_start();
$path = "../";
include_once($path."includes/class.inc.php");
admin_userChk();
?>
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<base href="http://<?=$_SERVER['HTTP_HOST']?>/admin/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<link rel="shortcut icon" href="assets/themes/start/images/favicon_1.ico">
<title>WebPanel by Sura</title>
<link href="assets/themes/start/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/pages.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/menu.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/responsive.css" rel="stylesheet" type="text/css">
<script src="assets/themes/start/js/modernizr.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
<script src="../../https#oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="../../https#oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="angular/page.css" media="all" />
<link rel="stylesheet" type="text/css" href="angular/animate.min.css" media="all" />
<!-- Plugins -->
<link href="assets/plugins/select2/select2.css" rel="stylesheet" />
<link href="assets/plugins/select2/select2-bootstrap.css" rel="stylesheet" />
<link href="assets/plugins/selectize/selectize.css" rel="stylesheet" />
<link href="assets/plugins/selectize/selectize.bootstrap3.css" rel="stylesheet" />
<link href="assets/plugins/jquery-ui/theme/jquery-ui.custom.min.css" rel="stylesheet" />
<link href="assets/plugins/summernote/summernote.css" rel="stylesheet" />
<link href='assets/plugins/loading-bar/loading-bar.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="assets/plugins/tagsinput/jquery.tagsinput.min.css" media="all" />
<!-- Plugins -->
</head>
<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center"><i class="fa fa-edit"></i> <span>Web Panel</span></div>
</div>
<!-- Button mobile view to collapse sidebar menu -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<div class="pull-left"><button class="button-menu-mobile open-left"><i class="fa fa-bars"></i></button> <span class="clearfix"></span></div>
<!-- <form class="navbar-form pull-left" role="search">
<div class="form-group"><input type="text" class="form-control search-bar" placeholder="Type here for search..."></div>
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</form> -->
<ul class="nav navbar-nav navbar-right pull-right">
<!--<li class="dropdown hidden-xs">
<i class="md md-notifications"></i> <span class="badge badge-xs badge-danger">3</span>
<ul class="dropdown-menu dropdown-menu-lg">
<li class="text-center notifi-title">Notification</li>
<li class="list-group">
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-user-plus fa-2x text-info"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New user registered</div>
<!-- <p class="m-0"><small>You have 10 unread messages</small></p> -- >
</div>
</div>
</a>
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-diamond fa-2x text-primary"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New Order Placed</div>
<!-- <p class="m-0"><small>There are new settings available</small></p> -- >
</div>
</div>
</a>
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-bell-o fa-2x text-danger"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New Order Placed</div>
<p class="m-0"><small> <span class="text-primary">2</span> New Orders Placed</small></p>
</div>
</div>
</a>
<!-- last list item -- > <small>See all notifications</small>
</li>
</ul>
</li>-->
<li class="dropdown">
Welcome <?=$_SESSION['adminName']?> <img src="files/<?=$_SESSION['adminPic']?>" alt="user-img" class="img-circle">
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> My Profile</li>
<li><i class="fa fa-cog"></i> Change Password</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Top Bar End --><!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="pull-left"><img src="files/<?=$_SESSION['adminPic']?>" alt="" class="thumb-md img-circle"></div>
<div class="user-info">
<div class="dropdown">
<?=$_SESSION['adminName']?> <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> My Profile<div class="ripple-wrapper"></div></li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul>
</div>
<p class="text-muted m-0">IP: <?=$_SERVER['REMOTE_ADDR']?></p>
</div>
</div>
<!--- Divider -->
<div id="sidebar-menu">
<ul>
<li><i class="md md-home"></i><span>Home</span></li>
<li><i class="fa fa-shopping-cart"></i><span>Orders</span></li>
<li><i class="fa fa-users"></i><span>Buyers</span></li>
<li><i class="fa fa-book"></i><span>Book Details</span></li>
<li><i class="fa fa-cog"></i><span>Discount Terms</span></li>
<li><i class="fa fa-gift"></i><span>Coupon Codes</span></li>
<li><i class="fa fa-cogs"></i><span>Shop Settings</span></li>
<li><i class="fa fa-cogs"></i><span>Ship Settings</span></li>
<li class="divider"><br /><br /></li>
<li><i class="fa fa-file-pdf-o"></i><span>Levels</span></li>
<li><i class="fa fa-graduation-cap"></i><span>Students (Users)</span></li>
<li><i class="fa fa-file-text"></i><span>Website contents</span></li>
<!-- <li><i class="fa fa-newspaper-o"></i><span>News & Events</span></li> -->
<li><i class="fa fa-picture-o"></i><span>Photos</span></li>
<li><i class="fa fa-youtube-play"></i><span>Videos</span></li>
<li><i class="fa fa-quote-right"></i><span>Testimonials</span></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Left Sidebar End --><!-- ============================================================== --><!-- Start right Content here --><!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">
<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<h4 class="pull-left page-title pageTitleS"></h4>
<ol class="breadcrumb pull-right">
<li>Home</li>
<li></li>
<li class="active l2"></li>
</ol>
</div>
</div>
<div>
<div class="page {{ pageClass }}" ng-view></div>
</div>
</div>
<!-- container -->
</div>
<!-- content -->
<footer class="footer text-right">2015 © Sura Technologies</footer>
</div>
<!-- ============================================================== --><!-- End Right content here -->
</div>
<!-- END wrapper -->
<script>var resizefunc = [];</script>
<!-- Main -->
<script src="assets/themes/start/js/jquery.min.js"></script>
<script src="assets/themes/start/js/bootstrap.min.js"></script>
<script src="assets/themes/start/js/detect.js"></script>
<script src="assets/themes/start/js/fastclick.js"></script>
<script src="assets/themes/start/js/jquery.slimscroll.js"></script>
<script src="assets/themes/start/js/wow.min.js"></script>
<script src="assets/themes/start/js/jquery.nicescroll.js"></script>
<script src="assets/themes/start/js/jquery.scrollTo.min.js"></script>
<script src="assets/themes/start/js/jquery.app.js"></script>
<!-- Plugins -->
<script src="assets/plugins/select2/select2.js"></script>
<script src="assets/plugins/selectize/selectize.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/plugins/summernote/summernote.js"></script>
<script src="assets/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<!-- Plugins -->
<script src="assets/plugins/jquery.form.min.js"></script>
<script src="assets/plugins/validate.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/ui-bootstrap.min.js"></script>
<script src="angular/main.js"></script>
<script src="assets/plugins/loading-bar/loading-bar.js"></script>
<script type="text/javascript">
function getCustSummary(PartyId){
$('.modal-body').html('<img src="images/preloader.gif" alt="" />');
$.ajax({
url: "customers/ajaxdata.php?action=getCustSummary&InternalCompType=&PartyId="+PartyId,
success: function (data) { $('#myModal').html(data).modal(); }
});
}
$(document).ready(function(){
});
</script>
<div class="modal modal-light fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modal-light fade" id="MainModal"></div>
</body>
</html> ```
angular confirm.js
/*
* angular-confirm
* http://schlogen.github.io/angular-confirm/
* Version: 1.1.0 - 2015-14-07
* License: Apache
*/
angular.module('angular-confirm', ['ui.bootstrap'])
.controller('ConfirmModalController', ['$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = angular.copy(data);
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}])
.value('$confirmModalDefaults', {
template: '<div class="modal-header"><h3 class="modal-title">{{data.title}}</h3></div>' +
'<div class="modal-body">{{data.text}}</div>' +
'<div class="modal-footer">' +
'<button class="btn btn-primary" ng-click="ok()">{{data.ok}}</button>' +
'<button class="btn btn-default" ng-click="cancel()">{{data.cancel}}</button>' +
'</div>',
controller: 'ConfirmModalController',
defaultLabels: {
title: 'Confirm',
ok: 'OK',
cancel: 'Cancel'
}
})
.factory('$confirm', ['$modal', '$confirmModalDefaults', function($modal, $confirmModalDefaults) {
return function(data, settings) {
settings = angular.extend($confirmModalDefaults, (settings || {}));
data = angular.extend({}, settings.defaultLabels, data || {});
if ('templateUrl' in settings && 'template' in settings) {
delete settings.template;
}
settings.resolve = {
data: function() {
return data;
}
};
return $modal.open(settings).result;
};
}])
.directive('confirm', ['$confirm', function($confirm) {
return {
priority: 1,
restrict: 'A',
scope: {
confirmIf: "=",
ngClick: '&',
confirm: '#',
confirmSettings: "=",
confirmTitle: '#',
confirmOk: '#',
confirmCancel: '#'
},
link: function(scope, element, attrs) {
element.unbind("click").bind("click", function($event) {
$event.preventDefault();
if (angular.isUndefined(scope.confirmIf) || scope.confirmIf) {
var data = { text: scope.confirm };
if (scope.confirmTitle) {
data.title = scope.confirmTitle;
}
if (scope.confirmOk) {
data.ok = scope.confirmOk;
}
if (scope.confirmCancel) {
data.cancel = scope.confirmCancel;
}
$confirm(data, scope.confirmSettings || {}).then(scope.ngClick);
} else {
scope.$apply(scope.ngClick);
}
});
}
}
}]);
main.js
var mainApp = angular.module("mainApp", ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'angular-loading-bar']);
mainApp.config(function($routeProvider) {
$routeProvider.when('/:name*', {
templateUrl: function(urlattr) {
var queryString = "";
angular.forEach(urlattr, function(key, value) {
if (value != "name") {
queryString += "&" + value + "=" + urlattr[value];
}
});
//alert(queryString);
return '' + urlattr.name + '?' + queryString;
},
controller: 'mainController'
})
.otherwise({ redirectTo: '' });
});
app.filter('trusted', ['$sce', function($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
}]);
mainApp.controller('mainController', ['$scope', function($scope) {
$scope.sayHello = function(title) {
alert(title);
$scope.greeting = $scope.username;
};
$scope.greeting = $scope.username;
}]);
angular.module('mainApp')
.filter('to_trusted', ['$sce', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
mainApp.directive('myEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
mainApp.directive('prettyp', function() {
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({ deeplinking: false, social_tools: false });
}
})
function updatePageInfo(pageConfig) {
$("title").html(pageConfig.pageTitleS);
$(".pageTitleS").html(pageConfig.pageTitleS);
$(".breadcrumb .l0").html(pageConfig.bcl0);
$(".breadcrumb .l1").html(pageConfig.bcl1);
$(".breadcrumb .l2").html(pageConfig.bcl2);
$(".date").datepicker();
}
I changed http to https
Previous:
base href="http://<?=$_SERVER['HTTP_HOST']?>/admin/"
Fixed:
base href="https://<?=$_SERVER['HTTP_HOST']?>/admin/"
Not sure where I've gone wrong, here's the issue:
Here's my code:
<?php
require 'config.php';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vendor list - VendorBase Pro</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!-- Bootstrap core CSS -->
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>
<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
td {
overflow:hidden;
table-layout: fixed;
max-width: 500px;
overflow-wrap:break-word;
}
</style>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="assets/img/sidebar-5.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text">
VendorBase Pro
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.php">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li class="active">
<a href="table.php">
<i class="pe-7s-note2"></i>
<p>Vendor List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="pe-7s-news-paper"></i>
<p>Reports</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="pe-7s-science"></i>
<p>Settings</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vendor List</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret hidden-sm hidden-xs"></b>
<span class="notification hidden-sm hidden-xs">5</span>
<p class="hidden-lg hidden-md">
5 Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
<p class="hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
<p>Account</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<p>
Dropdown
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Vendor Database</h4><br>
<table id='tblVendor' class='display cell-border compact stripe' style="width:100%">
<thead>
<tr>
<th>View</th>
<th>Vendor</th>
<th>Company</th>
<th>Type</th>
<th>Status</th>
<th>Owner</th>
<th>Business Email</th>
<th>Department</th>
<th>Descr</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> DeedsTech, Inc., Third Party Risk Management Solutions.
</p>
</div>
</footer>
</div>
<!-- Central Modal Medium Info -->
<div class="modal fade" id="activev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
ab officiis totam.</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Info-->
<!-- make rows in tables clickable -->
<!--
<script>
document.addEventListener("DOMContentLoaded", () => {
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () => {
window.location.href = row.dataset.href;
});
});
});
</script>
-->
</body>
<!-- Core JS Files -->
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.12.0/js/mdb.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>
<script>
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Business Owner:</b></td>'+
'<td>'+d.owner+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>Contact Email:</b></td>'+
'<td>'+d.owner_email+'</td>'+
'</tr>'+
'<tr>'+
'<td><b>Description:</d></td>'+
'<td style="max-width=280px;">'+d.descr+'</td>'+
'</tr>'+
'<tr>'+
'<td>More Info:</td>'+
'<td><button>View</button></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "owner_email", "visible": false},
{ "data": "descr", "visible": false},
{ "data": "dept" },
], "order": [[1, 'asc']],
} );
new $.fn.dataTable.Buttons( dt, {
buttons: [
{
className: 'btn btn-info btn-fill',
text: 'Add New Vendor',
action: function ( e, dt, node, conf ) {
window.location.replace("new.php");
},
},
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);
} );
</script>
I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.
I need a button that opens up a module in bootstrap when condition is true
User inputs his btc address and than i check if its a valid btc address- if it is valid an modal should open and display the user a receiving address.
When the user input =! a btc address the modal should stay closed.
The code for checking the Btc address works- all i need is to hook up the result to my button.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BItmixxer</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style media="screen">
hr.style1{
border-top: 1px solid #8c8b8b;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="text-align:center" >
<div class="container">
<h1>Crypto BItmixxer</h1>
<p>some more Text about rypto mixxer</p>
</div>
</div>
<div class="container" style="text-align:center" >
<h1>BTC MIxxer</h1>
<p>Choose COins to mix:</p> <button type="button" class="btn btn-outline-primary">Bitcoin</button>
<button type="button" class="btn btn-outline-success">Ethereum</button>
<br>
<br>
<br>
<div class="form-group" id="elMessage" class="msg">
<input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate" data-toggle="modal" data-target="#myModal">Next</button>
<script>
var normalize = (s) => {
let x = String(s) || '';
return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};
var check = (s) => {
if (s.length < 26 || s.length > 35) {
return false;
}
let re = /^[A-Z0-9]+$/i;
if (!re.test(s)) {
return false;
}
return true;
};
var getEl = (id) => {
return document.getElementById(id) || null;
};
var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');
var setMessage = (txt = '', clss = 'msg') => {
elMessage.className = clss;
elMessage.innerHTML = txt;
};
var validate = (s) => {
let className = 'msg fail';
let textMessage = 'Invalid bitcoin address';
if (!s) {
textMessage = 'Please enter a valid address';
}
let re = check(s);
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
}
setMessage(textMessage, className);
return re;
};
btnValidate.onclick = () => {
let v = normalize(inpAddress.value);
let result = validate(v);
if (result) {
inpAddress.value = v;
}
};
lnkClear.onclick = () => {
inpAddress.value = '';
inpAddress.focus();
setMessage('Enter any text and press "Validate"');
};
</script>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3>Please send your BTC(min0.5) to</h3>
<p id ="btc-house" style="color:blue;"></p>
<script>
var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V','1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById("btc-house").innerHTML = rand;
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
The Bootstrap modal can be opened using JS (https://getbootstrap.com/docs/4.0/components/modal/#via-javascript)
For that to work you have to remove the data-attributes from your button, and place the opening code in your JavaScript.
Note: I had to modify your code a bit, so it worked error-free as a snippet.
var normalize = (s) => {
let x = String(s) || '';
return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};
var check = (s) => {
if (s.length < 26 || s.length > 35) {
return false;
}
let re = /^[A-Z0-9]+$/i;
if (!re.test(s)) {
return false;
}
return true;
};
var getEl = (id) => {
return document.getElementById(id) || null;
};
var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');
var setMessage = (txt = '', clss = 'msg') => {
elMessage.className = clss;
elMessage.innerHTML = txt;
};
var validate = (s) => {
let className = 'msg fail';
let textMessage = 'Invalid bitcoin address';
if (!s) {
textMessage = 'Please enter a valid address';
}
let re = check(s);
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
}
setMessage(textMessage, className);
return re;
};
btnValidate.onclick = () => {
let v = normalize(inpAddress.value);
let result = validate(v);
if (result) {
inpAddress.value = v;
// You have the modal with open it with JS
$('#myModal').modal('show')
}
};
/*lnkClear.onclick = () => {
inpAddress.value = '';
inpAddress.focus();
setMessage('Enter any text and press "Validate"');
};*/
var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V', '1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById("btc-house").innerHTML = rand;
hr.style1 {
border-top: 1px solid #8c8b8b;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="text-align:center">
<div class="container">
<h1>Crypto BItmixxer</h1>
<p>some more Text about rypto mixxer</p>
</div>
</div>
<div class="container" style="text-align:center">
<h1>BTC MIxxer</h1>
<p>Choose COins to mix:</p> <button type="button" class="btn btn-outline-primary">Bitcoin</button>
<button type="button" class="btn btn-outline-success">Ethereum</button>
<br>
<br>
<br>
<div class="form-group" id="elMessage" class="msg">
<input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate">Next</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3>Please send your BTC(min0.5) to</h3>
<p id="btc-house" style="color:blue;"></p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I try to use pagination for the nav tabs.i have 2 nav tabs first one is home and the second one is profile.intally the home tab will be active for that pagination works fine on click of the profile tab the pagination with table has to come.but here its not coming proper.
Here is my code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-md-11 col-sm-12 wf-tab">
<!-- 2nd tab -->
<div class="tabbable-panel" style="margin-top: 10px;">
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_default_1" data-toggle="tab" class="">
home </a>
</li>
<li>
profile
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<div>
<!-- 1st -->
<table>
<tbody id="myTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="myPager"></ul>
</div>
</div>
<div class="tab-pane" id="tab_default_3">
<div>
<!-- 2ndt -->
<table>
<tbody id="secondTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="secondPager"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script:
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li>«</li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li>'+(curr+1)+'</li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li>»</li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
if(target=="#tab_default_3"){
$('#secondTable').pageMe({pagerSelector:'#secondPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
}
else if(target==="#tab_default_1"){
alert("===");
}
});
$(document).ready(function(){
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
});
For the home tab its working fine but when i click on the profile tab the paginations display again if i click home tab and then on profile the pagination increases.how to solve this can anyone suggest me how to do.
Use Simple and easy concept by using below code
$(document).ready(function(){
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Tab- 1
</li>
<li>
Tab - 2
</li>
<li>
Tab - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>