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)
Related
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 -->
I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
echo '<td>'.$row['no_of_days'] .'</td>'; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php
echo '</tr>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>
As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="50%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/
I have a problem that will make me crazy, I've got a page that has a SideBar on the left that folds down. This sidebar, works very well when no ajax is called.
The problem occurs when an Ajax is called.
To be clearer the problem occurs with the require_once('../include/js/js.php');.
If I remove this part of the codes of the different ajax calls, the problem disappears, but I need this require once so that the array generated in the ajax is returned with the buttons provided by "DataTables.net" ( print button, copy....)
I thought I had solved the problem by removing the require_once('../include/js/js.php'); on my Ajax files, but in fact not because it removes the buttons I need .
From what I see, the require once doesn't work as I would like...
I searched for 5 hours trying everything, but I think I lack the knowledge to solve this problem...
I will show you my full code :
Main Page :
<?php
session_start();
if(isset($_SESSION["connection"]) && ($_SESSION["role"] >= 0)){
require_once("../../include/js/ShowNotif.php");
$title_page = "Historique d'un NameSpace - Beluga";
require_once("../../include/head.php");
?>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<?php
require_once("../../include/navbar.php");
?>
<!-- Header -->
<!-- Header -->
<div class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0">Consultation</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><i class="fas fa-home"></i></li>
<li class="breadcrumb-item">NameSpace</li>
<li class="breadcrumb-item active" aria-current="page">Liste</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
<!-- Table -->
<div class="row">
<div class="col-md-12">
<div class="card-wrapper">
<!-- Input groups -->
<div class="card">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Historique d'un NameSpace</h3>
</div>
<!-- Card body -->
<div class="card-body bg-Default">
<!-- Input groups with icon -->
<div class="row">
<div class="col-md-6 mr-auto ml-auto">
<div class="form-group">
<!-- <div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-collection"></i></span>
</div>
<input class="form-control" placeholder="Code SA" type="text" name="codesa" onkeyup="checkForEnterKey(this.value);" id="codesa" value="">
</div> -->
<label for="codesa" style="color:white;">CodeSA</label>
<div class="input-group mb-3">
<input type="text" class="form-control" id="codesa" name="codesa" placeholder="Saisir le code applicatif" aria-label="Saisir le code applicatif" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="clicksubmitsa" onclick="SubmitSA('SearchHistoryOfNamespace();');">Valider</button>
</div>
</div>
</div>
</div>
</div>
<div id="resultatlistsa"></div>
<!-- Input groups with icon -->
</div>
<div id="resultatlistofhistory"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<?php
require_once("../../include/footer.php");
?>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<?php
require_once("../../include/js/js.php");
require_once("../../include/js/historydeploymentofnamespacejs.php");
?>
</body>
</html>
<?php
}else{
header('Location: ../../connect.php');
} ?>
First Ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$codesa = strtolower($_POST['codesa']);
$fonction = $_POST['fonction'];
// SearchServicesOfANamespace(); SearchHistoryOfNamespace();
if(isset($codesa) && !empty($codesa)){
$bearer = "";
$Link = $ApiBaseLink."allhistorydeploymentnamespace";
$object = GetHTTPRequest($Link, $bearer);
if ($object != FALSE){
$NombreSA = sizeof($object);
?>
<div class="row">
<div class="col-md-8 mr-auto ml-auto">
<div class="form-group">
<label for="namespace" style="color:white;">NameSpaces</label>
<select id="namespace" name="namespace" data-toggle="select" class="form-control" onchange="<?php echo $fonction; ?>">
<!-- ShowLoadingProcess(); -->
<option selected disabled>Liste des namespaces</option>
<script>
var table = $('#datatable-buttons').DataTable();
table.destroy();
</script>
<?php
for($SA = 0; $SA < $NombreSA; $SA++){
$namespace = $object[$SA]["namespacename"];
if (strpos($namespace, $codesa) !== false) {
?>
<option value="<?= $namespace; ?>"><?= $namespace; ?></option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
<?php
}else{
return http_response_code(404);
}
}
?>
After the selection, latest ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$bearer = "";
$namespace = strtolower($_POST['namespace']);
?>
<div class="row">
<div class="col">
<div class="card bg-Default">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Liste des services</h3>
<p class="text-sm mb-0" style="color:white;">
Voici l'ensemble de l'historique pour ce NameSpace.
</p>
</div>
<div class="table-responsive py-4">
<table class="table bg-white" id="datatable-buttons" data-turbolinks="false">
<thead class="thead-light">
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</thead>
<tfoot>
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</tfoot>
<tbody>
<?php
if(!empty($namespace)){
$Link = $ApiBaseLink."historydeployment/".$namespace;
$object = GetHTTPRequest($Link, $bearer);
if($object != FALSE){
$NombreHistoriques = sizeof($object);
if ($NombreHistoriques > 0){
for($historique = 0; $historique < $NombreHistoriques; $historique++){
$id = $object[$historique]["id"];
$servicename = $object[$historique]["servicename"];
$tagversion = $object[$historique]["tagversion"];
$datedeploiement = $object[$historique]["datedeploiement"];
$datecreationtag = $object[$historique]["datecreationtag"];
$actionby = $object[$historique]["actionby"];
$dateajout = $object[$historique]["dateajout"];
?>
<tr>
<td><span><?= $namespace ?></span></td>
<td><span><?= $servicename ?></span></td>
<td><span><?= $tagversion ?></span></td>
<td><span><?= $datedeploiement ?></span></td>
<td><span><?= $datecreationtag ?></span></td>
<td><span><?= $actionby ?></span></td>
<td><span><?= $dateajout ?></span></td>
</tr>
<?php
}
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! L\'API n\'a pas répondu... ', 4000, 'top-end');
</script>
<?php
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! Le NameSpace est vide... ', 4000, 'top-end');
</script>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
The JS.PHP file :
<script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/vendor/js-cookie/js.cookie.js"></script>
<script src="../../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../../assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/jszip.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/pdfmake.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/vfs_fonts.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- Argon JS -->
<script src="../../assets/js/argon.js?v=1.2.0"></script>
Just after loading the first Ajax, the SideBar is no longer straightenable, it freezes.
It remains stuck after the second AJAX.
The problem come from this :
VM8230:2655 Uncaught TypeError: $this.select2 is not a function
at init (<anonymous>:2655:9)
at HTMLSelectElement.<anonymous> (<anonymous>:2667:4)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at <anonymous>:2666:11
at <anonymous>:2671:3
at b (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at Object.dataFilter (jquery.min.js:2)
at jquery.min.js:2
But my jquery is loaded only one time
I hope someone with experience can solve this problem, it makes me crazy really.. i don't understand why a require_once can cause this..
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've never had this problem before. I have this code that I am trying to implement into my application http://jsfiddle.net/TC6Gr/119/
I have tried
Pasting all the jsfiddle code in a new page without my code, it doesn't work.
Wrap/unwrap the script in $(document).ready... it doesn't work.
When I put an alert in the click function, the alert displays but doesn't display the modal?
You are including JQuery 1.10.2, JSFiddle is using jquery 2.1.0
Also JSFiddle is including the following libraries
bootstrap.min.css
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css)
bootstrap.min.js
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js)
bootstrap-datetimepicker.min.js
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js)
bootstrap-datetimepicker.css
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css)
So try including...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
<link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
So try starting here, its not fully complete but I can get the modal to show up with this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
<script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<style>
body {
padding-top:20px;
}
.start-date {
padding-left:0;
}
.end-date {
padding-right:0;
}
.date>input:hover,.date>input:hover {
cursor:pointer;
}
.time-help {
margin-top:40px;
}
#media(max-width:767px) {
.start-date {
padding:0 0 5px 0;
}
.end-date {
padding:5px 0 0 0;
}
.time-help {
margin-top:10px;
}
}
</style>
<script>
$(function(){
$('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: "bottom-left",
maxView: 3,
minuteStep: 1,
endDate: new Date()
})
$('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: "bottom-left",
maxView: 3,
minuteStep: 1,
endDate: new Date()
})
$("td#my_clickable_cell").bind("click",function() {
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<td >Name</td>
<td>Sunday</td>
<td>Monday</td>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td id="my_clickable_cell" data-value="1">16:00-18:00</td>
<td id="my_clickable_cell" data-value="1"></td>
</tr>
<tr>
<td>Name2</td>
<td id="my_clickable_cell" data-value="3"></td>
<td id="my_clickable_cell" data-value="3">16:00-18:00</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<form class="form-group col-sm-12" role="form">
<label class="col-sm-2 control-label">Select Times</label>
<div class="col-sm-8">
<div class="col-sm-6 start-date">
<div class='input-group date' id="time-start">
<input type='text' class="form-control" placeholder="Start Time" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="col-sm-6 end-date">
<div class='input-group date' id="time-end">
<input type='text' class="form-control" placeholder="End Time" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<p class="help-block time-help">Select start and end times</p>
</div>
<div class="col-sm-2">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
more than a few errors in your code
1. the modal pop-up is not hidden on page load - try hiding that with css first.
2. the jquery function(datetime-picker) may not work for you. - you can however just use and html includes a datetime picker for you
check this link for more info on that
try those and let me know what error you have on your developer's console - I assume you are using chrome browser.