JS External Functions are not visible in HTML page - javascript

I have a problem with JS functions.
I wrote functions in other file named index.js but in index.hmtl when i use like "onclick = function()" the file doesn't recognize the function
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{asset('css/bootstrap/bootstrap.css')}}" rel="stylesheet">
<link href="{{asset('css/index.css')}}" rel="stylesheet">
<title>Sicurezza del Visitatore</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-body" id="cardTitle">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h6>Registrazione dati preliminare all'accesso agli Stabilimenti delle Società:</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h3>BROVEDANI GROUP SpA</h3>
<h3>BROVEDANI SpA</h3>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h6>Scheda Registrazione finalizzata alla Sicurezza del Visitatore</h6>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-body">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Menu</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/open">Visite in corso</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/closed">Visite concluse</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-body" id="cardContent">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h3>Inserimento nuova visita</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<form>
<br>
<div class="form-group row">
<label class="col-sm-4">Giorno: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="date" name="date" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" >Addetto:</label>
<select class="col-sm-8 form-control" required id="newAddetto_registrazione" name="newAddetto_registrazione">
#foreach($addetti_reg as $addetto_reg)
<option value="{{$addetto_reg->id}}">{{$addetto_reg->cognome}}</option>
#endforeach
</select>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Cognome:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newCognome" name="newCognome" required autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Nome:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newNome" name="newNome" required autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Società:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newSocieta" name="newSocieta" autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Accesso al Plant:</label>
<div class="col-sm-8">
#foreach($plants as $plant)
<input type="checkbox" value="{{$plant->nome}}" name="newPlants[]" id="newPlants[]">
<label>{{$plant->nome}} </label>
#endforeach
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">N°Badge:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newBadge" name="newBadge" required autocomplete="off">
<p id="errorBadge" style="color: red; font-style: italic; display: none">Badge in uso</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<!--HERE--> <button id="btnAggiungi" class="btn btn-dark" onsubmit="return checkBadge()">Aggiungi</button>
</div>
</div>
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('js/jquery/jquery-3.3.1.js')}}"></script>
<script src="{{asset('js/bootstrap/bootstrap.js')}}"></script>
<script src="{{asset('js/index.js')}}"></script>
</body>
JS
$().ready(function ()
{
/*
$("#newCognome").keyup(function ()
{
var cognome = $("#newCognome").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/cerca",
data:
{
cognome: cognome
},
success: function (data) {
if(data==null)
{
}
else
{
$("#newNome").val(data.msg.nome);
}
},
error: function () {
alert("chiamata fallita");
}
});
});*/
/*
$("#newBadge").keyup( function ()
{
var badge = $("#newBadge").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/badgevalido",
data:
{
badge: badge
},
success: function (data) {
if(data.msg === "true")
{}
else if(data.msg === "false")
{
alert("Badge in uso");
}
},
error: function () {
alert("chiamata fallita");
}
});
});*/
getDate();
function getDate()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var today = dd+'/'+mm+'/'+yyyy;
document.getElementById("date").value = today;
document.getElementById("day").value = today;
}
$("#btnAggiungi").click(function ()
{
checkBadge();
});
function checkBadge()
{
var badge = $("#newBadge").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/badgevalido",
data:
{
badge: badge
},
success: function (data) {
if(data.msg === "true")
{}
else if(data.msg === "false")
{
$("#errorBadge").css("display","initial");
}
},
error: function () {
alert("chiamata fallita");
}
});
}
});
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?


A function declaration creates a variable in the current scope, which is the anonymous function you pass to ready().
That variable (holding the function) is not available outside said anonymous function.
You could move the function outside to make it a global and then access from your onclick attribute but:
Globals are awful
onclick attributes are awful
Bind the event handler with jQuery's on instead of using an onclick attribute.

Related

How to show data when using API?

