Why my modal window is replicated in all views - javascript

I am in the creation of a modal window but this window has something very particular and it is that I only want it to be displayed at the moment of logging in, that is, after the user enters their credentials.
At the moment I am presenting an error and it is that the window is being shown in all the views including the del login.php and the del index.php which is where I only plan to show it. I emphasize again I am only interested in showing it in the window index.phpI share below the code I have to show my modal window.
Index.php
<html lang="es">
<head>
<title><?php echo ($data['title']); ?></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
$('#basicModal').modal({ show: false,
backdrop: 'static',
keyboard: false});
$('#basicModal').modal('show');
});
</script>
</head>
<body>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Title test
</div>
<div class="modal-body">
<h3>Test</h3>
<h3>Text test</h3>
</br>
</div>
<div class="modal-footer">
<button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Accept</button>
</div>
</div>
</div>
</div>
<div class="cuerpo">
<div id="content-area">
</div>
</div>
</body>
</html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
The above is the code that I am using to display my modal window in index.php but this window does show up in the other views I have.
As you can see, the modal window is shown without problem, the problem is that it is being shown in all views, I hope someone can give me some guidance to solve this problem.
UPDATE 1:
This is what login.php looks like
<div id="cuerpo_pequeno">
<div class="espacio-medio"></div>
<div class="espacio-pequeno"></div>
<div class="">
<form method="post">
<div class="form-group">
<label for="username">User:</label>
<input id="username" type="text" name="username" class="form-control" placeholder="Usuario" required/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Contraseña" required/>
</div>
<a id="recuperar_password">Forgot password</a><br>
<div class="centrar">
<button class="EnviarContactoDetalleProducto btn-lg" id="login">Enter</button>
</div>
<br/>
</form>
<br>
<div id="mensaje"></div>
</div>
<?php
$loginView = new LoginVista();
if(isset($_POST['username']) && $_POST['username'] != '' && isset($_POST['password']) && $_POST['password'] != ''){
$username = $_POST['username'];
$password = $_POST['password'];
$result = $loginView->validarCredenciales($username, $password);
}
?>
</div>
<br/>
<br/>
Modelos.php
<?php
include ("modelo/LoginModelo.php");
include ("modelo/FacturasModelo.php");
?>
Controladores.php
<?php
include ('controlador/Controlador.php');
include ('controlador/LoginControlador.php');
include ('controlador/FacturasControlador.php');
?>
Vistas.php
<?php
include ('vista/LoginVista.php');
include ('vista/FacturasVista.php');
?>


After going back and forth I realized that everything goes through the controller, that's where I have to identify if I want to show the window or not, creating a variable in the array that I return.
public function index()
{
if (isset($_SESSION['username'])){
$data['content'] = 'vista/home.php';
$data['title'] = 'Facturas';
// Mostrar en índice
$data['modal'] = true;
return $data;
}
else{
$loginController = new LoginControlador(new LoginModelo());
$data['content'] = $loginController->mostrarVista();
$data['title'] = 'Inicio';
// No mostrar en login
$data['modal'] = false;
return $data;
}
}
Then in the view analyze the variable
<html>
<!-- more code -->
<?php
// I analyze the variable to show window
if($data['modal']) {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
$('#basicModal').modal({ show: false,
backdrop: 'static',
keyboard: false});
$('#basicModal').modal('show');
});
</script>
<?php
} // End of if for modal window
?>
<!-- more code -->

Related

Return page issue when click back button in Chrome browser

