내 웹 페이지가로드 될 때마다 모듈을로드하는 데 문제가 있습니다. medication.php
파일이 있고이 파일에 medication.js
자바 스크립트 파일에 연결하고 있습니다. 이 자바 스크립트 파일에는 모듈을로드하고 컨트롤러를 설정하고 있습니다. 나는 크롬과 사파리에서도 이것을 시도했다. 그리고 페이지가 처음로드 될 때 에러가 발생하고 페이지가 새로 고쳐지는 7-8 번마다 한 번 던져진다.
This page을 여러 번 다시로드하면 콘텐츠를 임의로 표시 할 수 있으며 콘텐츠가 임의로 표시되지 않으며 다음 오류가 발생합니다. :
이 오류는 일부 예외로 인해 모듈이로드되지 않을 때 발생합니다. 위의 오류 메시지는 추가 컨텍스트를 제공해야합니다.브라우저가 새로 고침 될 때마다 모듈이로드되지 않습니다.
모듈을로드하지 못하는 일반적인 이유는 정의 된 모듈에 파일을 포함하는 것을 잊었거나 파일을로드 할 수 없었기 때문입니다. medication.php
: 여기서 medication.js 및 Angular CDN이로드됩니다. 보시다시피, 나는 ng-app
이고, 또한 ng-controller
이 있습니다.
<html ng-app="myModule1">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Shop For Medication </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex-theme-os.css"/>
</head>
<body>
<ul class="nav nav-tabs">
<div class="container">
<div class="navbar-header" style="background-color:#2a6cd6">
<a class="navbar-brand" href="#">The Med Company</a>
</div>
<ul class="nav navbar-nav" style="background-color: #2a6cd6" role="navigation">
<li ><a href="homepage.php"> Home Page</a> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Purchase Something<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="vitamins.php">Vitamins</a></li>
<li><a href="medication.php">Medication</a></li>
</ul>
</li>
<li><a href="aboutus.php">About Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" style="background-color:#2a6cd6"role="navigation">
<li><a href="./checkout.php" id="check-out"><span class="glyphicon glyphicon-shopping-cart"></span>Check Out</a></li>
<li><a href="#" id="sign-out"><span class="glyphicon glyphicon-user"></span> Sign Out</a></li>
</ul>
</div>
</ul>
<div class="container" ng-controller="mycontroller1" ng-cloak>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:10%">Quantity</th>
<th style="width:10%">Subtotal</th>
<th style="width:20%"></th>
</tr>
</thead>
<form id="medication-product-1" method="POST">
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img id="small-pic2" src="images/benadryl.png"></img>
</div>
<div class="col-sm-10">
<h4 class="nomargin"><input type="hidden" name="name1" value="Benadryl">
Benadryl</input>
</h4>
<p>
A medication which reduces itching, sneezing, coughing through because of its properties as an anti-histamine.
</p>
</div>
</div>
</td>
<td data-th="Price"><input type="hidden" name="Price1" value=01.99>
$1.99</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal1" ng-init="subtotal.subtotal1=0" name="Quantity1" ng-change="changed()" id="amount1" class="form-control text-center" min="0"/>
</td>
<td data-th="Subtotal" id="subtotal-1" name="Subtotal" class="text-center" ng-bind="1.99*subtotal.subtotal1"></td>
<td>
<input type="hidden" name="step" value="1"></input>
<button type="button" id="button1" name="button-1" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</form>
<form id="medication-product-2" method="POST">
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img src="images/motrin.jpg" id="small-pic"></img>
</div>
<div class="col-sm-10">
<h4 >
<input type="hidden" name="name2" value="Motrin"></input>
Motrin
</h4>
<p>
Pain Reliever and Fever Reducer
</p>
</div>
</div>
</td>
<td data-th="Price">
<input type="hidden" name="Price2" value="3.99">
$3.99
</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal2" ng-change="changed2()" ng-init="subtotal.subtotal2=0" name="Quantity2"
id="amount2" min="0" class="form-control text-center"></input>
</td>
<td data-th="Subtotal" id="subtotal-2"
name="Subtotal" ng-bind="3.99*subtotal.subtotal2" class="text-center" >
</td>
<td>
<input type="hidden" name="step" value="2"></input>
<button type="button" id="button2" name="button-2" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="vex/dist/js/vex.combined.js"></script>
<script type="text/javascript"> vex.defaultOptions.className = 'vex-theme-os'</script>
<script type="text/javascript" src="js/medication.js"></script>
<script type="text/javascript" src="js/signout.js"></script>
</body>
</html>
medication.js
window.onload=function(){
button1=document.getElementById("button1");
button2=document.getElementById("button2");
number1=document.getElementById("amount1");
number2=document.getElementById("amount2");
number1.value=0;
number2.value=0;
button1.disabled=true;
button2.disabled=true;
var medicine=angular.module("myModule1",[])
.controller("mycontroller1",function($scope){
var subtotal={
subtotal1:0,
subtotal2:0
}
$scope.subtotal=subtotal;
$scope.changed=function(){
if(subtotal.subtotal1>0){
button1.disabled=false;
}
else {
button1.disabled=true;
}
}
$scope.changed2=function(){
if(subtotal.subtotal2>0){
button2.disabled=false;
}
else{
button2.disabled=true;
}
}
});
button1.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-1").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
}
button2.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-2").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
};
}