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..
Related
I am trying to create a slideshow of the data that is pulled from a wordpress site using glide js and a for each loop.
This is what I tried:
<main id="primary" class="site-main">
<div class="home-card-wrapper glide">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<?php foreach($home_slider as $slide) : ?>
<div class="glide__slide">
<div class="home-card">
<div class="home-card-header" style="background-image: url('<?php echo get_the_post_thumbnail_url($slide->page_link) ?>');">
<p><?php echo $slide->heading; ?></p>
</div>
<div class="home-card-content">
<p><?php echo $slide->subheading?></p>
<p><?php echo $slide->description?></p>
<div class="lpd-button">
<img src="/wp-content/uploads/2023/01/Blk-with-white-arrow_34.5px-min.svg" alt="LPD Arrow">
Learn More
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">previous</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
<!-- Required Core Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.core.min.css">
<!-- Optional Theme Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide">
</script>
<script>
new Glide('.glide', {}).mount()
</script>
</main>
And I am getting both "home cards" on one slide. I want them to be separated onto different slides.
Any help?
I'm trying to use a set of inputs in HTML but I would like to create a PHP onclick function that takes the value of certain elements in HTML when clicked. The problem is I don't think I can use a conventional HTML method="post" form because I'm trying to get the value of something which isn't and I'm trying to get the value of a div.
Specifically, I want to assign a value to each of the squares depending on their color and then use that value to store in a database in PHP. Any help is appreciated.
<?php
session_start();
include("database.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$text_custom = $_POST['text_custom'];
echo $text_custom;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap customiser.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-3 offset-1 d-flex justify-content-end" id="logo">
<a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
alt="logo"></a>
</div>
<div class="col-7 offset-1" id="navbar">
Customiser
News
About us
<?php
if (!empty($_SESSION['logged'])){
echo 'Account';
}else{
echo 'Account';
}
?>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12 text-center">
<h1>Customiser</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<img src="label.png" id="Gin_Label">
</div>
<div id="labeltext">
text
</div>
<div class="col-md-4 offset-md-2">
<div id="textchanger">
<h3>Text Picker</h3>
<input type="text" id="textpicker" name="text_custom">
<input type="button" id="update" value="Click me!" onclick="changetext()">
</div>
<div id="colourchanger" class="row"></div>
<h3>Colour Picker</h3>
<div class="row">
<div class="col-md-1">
<div class="square" id="colourpicker" onClick="invert()"></div>
</div>
<div class="col-md-1 offset-md-1">
<div class="square2" id="colourpicker2" onClick="invert2()"></div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-7">
<h3>Extra Ingredient</h3>
<select name="ingredient">
<option value="none">None</option>
<option value="lemon">Lemon</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-5">
<form method="post">
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function changetext() {
let bruh = document.getElementById('textpicker').value;
document.getElementById('labeltext').innerHTML = bruh;
}
function invert() {
document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
function invert2() {
document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
</script>
</body>
</html>
although I am not very clear about your question
but to use HTML value in PHP
you need to put all the HTML tag that consists of the value you wish to save to the database inside a
<form action="yourPhpNameWithTheRelatedCode" method="POST"> tag
the submit button <button type="submit" name="submit">Submit</button>
then in PHP
if (isset($_POST["submit"])){
$value= $_POST["theNameOfTheTagThatYouWishToSaveThatValue"]??"";
}
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 am having an issue that I have installed BIXOLON printer and want to print a receipt through it. Have used java script to print it but printing page size is too large.
inner Html:
<div id="divToPrint" class="invoice p-3 mb-3" style="max-height:100%">
<div class="row">
<div class="col-12">
<h4 style="text-align:center">
<img src="<?php echo base_url()?>assets/dist/img/AdminLTELogo.png" class="img-responsive" style="max-width:100px;margin:0 auto;display:block">
<br>
</h4>
</div>
</div>
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
<b>Invoice #<?php echo date('M Y').'-'.$id?></b><br>
<br>
<b>Payment:</b> <?php $amount?><br>
<b>Duration:</b> <?php echo $duration ?>
</div>
</div>
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th>Station</th>
<th>Serial</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><?php echo $stationTitle; ?> </td>
<td><?php echo$ id?></td>
<td><?php echo $amount?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<p class="lead">Date <?php echo date('d M Y')?></p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Total:</th>
<td><?php $amount?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
Here is my java script code:
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=400,height=300');
popupWin.document.open();
popupWin.document.write('<html><body style="width: 58mm " onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
Have attached an image with it too. Want to print a short receipt to limited height.
Thank You.
It's hard to tell, bcs you haven't provide the inner div html and styles.
However, try this:
<body style="width: 58mm; height: 120mm; overflow: hidden;" onload="window.print()">
This is my product page
I want to use checkbox for my product page by jquery.. So that customer can easily find their required product with this checkbox . Please do help me as i am in very early stage of jquery.
Thanks in advance
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="sv"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="sv"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="sv"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="sv"><![endif]-->
<html lang="sv">
<script src="assets/js/jquery-1.11.0.min.js"></script>
<body id="rims" class="category category-14 category-falgar hide-right-column lang_sv">
<div id="page">
<div class="columns-container">
<div id="columns" class="container">
<!-- Breadcrumb -->
<div class="breadcrumb clearfix">
<a class="home" href="index.php" title="Återgå till Startsidan"><i class="icon-home"></i></a>
<span class="navigation-pipe" >></span>
<span class="navigation_page">Fälgar</span>
</div>
<!-- /Breadcrumb -->
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12"></div>
</div>
<div class="row">
<div id="left_column" class="column col-xs-12 col-sm-3">
<!-- Block layered navigation module -->
<div id="layered_block_left" class="block">
<p class="title_block">Sök Fälgar</p>
<div class="block_content
<form action="#" id="layered_form">
<div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Storlek</span>
</div>
<ul id="" class="col-lg-12 ">
<?php include 'php/config.php';
$sql =mysql_query("select * from size");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="size" id="size<?php echo $row['size']?>" value="<?php echo $row['size']?>" />
<label for="layered_id_attribute_group_86">
<?php echo $row['size']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bredd</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_4" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from width");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_33" id="layered_id_attribute_group_33" value="33_4" />
<label for="layered_id_attribute_group_33">
<?php echo $row['width']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bultmönster</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_2" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from bolt");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_8" id="layered_id_attribute_group_8" value="8_2" />
<label for="layered_id_attribute_group_8">
<?php echo $row['bolt']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">ET</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_6" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from offset");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_205" id="layered_id_attribute_group_205" value="205_6" />
<label for="layered_id_attribute_group_205">
<?php echo $row['offset']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
</div>
<input type="hidden" name="id_category_layered" value="14" />
</form>
</div>
<div id="layered_ajax_loader" style="display: none;">
<p>
<img src="images/loader.gif" alt="" />
<br />Laddar...
</p>
</div>
</div>
<!-- /Block layered navigation module -->
</div>
<!-- Left Panel end -->
<div id="center_column" class="center_column col-xs-9 col-sm-9" >
<h1 class="page-heading product-listing"><span class="cat-name">Fälgar </span>
</h1>
<div class="content_sortPagiBar clearfix">
<div class="sortPagiBar clearfix">
<!-- /Sort products -->
<!-- nbr product/page -->
<!-- /nbr product/page -->
</div>
<div class="top-pagination-content clearfix">
<!-- Pagination -->
<div id="pagination" class="pagination clearfix">
<form class="showall" action="" method="get">
<div>
<input type="hidden" name="id_lang" value="9" />
<input type="hidden" name="id_category" value="14" />
<input type="hidden" name="controller" value="category" />
<input name="n" id="nb_item" class="hidden" value="1098" />
</div>
</form>
</div>
<?php
$sql =mysql_query("select * from items ");
$num_rows = mysql_num_rows($sql);
?>
<div class="product-count">
Visar <?php echo $num_rows; ?> artiklar
</div>
<!-- /Pagination -->
</div>
</div>
<!-- Products list -->
<!--ul-->
<div class="product_list grid row">
<?php
while($row=mysql_fetch_array($sql)){
?>
<!--li-->
<div class="ajax_block_product col-xs-6 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">
<div class="layered" itemscope itemtype="http://schema.org/Product" >
<div class="layered_filter" >
<div class="product-image-container" >
<a class="product_img_link"href="#" title="<?php echo $row['model_name']?> " itemprop="url">
<img class="replace-2x img-responsive" src="admin/itempics/<?php echo $row['itemno']?>.jpg" alt="<?php echo $row['model_name']?> " title="<?php echo $row['cname']?> " width="250" height="250" itemprop="image" />
</a>
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="SEK" />
</div>
</div>
</div>
<div class="layered_filter">
<h5 itemprop="name">
<a class="product-name" href="#" title="<?php echo $row['model_name']?> " itemprop="url" >
<b><?php echo $row['model_name'], $row['cname'], $row['itemno'], $row['size'], $row['width'], $row['offset'], $row['colour']?></b>
</a>
</h5>
<p class="product-desc" itemprop="description">
<?php echo $row['model_name']?>
</p>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
<span itemprop="price" class="price product-price">
<?php echo $row['price']?> ,00 kr
</span>
<meta itemprop="priceCurrency" content="SEK" />
</div>
<div style="margin-bottom:10px;" class="button-container">
<a class="button ajax_add_to_cart_button btn btn-default" href="index.php?con=8" id="rims_add_cart<?php echo $row['items_id']; ?>" rel="nofollow" title="Lägg till i varukorgen" data-id-product="1338" data-value="<?php echo $row['items_id']; ?>" >
<span>Lägg till i varukorgen</span>
</a>
<a style="margin-top:5px;" itemprop="url" class="button lnk_view btn btn-default" href="index.php?con=11 & itemno=<?php echo $row['items_id']; ?>" title="View">
<span>Mer</span>
</a>
</div>
<div class="product-flags">
</div>
<script>
$("#rims_add_cart<?php echo $row['items_id']; ?>").click(function() {
var addcart = $(this).data('value');
$.ajax({
type: "GET",
url: "session_cart_items.php",
data: {addsessioncart : addcart},
//cache: false,
});
//alert($(this).data('value'));
});
</script>
</div>
<div class="functional-buttons clearfix">
</div>
</div><!-- .product-container> -->
</div><!--li end-->
<?php
}
?>
</div><!--ul end-->
</div>
</div>
</div>
</div>
</div><!-- #center_column -->
</div><!-- .row -->
</div><!-- #columns -->
</div><!-- .columns-container -->
<!-- Footer -->
</div><!-- #page -->
<script type="text/javascript" src="assets/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.widget.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.layered >div').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.layered >div[data-category=' + this.id + ']').show();
});
} else {
$('.layered >div').show();
}
});
</script>
</div>
</body>
</html>
This is my code for the above.. I am using php as backend .