I am making a portal of games where different games are showing on index page.
There are two procedures of playing games:
When user opens the index page and clicks on any game, if he is not logged-in already, then login form is showing on play.php; when user logs in then game will start
When user opens the index page and if he/she is already logged-in then login form will not appear. He can directly play a game.
Issue is that when a game is running on play.php, after playing user clicks back button in browser to return to the index page. But browser is showing play.php first and user has to click back button again to see index.php
Is there any way when click on back button then directly show index.php not show play.php again
index.php
<?php
$i=0;
$Res_games=mysqli_query($con, "SELECT * from tbl_games where
category_id=".$Row_Cat['id']);
while($Row_games = mysqli_fetch_array($Res_games)){
$img = $Row_games['icon_large'];
$game_url = $Row_games['url'];
$game_name = $Row_games['title'];
$formid=$Row_Cat['prefix'].$i;
?>
<div class="productCarousel-slide">
<article class="card ">
<figure class="card-figure">
<form id="<?php echo $formid; ?>" method="post" action="play.php">
<input type="hidden" name="url" value="<?php echo $game_url; ?>">
</form>
<a href="#" onclick="document.forms['<?php echo $formid; ?>'].submit();" title="<?php echo $game_name1; ?>">
<img class="card-image" src="<?php echo $img; ?>" alt="<?php echo $game_name;?>" title="<?php echo $game_name;?>">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<div class="card-buttons">
</div>
<div class="card-buttons card-buttons--alt">
</div>
</div>
</figcaption>
</figure>
<div class="card-body">
<h4 class="card-title" style="text-align: center !important;">
<?php echo $game_name;?>
</h4>
</div>
</article>
</div>
<?php
$i++;
}
?>
Play.php
<?php
include('assets/db_connect.php');
$url1 = urlencode($_REQUEST['url']);
header("Cache-Control: no cache");
session_cache_limiter("private_no_expire");
if(isset($_SESSION['loginid'])){
?>
<html>
<head>
<style>
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}}
</style>
</head>
<body>
<div class="resp-container">
<iframe class="resp-iframe" src="page1.php?url=<?php echo $url1;?>" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>
<?php } else { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/blue_logo.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<?php
if($_SESSION['loginid']!='' && !isset($_REQUEST['login'])){ ?>
<script>location.replace("index.php");</script>
<?php
}
if(isset($_POST['login'])){
$msisdn = $_REQUEST['msisdn'];
//Check Mobile No.
$chk_Zero= substr($msisdn, 0, 1);
$chk_92= substr($msisdn, 0, 3);
if ($chk_Zero==0){
$msisdn = substr($msisdn, 1);
$msisdn = '92'.$msisdn;
}
if($chk_92=='923'){
$msisdn = $msisdn;
}
$cdate = date("Y-m-d H:i:s");
$rows=0;
$SQL1="SELECT * FROM tbl_useraccount where msisdn='$msisdn' and status=1";
$result = mysqli_query($con,$SQL1);
$GetRows=mysqli_fetch_array($result);
if($GetRows['msisdn']==$msisdn)
{
$ID=$GetRows['id'];
//Store OTP
/* $otp= rand(1000,9999);
$OTP_Insert=mysqli_query($con,"Update tbl_usersotp set otp='$otp', modify_date='$cdate' where userid='$ID' and msisdn = '$msisdn' and sms_status=1");
$Message="Dear User,\n\nYour Verification Code is $otp. \n\nTelenor Games";
file_get_contents("http://115.186.146.246:13013/cgi-bin/sendsms?username=tester&password=foobar&to=".$msisdn."&text=".urlencode($Message));
*/
$_SESSION['loginid']=$ID;
$_SESSION['msisdn']=$msisdn;
//Login Attempt Information
$userid=$ID;
$localIP = getHostByName(getHostName());
$server_ip=$_SERVER['REMOTE_ADDR'];
$session_id = session_id(); $_SESSION['session_id'] = $session_id;
$CInsert=mysqli_query($con,"INSERT INTO tbl_login_attempt (userid, date_time, local_ip, server_ip, login_status, session_id) VALUES ('$userid', '$cdate', '$localIP', '$server_ip', '1', '$session_id')");
if(isset($_REQUEST['game_url'])){
?>
<form id="frm_url1" action="play.php" method="post">
<input type="hidden" name="url" value="<?php echo $_REQUEST['game_url'];?>" />
</form>
<script type="text/javascript">
document.getElementById("frm_url1").submit();
</script>
<?php } ?>
<?php }else{$message = "<font color='#bb0000'>Invalid Mobile Number. Please re-enter the details and login again.</font>";}
}
?>
<div class="limiter">
<div class="container-login100" style="background-color:#000000">
<!-- background-image: url('assets/images/bg-01.jpg'); -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="play.php" method="post" enctype="multipart/form-data">
<?php echo $message; ?>
<input type="hidden" name="game_url" value="<?php echo urldecode($url1);?>" />
<span class="login100-form-title p-b-49">
<img class="logo-responsive" src="assets/images/logo-white.png"/>Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Mobile Number is required">
<span class="label-input100">Mobile Number</span>
<input class="input100 allownumericwithoutdecimal" type="text" name="msisdn" placeholder="03XX1234567">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" name="login">
Login
</button>
</div>
</div>
<br><br><br>
<!--<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Login Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
</div>-->
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Not registered?
</span>
<a href="register.php" class="txt2">
Register
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/vendor/animsition/js/animsition.min.js"></script>
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/select2/select2.min.js"></script>
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/countdowntime/countdowntime.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>

Bootstrap modal in a php page activated by javascript

I have a php page. I try to open a modal with the buttons in a list (created by loop). In this list there are many items with different parameters and several buttons for each section of the list. With the button "Fahrzeuganwendungen", My following code opens a modal covering entire page, it is transparent, no header / footer / ... sections. It contains the data only:
<?php
...
?>
<div class='results'>
<input type="hidden" class="test1" name="metin2" value="<?php echo $parcano;?>" />
<input type="hidden" class="brand" name="brandname" value="<?php echo $marka;?>" />
<input type="hidden" class="artnr" name="skunr" value="<?php echo $parcano;?>" />
<button class="btn_mrt"><i class="fa fa-search" style="color:lightseagreen;"></i> weitere suche für <?php echo $parcano;?></button>
<button class="btn_additionalnumbers"><i class="far fa-list-alt" style="color:lightseagreen;"></i> zusätzliche Nummern</button>
<button class="btn_vehicles"><i class="fas fa-car" style="color:lightseagreen;"></i> Fahrzeuganwendungen</button>
<div class="additionalnumbers" name="additionalnumbers" style="background-color: #aaa; border: 0px solid green; padding: 2px; margin: 10px;"></div>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button: <button type="button" class="btn_vehicles" id="myBtn">Open Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</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>
</div>
<?php
...
?>
<script>
$(function() { // when page loads
$(".btn_mrt").on("click", function() { // click any class="single_add_to_cart_button button alt"
var metin2 = $(this).closest('.results').find('input[name="metin2"]').val();
$('input[name=metin]').val(metin2);
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi2: metin2}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
});
});
$(function() { // when page loads
$(".btn_additionalnumbers").on("click", function() { // click any class="single_add_to_cart_button button alt"
var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
var numberdiv = "additionalnumbers" + brandname + skunr;
var $nd = $(this).closest('.results').find('div.additionalnumbers');
$.post('/wp-content/plugins/ajax-test/GetAdditionalNumbers.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
$nd.html(gelen_cevap2);
});
});
});
//$(document).ready(function(){
$(function() { // when page loads
$(".btn_vehicles").on("click", function() {
var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
$.post('/wp-content/plugins/ajax-test/GetArticleVehicles.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
$("#myModal").modal().html(gelen_cevap2);
});
});
});
</script>
I have the following code in the <head>...</head> of course:
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
What is wrong here? I would appeciate for your kind help.
Many thanks,
Murat