Im trying to get data from an API using ajax request. I did it but im not sure how to show the information to the client. I want to search by artist and show their songs. Here is my code and link to the api. Please help me!
https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MusicApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MusicApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Lyrics</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row" style="margin-top:30px;">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<img class="thumbnail img-responsive" src="images/notes.jpg">
</div>
<div class="col-sm-8">
<input type="checkbox" class="form-check-input" id="sort">
<label class="form-check-label" for="sort">Sort</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="artist">Artist:</label>
<textarea class="form-control" rows="1" id="artist"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-footer" style="height:55px;">
<button type="button" id="postComment" class="btn btn-primary pull-right publish"><span
class="glyphicon glyphicon-globe"></span> Search
</button>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Results</h3>
</div>
<ul class="list-group" style="min-height:241px;" id="contentList">
<li class="list-group-item" style="display:none" id="cloneMe">
<div class="row">
<div class="col-sm-2 col-xs-3">
<img src="images/notes.jpg" class="thumbnail img-responsive">
</div>
<div class="col-sm-7 col-xs-6">
<h4>Shakira</h4>
<p id="songName">some result </p>
<p id="lyricsLink">some result</p>
</div>
<div class="col-sm-3 col-xs-3">
<button type="button" class="btn btn-danger pull-right remove-post"><span
class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#postComment').click(function(){
artistName=$('#artist').val();
console.log(artistName);
var settings = {
"async": true,
"crossDomain": true,
"url": "https://genius.p.rapidapi.com/search?q=" + artistName,
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response.response.hits);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
console.log(r.result.header_image_url);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('#songName').html(r.result.full_title);
miniMe.find('#lyricsLink').html(r.result.url);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.find('checkbox').click(function(){
})
miniMe.show();
$('#contentList').append(miniMe);
});
});
return false;
});
});
</script>
</html>

You can iterate through the response with using this as your ajax block;
$.ajax(settings)
.done(function (response) {
// sort the response alphabetically
response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('p').html(r.result.full_title);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.show();
$('#contentList').append(miniMe);
});
});
You can see the working demo in codepen and you can look into this link if you want to learn about sort() function and how it works in JavaScript.

How to prevent jquery submit button from refreshing the HTML page?

I have a login page where the user enters his username and password, when he submits this form the data is sent to php file for verifying the password.
For the first time when the user enters data (I entered wrong details) the page shows "Invalid password...please try again".
The second time when the user enters data (again I enter wrong details) the page just reloads. I am not able to understand why this is happening.
For more better understanding I have added a google drive link to a video showing the issue.
Link:Link to the video
The html code:
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png">
RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>
The javascript part:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'php_admin_login.php',
data: {
admin_username: admin_username,
admin_password: admin_password
},
type: "POST",
dataType: "json",
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
}
else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
}
});
});
});
I'm sure there is no problem with the php code so I'm not pasting here just to make the question more clearer.
If you need the whole code of the project you can get it here:Github link to the project

else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';
Adding to an element’s .innerHTML replaces the whole content of the element; even the stuff that was already there will first be removed, and then re-created.
So your form itself is replaced with a new form, and therefor you completely lose your submit event handler you had attached to it as well.
Your attempts at preventing the default event action fail, because you handler function simply doesn’t get called any more at all, and just a normal form submit is performed now, which of course reloads the page.
You need to either add your event handler again after you replaced the parent container’s innerHTML - or use event delegation to begin with.

Try to use this. Hope it will help
$("form").submit(function(e){
e.preventDefault();
});
Kindly let me know if it does not work.

Try return false at the end of your $("#admin-signin").submit function instead of the preventDefault()

