I have a couple files I'm working with that require AJAX Calls. I have dashboad.html that hosts the main interface. I then have a leads.php file that renders information from leadsData.php into a nice Bootstrap Table. leadsData.php returns a JSON file.
When I click "Prospective Student", the right stuff happens ... it renders leads.php in the main dashboard.html. The problem is that when leads.php is rendered in dashboard.html, it doesn't get the information from leadsData.php. After some thinking, this makes sense ... there isn't an AJAX Call that requires leads.php to fetch information from leadsData.php.
|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|
So it seems as if the first AJAX happens, but the second one doesn't.
Here is my code below:
dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-lg-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item" ng-click = "LoadProspectiveStudents()">
<a class="nav-link active" href="#">Prospective Students</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-lg-10" style="border: solid;">
<div class="container">
<h1>MAIN CONTAINER</h1>
<p ng-bind-html = "myResponse"></p>
</div>
</div>
</div>
<body>
</body>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="dashboardController.js"></script>
</html>
leads.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<!-- <textarea name="name" ng-model = "test"></textarea> -->
<h1>Hi Mustafa</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" ng-model= "test">
</div>
<table class="table">
<thead>
<tr>
<th ng-click = "sortBy('first_name')">First Name</th>
<th ng-click = "sortBy('last_name')">Last Name</th>
<th ng-click = "sortBy('communityCollege')">Community College</th>
<th ng-click = "sortBy('accountCreation')">Account Creation</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in myData | filter : test">
<td> {{user.first_name}} </td>
<td> {{user.last_name}} </td>
<td> {{user.communityCollege}} </td>
<td> {{user.accountCreation}}</td>
<td>
<button type="button" class="btn btn-primary">View More</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
dashboardController.js
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myController', function($scope, $http, $timeout) {
// $scope.myResponse = "Mustafa Hoda";
// $timeout(LoadProspectiveStudents(), 3000);
//Load Prospective Students
$scope.LoadProspectiveStudents = function(){
$http.get("leads.php")
.then(function(response) {
$scope.myResponse = response.data;
// $scope.renderedResponse = $parse($scope.myResponse);
// $scope.myResponse = "Mustafa Hoda";
}, function(response){
$scope.myResponse = "Uh oh! Something went wrong";
});
}
});
Related
Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>
please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.
I am developing this site in laravel and I am having troubles when I try to use DataTables, for my design I am using AdminLTE and whenever I try to put datatables on the content the search bar, the page selector, the order by icons disappear. I am following the example ahead: https://datatables.net/examples/styling/bootstrap. The cdn's for this datatable deforms my adminLTE. https://i.imgur.com/6fY7tMF.png
I've already tried to change cdn but I don't really think that that is the problem here.
------------------------HEAD--------------------------------
<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">
</head>
------------------------BODY--------------------------------
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Gestão de Utilizadores
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
#yield('content')
<div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
#foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>#if($utilizador->type == 1) <b>Admin</b> #else User Normal #endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
I expect something like the example ('https://datatables.net/examples/styling/bootstrap'). When I am actually having this: https://i.imgur.com/Wnt7tcn.png
I have integrated reactjs in my laravel application and it works well in order to fetching data using api's. But the layout of the view has been broken. I am using a template which was working fine before adding react js. Here it looks like:
A big space from top is appearing in every page even where i haven't use react component. My codes are:
master.blade.php
<!DOCTYPE html>
<html class="no-js h-100" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ config('app.name', 'BVend') }}</title>
<meta name="description" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
<link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" href="{{asset('template/styles/shards-dashboards.1.1.0.min.css')}}">
<link rel="stylesheet" href="{{asset('template/styles/extras.1.1.0.min.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}" type="text/css">
</head>
<body class="h-100">
<div class="container-fluid">
<div class="row">
<!-- Main Sidebar -->
#yield('sidebar')
<!-- End Main Sidebar -->
<main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
<!-- Main Navbar -->
#include('layouts.nav')
<!-- / .main-navbar -->
<div class="main-content-container container-fluid px-4">
<div class="page-header row no-gutters py-4">
<div class="col-12 col-sm-4 text-center text-sm-left mb-0">
<span class="text-uppercase page-subtitle">#yield('subtitle')</span>
<h3 class="page-title">#yield('title')</h3>
</div>
</div>
#yield('content')
</div>
</main>
</div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/shards-ui#latest/dist/js/shards.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sharrre/2.0.1/jquery.sharrre.min.js"></script>
<script src="{{asset('template/scripts/extras.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/shards-dashboards.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/app/app-blog-overview.1.1.0.js')}}"></script>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
content.blade
#section('content')
<div class="row">
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="{{ route('show_machines') }}">All Machines</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{{ route('create_machine') }}">Create Machine</a>
</li>
</div>
<div class="card-body p-0 pb-3 text-center">
<div id='app'></div>
</div>
</div>
</div>
</div>
#endsection
app (React)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Locker extends Component {
constructor() {
super();
this.state = {
lockers: [
{
"id": 1,
"machine_id": 1,
"product_id": 0
},
{
"id": 2,
"machine_id": 1,
"product_id": 0
},
{
"id": 3,
"machine_id": 1,
"product_id": 0
},
]
}
}
render() {
return (
<div>
<table className="table mb-0">
<thead className="bg-light">
<tr>
<th scope="col" className="border-0">Locker No.</th>
<th scope="col" className="border-0">Product</th>
</tr>
</thead>
<tbody>
{this.state.lockers.map((locker, key) =>
(
<tr key={key}>
<td>{locker.id}</td>
<td>{ locker.product_id }</td>
</tr>
)
)}
</tbody>
</table>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Locker />, document.getElementById('app'));
}
after aside main is misplaced
Ok i have figured it out. I have included css from reactjs preset which also include bootstrap.css which i have included before. so removed the following line from master.blade.php and all set:
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is :
{{product.name}} {{product.company}} and not the actual values.
Module CODE :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/addproduct', {
templateUrl:'addproduct.html',
controller:'myController'
})
});
Controller CODE :
myApp.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
.success(function(data,status,headers,config){
$scope.successMessage = "Inserted Successfuly!";
});
}
});
HTML CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<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>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-controller="myController">
<div class="header">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<span></span>
</div>
<div class="side-nav">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<nav>
<ul>
<li>
<a href="#">
<span><i class="fa fa-user"></i></span>
<span>Users</span>
</a>
</li>
<li>
<a href="addproduct.html">
<span><i class="fa fa-user"></i></span>
<span>Add Product</span>
</a>
</li>
<li>
<a href="viewproducts.html">
<span><i class="fa fa-envelope"></i></span>
<span>View Products</span>
</a>
</li>
<li class="active">
<a href="#">
<span><i class="fa fa-bar-chart"></i></span>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#">
<span><i class="fa fa-credit-card-alt"></i></span>
<span>Payments</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="title">
Add Product
</div>
<div class="main" ng-view>
<form style="padding:10px">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="company" ng-model="company">
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="price" ng-model="price">
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
</div>
<button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
<h1>{{successMessage}}</h1>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>
It looks like you may be redifining your module.
Do you have the following code elsewhere in your project?
var myApp = angular.module('myApp', [...]);
If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.
var myApp = angular.module('myApp');
The order of your scripts matters! The file where you create your angular module app:
var myApp = angular.module('myApp', ['ngRoute']);
This file should be after the angular-route file.
Fixed:
<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>