The problem is here
$("#myModal").modal().html(gelen_cevap2);
You're replacing the content of the entire modal. Try something like this
$("#myModal .modal-body").html('<h1>test</h1>');
$("#myModal").modal();

i cant save and update data using modal and bootstrap validator

i'm so confused. i currently do a project for my final exam.
i'm so newbie using php, modal, and jquery. i really need your help.
the problem is, i'm using bootstrap validator to validate my form, but after i using it, i cant save my data to my database. and my edit button not working well, i guess i've throw my button to my edit process.
please help. thanks
listadmin.php
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"responsive": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("username");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("username");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
$(document).ready(function() {
$('#form-save')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitButtons: 'button[type="submit"]',
fields: {
username: {
message: 'Username tidak valid',
validators: {
notEmpty: {
message: 'Username tidak boleh kosong'
},
stringLength: {
min: 5,
max: 30,
message: 'Panjang minimal 5 karakter dan panjang maksismu 30 karakter'
}
}
},
nama_lengkap: {
message: 'Nama Lengkap tidak valid',
validators: {
notEmpty: {
message: 'Nama Lengkap tidak boleh kosong'
},
stringLength: {
max: 50,
message: 'Panjang maksimal 50 karakter'
}
}
},
password: {
message: 'Password tidak valid',
validators: {
notEmpty: {
message: 'Password tidak boleh kosong'
}
}
},
level: {
message: 'Level tidak valid',
validators: {
notEmpty: {
message: 'Level belum dipilih'
}
}
},
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>List Admin</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="assets/plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
<!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="content">
<div class="row">
<div class="col-xs-12">
<!-- /.box -->
<div class="box">
<div class="box-header">
<h3 class="box-title">List User</h3>
</div>
<div class="box-body">
<i class="glyphicon glyphicon-plus"></i> Tambah User
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Action</th>
</tr>
</thead>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT * FROM master_user where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tbody>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td>
</span>Edit |
</span>Hapus
</td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
</div>
</div>
</section>
<div class="example-modal">
<div class="modal fade" id="tambah" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Tambah User</h4>
</div>
<div class="modal-body form">
<form action="user_save.php" id="form-save" class="form-horizontal" method="POST">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username</label>
<div class="col-md-9">
<input name="username" placeholder="Username" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Nama Lengkap</label>
<div class="col-md-9">
<input name="nama_lengkap" placeholder="Nama Lengkap" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input name="password" placeholder="Password" class="form-control" type="password">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value="">--Select--</option>
<option value="1">Owner</option>
<option value="2">Manajer</option>
<option value="3">Bendahara</option>
<option value="4">Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" name="submit"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- UNTUK EDIT DAN HAPUS -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<!-- jQuery 2.2.3 -->
<script src="assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="assets/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="assets/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="assets/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="assets/dist/js/demo.js"></script>
<!-- page script -->
</body>
</html>
user_save.php
<?php
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['nama_lengkap']) && isset($_POST['level']))
{
include ("connection.php");
//ambil data
$username = $_POST['username'];
$nama_lengkap = $_POST['nama_lengkap'];
$password = $_POST['password'];
$level = $_POST['level'];
$query = "insert into master_user (username, password, level, nama_lengkap, status) values ('$username', md5('$password'),'$level', '$nama_lengkap', '0')";
if (!$result = mysqli_query($connection, $query)) {
exit(mysqli_error($connection));
}
header('location:listadmin.php');
}
?>

DataTable documentation has an example of how to create a modal Editor. I'd suggest following their example as closely as possible if you don't know what you're doing.
(https://editor.datatables.net/examples/bubble-editing/simple.html)

Can't make bootstrap modal work. Using PHP the get data and display it using a modal

Using PHP, I am trying to get data and display it using a bootstrap modal.
I can't get the bootstrap modal to open.
My PHP code connects to the server and database, and sends the information back, but since the modal does not work, it can't display the data received.
I also tried to activate the modal using JavaScript, but it still did not work.
Here is my code:
<html lang="en">
<div id="head">
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 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>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<?php
if($_SERVER["REQUEST_METHOD"]="GET"){
if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) {
$uname = $_GET['uni_name'];
} else {
$uname = "";
}
}
$con = mysqli_connect('', '', '', '');
if ($con->connect_errno) {
echo "
<script> alert('We are experiencing problems.') </script>";
exit;
}
$sql = "SELECT * FROM students WHERE university like '%".$uname."%'";
if (!$result = $con->query($sql)) {
echo "
<script> alert('Sorry, the website is experiencing problems.') </script>";
exit;
}
if ($result->num_rows === 0) {
echo "
<script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>";
exit;
} else {
echo "<ul>
";
while($row = $result->fetch_assoc()){
echo sprintf("
<li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]);
//echo sprintf("
<li>%s</li>", $row["lastName"]);
//echo sprintf("
<li>%s</li>", $row["university"]);
}
echo "
</ul>";
}
$result->free();
$con->close();
?>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
</body>
</html>