This is happening due to how you handle errors. By using document.getElementById('admin-signin-card').innerHTML += ... you are effectively reloading your form meaning that you lose the event listener. You can either adjust how you display the error or adjust the event listener.
I would recommend changing how you display the error.
I have removed the request in the example below but it's the same idea:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
let response = "no";
if (response === "OK") {
window.open("admin.html", "_self");
} else {
document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png"> RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;">
<div class="row padding">
<div class="card border-dark">
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group">
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
<div id="admin-signin-card-error"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</html>

like #CBroe mentioned, the problem is caused by innerHTML.
i moved the content of innerHTML to the form, and give it display none, when there an error i show the error with .show()
i changed the ajax url and data Type for testing purpose.
$(document).ready(function () {
$("#admin-signin").on('submit', function (event) {
event.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json',
type: "POST",
dataType: "jsonp",
data: {
admin_username: admin_username,
admin_password: admin_password
},
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
} else {
$('.alert.alert-danger').show();
console.log("error shown");
}
}
});
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
<div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>
</html>

Using AngularJS to close Bootstrap Modal window

I'm fairly new to AngularJS, so forgive me if this is a simple question;
I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window.
After the user successfully logs in, I want the modal window to be closed by Angular;
The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object)
In particular, im looking to replace this code in the Angular controller:
//window.location.href = '/IDD';
with a command to close the modal window.
HTML Code:
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="">JDCSupport</a>
<div class="nav navbar-nav" style="flex-direction: row;">
<p class="text-center">{{usrName}}</p>
<div data-ng-show="btnLogin">
<button class="btn btn-success btn-sm pull-xs-right"
style="padding: 10px;" data-toggle="modal"
data-target="#loginModal">
Login
</button>
</div>
<div data-ng-show="btnLogout">
<button class="btn btn-warning btn-sm pull-xs-right"
style="padding: 10px; margin-right: 10px;"
type="button">
Logout
</button>
</div>
<div data-ng-show="btnMenu">
<button class="navbar-toggler pull-xs-right" style="padding: 10px;" id="navbarSideButton" type="button">☰</button>
</div>
</div>
<ul class="navbar-side" id="navbarSide">
<li class="navbar-side-item">
Home
</li>
<li class="navbar-side-item">
Staff Roster
</li>
<li class="navbar-side-item">
Photos
</li>
<li class="navbar-side-item">
Messages
</li>
</ul>
<div class="overlay"></div>
</nav>
<div id="loginModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="col-lg-8 col-sm-8 col-12 main-section">
<div class="modal-content">
<div class="col-lg-12 col-sm-12 col-12 user-img">
<img src="images/man.png" alt="">
</div>
<div class="col-lg-12 col-sm-12 col-12 user-name">
<h1>User Login</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="col-lg-12 col-sm-12 col-12 form-input">
<form ng-submit="loginForm()" name="loginform" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" data-ng-model="user.username" name="username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" data-ng-model="user.password" name="password" required>
</div>
<button type="submit" class="btn btn-success">Login</button>
<div class="alert alert-danger" data-ng-show="errorMsg">{{error}}</div>
</form>
</div>
<div class="col-lg-12 col-sm-12 col-12 link-part">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
And my Angular Controller:
app.controller ("logController", function ($scope, $http) {
$scope.btnLogin = true;
$scope.btnLogout = false;
$scope.btnMenu = false;
$scope.errorMsg = false;
$scope.loginForm = function() {
var ans="";
var encodedString = 'username=' +
encodeURIComponent(this.user.username) +
'&password=' +
encodeURIComponent(this.user.password);
$http({
method : 'POST',
url : 'php/login.php',
data : encodedString,
headers : {'Content-type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
console.log(response);
ans = response.data;
if (ans.message == 'correct' ) {
$scope.btnLogin = false;
$scope.btnLogout = true;
$scope.btnMenu = true;
//window.location.href = '/IDD';
} else {
$scope.errorMsg = true;
$scope.error = ans.error;
}
},
function (response) {
//error handling
});
};
});

use the following on login successful
$('#loginModal').modal('hide');

You can achieve that with $('loginModal').modal('hide'); or $('loginModal').modal('toggle');

AJAX Post sometimes works, sometimes it doesnt, why?

I have several ajax posts in my pages and i find that somedays they do work correctly:
executes the method in the controller.
doesnt refresh page.
Sometimes it doesnt:
executes the method in the controller.
goes to a blank page.
I dont find a relation of when they work or they dont, it seems random but i hope its not.
I searched several stack overflow posts and articles and still couldnt find the reason hence why i am making this questin. Hope you understand that.
An example of an Ajax call that sometime works and sometimes not:
$(document).ready(function() {
$('form.ajaxaccount').on('submit', function(event) {
event.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: 'POST',
url: '/saveaccount', // This is the url we gave in the route
data: $('form.ajaxaccount').serialize(),
success: function(response){ // What to do if we succeed
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Sucesso",
text: "Editado com sucesso! ",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Erro :(",
text: "Os dados inseridos não foram guardados. Tenta novamente",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
}
});
});
});
FULL PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Wolistic</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<script src="https://use.fontawesome.com/a3f24bf03b.js"></script>
<link href="dist/notyf.min.css" rel="stylesheet">
<script src="dist/notyf.min.js"></script>
<link rel="stylesheet" href="{{ asset('vendor/backpack/pnotify/pnotify.custom.min.css') }}">
</head>
<body>
#include('frontoffice.login_popup')
#include('frontoffice.register_popup')
<header>
<div class="top_bar_right">
<div class="container">
<ul>
#if (Auth::guard('web_customer')->guest())
<!--Seller Login and registration Links -->
<li><a id="openloginpopup"> Iniciar Sessão </a></li>
<li><a id="openregisterpopup"> Registar </a></li>
<ul class="lang_switch">
<li>Pt</li>
<li><img src="./img/down_arrow.png" width="9"></li>
</ul>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::guard('web_customer')->user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/customer_logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/customer_logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
<nav id="mainNav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="{{ url('/eventos') }}">
<img src="img/wolistic_logo.png" class="logo" alt="Wolistic" title="Wolistic" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1" class="menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#download">Sobre Nós</a>
</li>
<li>
<a class="page-scroll" href="#features">Workshops</a>
</li>
<li>
<a class="page-scroll" href="#contact">Eventos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Voluntariado</a>
</li>
<li>
<a class="page-scroll" href="#contact">Submeter Evento</a>
</li>
</ul>
</div>
</div>
</nav>
<form class="col-md-12 search_form">
<div class="container">
<input type="text" name="search_term" class="search_term" id="search_term" placeholder="O que procuras? (Ex. Permacultura)" />
<select name="event_type" id="event_type" class="event_type" placeholder="Tipo">
<option value="" disabled selected hidden>Tipo</option>
<option>Evento</option>
<option>Workshop</option>
<option>Voluntariado</option>
</select>
<select name="event_local" id="event_local" class="event_local" placeholder="Tipo">
<option value="" disabled selected hidden>Local</option>
<option>Porto</option>
<option>Braga</option>
<option>Lisboa</option>
</select>
<input type="text" name="event_begin_date" class="event_begin_date" id="event_begin_date" placeholder="Data (início)" />
<input type="text" name="event_end_date" class="event_end_date" id="event_end_date" placeholder="Data (fim)" />
<button id="submit" class="search_submit"></button>
</div>
</form>
</header>
<main>
<div class="container">
<div class="breadcrumb">
<span>Início</span> > <span>Perfil</span>
</div>
<div class="profile_title">
A MINHA CONTA
</div>
<div class="row">
<div class="left_sidebar col-md-3 left_aboutus">
<img
#if (is_null($customer->profile_pic))
src="\uploads\{{ $customer->profile_pic }}"
#else
src="./img/default_profile_picture.png"
#endif
class="img-responsive profile_pic" />
<h1 class="profile_name"> {{ $customer->name }} </h1>
<div class="perfil-menu text-left">
<div class="perfil-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default notbordered">
<div class="panel-heading active">
<h4 class="panel-title" >
<a class="accordion-perfil-tog-link-main" href="{{ url('/account') }}">Eu sou</a>
</h4>
</div>
</div>
<div class="panel panel-default notbordered">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#1collapse2" aria-expanded="false" class="collapsed">Eu gosto<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="1collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Os meu interesses</li>
<li>Wishlist</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#1collapse3" class="collapsed" aria-expanded="false">Eu quero<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="1collapse3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Newsletter</li>
<li>Alterar password</li>
<li>Apagar conta</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="button_anunciante">EU SOU ANUNCIANTE</div>
-->
<div class="perfil-menu-anunciante text-left">
<div class="perfil-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default ">
<div class="panel-heading ">
<h4 class="panel-title">
<a class="accordion-perfil-tog-link-main" href="{{ url('/advertiser') }}">Eu sou anunciante</a>
</h4>
</div>
</div>
<div id="anunciante-options" class="">
<div class="panel panel-default ">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#2collapse2" aria-expanded="false" class="collapsed">Os meus eventos<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="2collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li> Os meus eventos </li>
<li> Submeter evento </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_content col-md-6 col-md-offset-1">
<div class="separator"></div>
<h3 class="personal_data">DADOS PESSOAIS</h3>
<div class="separator_personal"></div>
{{ Form::open(array('method'=>'post','class'=> 'profile_form ajaxaccount', 'url'=>'/saveaccount')) }}
<div class="form-group">
<label for="exampleInputEmail1"> Nome </label>
<input type="text" name="name" class="form-control" value="{{ $customer->name }}" placeholder="{{ $customer->name }} ">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Email </label>
<input type="email" name="email" class="form-control" value="{{ $customer->email }}" placeholder="{{ $customer->email }}">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Telemóvel </label>
<input type="text" name="phone" class="form-control" data-country="PT" value="{{ $customer->phone }}" placeholder="{{ $customer->phone }} ">
</div>
<div class="form-group">
<label for="exampleSelect1">Distrito / região </label>
<select class="form-control" name="districtID" id="exampleSelect1">
#foreach ($districts as $district)
<option value="{{ $district->id }}" > {{ $district->name }} </option>
#endforeach
</select>
</div>
<button type="submit" class="btn btn-primary">GUARDAR DADOS</button>
{{Form::close()}}
</div>
</div>
</div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
</main>
#include('frontoffice.footer')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js "></script>
<script src="./js/bootstrap.min.js "></script>
<script src="./js/script.js "></script>
<script src="vendor/backpack/pnotify/pnotify.custom.min.js"></script>
<script>
$(document).ready(function() {
$('form.ajaxaccount').on('submit', function(event) {
event.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: 'POST',
url: '/saveaccount', // This is the url we gave in the route
data: $('form.ajaxaccount').serialize(),
success: function(response){ // What to do if we succeed
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Sucesso",
text: "Editado com sucesso! ",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Erro :(",
text: "Os dados inseridos não foram guardados. Tenta novamente",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
}
});
});
});
</script>
</body>
</html>
FORM from the above page:
{{ Form::open(array('method'=>'post','class'=> 'profile_form ajaxaccount', 'url'=>'/saveaccount')) }}
<div class="form-group">
<label for="exampleInputEmail1"> Nome </label>
<input type="text" name="name" class="form-control" value="{{ $customer->name }}" placeholder="{{ $customer->name }} ">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Email </label>
<input type="email" name="email" class="form-control" value="{{ $customer->email }}" placeholder="{{ $customer->email }}">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Telemóvel </label>
<input type="text" name="phone" class="form-control" data-country="PT" value="{{ $customer->phone }}" placeholder="{{ $customer->phone }} ">
</div>
<div class="form-group">
<label for="exampleSelect1">Distrito / região </label>
<select class="form-control" name="districtID" id="exampleSelect1">
#foreach ($districts as $district)
<option value="{{ $district->id }}" > {{ $district->name }} </option>
#endforeach
</select>
</div>
<button type="submit" class="btn btn-primary">GUARDAR DADOS</button>
{{Form::close()}}
What could be wrong ?