The main reason it is not working is because "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3". Then you can in your own words "activate it using javascript" (jQuery).
There's a lot wrong with your HTML as well, but even while leaving that in place, using for example jQuery 1.12.4 makes the difference (left out your PHP):
<html lang="en">
<div id="head">
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body">
<p>Put your php code here</p>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal();
});
</script>
</body>
</html>

How to use $ngCookies in angularjs

I've a trouble in cookies. When I use ngCookies in my project, there's something wrong in my div (alert).
enter image description here
And here's my app.js
angular.module('postLogin', [ngCookies])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
this.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'userauth.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'success.html';
} else {
$scope.errorMsg = "Username and password do not match.";
}
})
}
}]);
And here's my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<title>angulrjs login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" id="main-css"/>
<link href="css/style.css" rel="stylesheet" id="main-css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController as postCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<div class="row">
<img src="images/logo.jpg" class="imglogo"/>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login using username & password</div>
</div>
<div class="panel-body" >
<form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
<span class="glyphicon glyphicon-hand-right"></span> {{errorMsg}}
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
<i class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
When I didn't use ngCookies
angular.module('postLogin', [])
It could be run as normally. Please help me, I really want it to throwing username in my login form to next page. I can't use $cookies like session in php. Thanks.

In your module setter (angular.module...) when you inject dependent modules they must be in quotes. In your example there are no quotes surrounding ngCookies. Also, your index.html doesn't appear to reference the angular-cookies.js file which is not part of the base angular.js file.
Check development tools for specific error(F12).

Categories