Angular how to Get values from ng-model and pass into params

I'm new to angular
help me to get value from ng-model and pass them into $http params to get json response,
and then i don't know how to show results using my own template as ng-repeat
<script>
var myApp = angular.module("orderApp", []);
myApp.controller("ArchiveController", function ($scope, $http) {
console.log($scope.fromdate);
console.log($scope.todate);
$http({
url: "#Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)",
method: "GET",
params: { fromDate: '1396-01-01', toDate: '1396-01-17' }
// i should use $scope.fromdate & $scope.todate here
})
.then(function (response) {
$scope.orderArchive = response.data;
console.log(response.data);
});
});
</script>
Here is my HTML code
<div ng-app="orderApp">
<div ng-controller="ArchiveController">
<h2 class="title">بایگانی سفارش‌ها</h2>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="txtFromDate">از تاریخ:</label>
<div class="col-sm-4">
<input type="text" class="form-control fromDate" id="txtFromDate" ng-model="fromdate" placeholder="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")">
</div>
<label class="col-sm-2 control-label" for="txtToDate">تا تاریخ:</label>
<div class="col-sm-4">
<input type="text" class="form-control toDate" id="txtToDate" ng-model="todate" placeholder="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")">
</div>
</div>
<a class="btn btn-primary btn-block searchInArchive" ng-href="#">جستجو</a>
</div>
<hr />
<!-- Template html code: -->
<div class="results">
<div class="panel-group" role="tablist" aria-multiselectable="true" data-day="2" ng-repeat="order in OrderArchive">
<h3 class="dayName"></h3>
<div class="panel panel-default orderItem">
<div class="panel-heading" role="tab">
<span class="description"></span>
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#day-1" href="#order-{{order.id}}" aria-expanded="true" aria-controls="collapse-one">
فاکتور #{{order.id}}
</a>
</h4>
</div>
<div class="panel-collapse collapse in" id="order-{{order.id}}" role="tabpanel" aria-labelledby="orderHeader-{{order.id}}">
<div class="panel-body orderInfo">
<div class="row borderBottom">
<div class="col-xs-12 col-sm-6">
زمان سفارش: <b>{{order.orderDatetime}}</b>
</div>
<div class="col-xs-12 col-sm-6">
سفارش‌دهنده: <b>{{order.ordererFullName}} — {{order.ordererUserName}}</b>
</div>
<div class="col-xs-12">
آدرس: <b>{{order.ordererAddress}}</b>
</div>
</div>
<div class="row borderBottom">
<div class="col-xs-12">
سفارش‌ها:
<div ng-repeat="food in order.foods">
<b>
<i class="howMany" data-food="{{food.id}}"> عدد</i>
<span class="foodMenu">{{food.menuName}}</span>
<span data-toggle="tooltip" data-placement="auto" data-html="true" title="" data-original-title="{{food.price}} تومان">{{food.name}}</span>
</b>
</div>
—
</div>
</div>
<div class="row borderBottom">
<div class="col-xs-12 col-sm-3">
درگاه پذیرنده: <b>{{order.bank}}</b>
</div>
<div class="col-xs-12 col-sm-3">
کد رهگیری تراکنش: <b>{{order.orderReferenceId}}</b>
</div>
<div class="col-xs-12 col-sm-3">
مبلغ: <b class="orderAmount">{{order.orderAmount}}</b>
</div>
<div class="col-xs-12 col-sm-3">
وضعیت سفارش: <b data-toggle="tooltip" data-placement="auto" data-html="true" title="" class="text-success" data-original-title="123">{{order.orderlevel}}</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to find the solution.

It looks like you aren't declaring the variables $scope.formdate and $scope.todate inside of your controller. Try the code below, the first thing it does is declares the variables. Then to add them to the params you just need to put those variables in place of the constants you have now, like below.
<script>
var myApp = angular.module("orderApp", []);
myApp.controller("ArchiveController", function ($scope, $http) {
$scope.fromdate = "";
$scope.todate = "";
$http({
url: "#Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)",
method: "GET",
params: { fromDate: $scope.fromdate, toDate: $scope.todate}
})
.then(function (response) {
$scope.orderArchive = response.data;
console.log(response.data);
});
});
</script>

Categories

Resources