Hi everybody I have the following code. When I run it on a testing environment it works quite fast, but when I deploy in production it takes up to 32 seconds to load all the icons. Could be the queries the problem? Because in testing I have only few records in DB but in production 2 tables have about 9000 entries each... I really don't know how to speed up.. I put everything inside $(document).ready, put some script in the header and 3 in the footer. Or the Ajax call could make everything working slower in production?
Thank you in advance
<?php
ini_set('memory_limit', '-1');
session_start();
include("function.php");
// if ( (empty($_SESSION['email']) ) || (empty($_SESSION['password'])) ){
if ( (empty($_SESSION['email'])) && ($_SESSION['flagVariable'] !== 1) ) {
Header("location: index.php");
}
else {
$conn = connessioneDB();
?>
<!--
*
* Copyright �<?php echo date("Y"); ?>. Poste Italiane. All Rights Reserved.
* Permission to use, copy, modify, and distribute this software and its
* documentation for educational, research, and not-for-profit purposes,
* without fee and without a signed licensing agreement, is hereby granted,
* provided that the above copyright notice, this paragraph and in all copies,
* modifications, and distributions.
*
* Contacts for commercial licensing opportunities:
*
* Author: Daniel
* Reviewed By: Emilio
* Email:
* Mobile:
*
*
-->
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PCMDBtool ver 2.2.0 | REPORTS</title>
<meta name="description" content="A responsive, magazine-like website layout with a grid item animation effect when opening the content" />
<meta name="keywords" content="grid, layout, effect, animated, responsive, magazine, template, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="DataTables/extensions/Buttons/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link href="rete/css.css?family=Fjalla+One|Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<script src="rete/jquery-1.12.4.js"></script>
<script src="rete/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="zebra_form.css">
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/fnSetFilteringDelay.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="rete/jquery-confirm.min.css">
<script src="rete/jquery-confirm.min.js"></script>
<script language="javascript" type="text/javascript" src="catalog.js"></script>
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/Spacetree.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jit-yc.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.sumoselect.min.js"></script>
<link rel="stylesheet" href="css/sumoselect.css">
<style type="text/css">
.blurred{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
</style>
</head>
<body>
<div class="container">
<button id="menu-toggle" class="menu-toggle"><span>Menu</span></button>
<div id="theSidebar" class="sidebar">
<?php navigationRole($_SESSION['role_id']); ?>
<button class="close-button fa fa-fw fa-close"></button>
</div>
<div id="theGrid" class="main">
<section class="grid">
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Elenco Servizi Operativi</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">BC</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Business Criticality</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Apparati/Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i>Elenco Apparati / Servizi </span>
</a>
<a class="grid__item hvr-border-fade" onclick="javascript:AssetSoServ()" href="#">
<h2 class="title title--preview">S.O. in Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Vista completa Sistemi Operativi in Servizi</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Tripletta</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Vista completa Tripletta</span>
</a>
</section>
<section id="content" class="content">
<div class="scroll-wrap">
<script type="text/javascript" class="init">
$(document).ready( function () {
var table = $('#REPORT_SERVIZI').DataTable( {
paging: true,
"processing": true,
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"scrollX": true,
"bDestroy": true,
"bRetrieve": true,
"ordering": false,
"iDisplayLength": 100,
"info": true,
"sDom": 'ltipr',
"bDestroy": true
} );
$("#filterboxA").keyup(function() {
table.search(this.value).draw();
});
var tables = $('#TRIPLETTA').DataTable( {
"paging": false,
"bFilter": false,
"processing": true,
"serverSide": false,
"deferLoading": 57,
"deferRender": true,
"scrollY": 300,
"scrollX": true,
"info": false,
"bPaginate": false,
"bRetrieve": true
} );
//tables.fnStandingRedraw();
var tableBC = $('#BC').DataTable( {
paging: true,
"processing": true,
"ajax": "asset_BC.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": false,
"info": true,
"sDom": 'ltipr',
"bDestroy": true
} );
$("#filterboxE").keyup(function() {
tableBC.search(this.value).draw();
});
tableSA = $('#SA').DataTable(
{
paging: true,
"processing": true,
"ajax": "asset_SA.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": true,
"info": true,
"sDom": 'ltipr',
"bDestroy": true,
} );
$("#filterboxF").keyup(function() {
tableSA.search(this.value).draw();
});
document.getElementById('filterboxF').addEventListener('keypress', function (e)
{
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
tableSA.rows( { search:'applied' } ).data().each(function(value, index) {
//console.log(value, index);
var array = [];
array.push(value);
//console.log(array, index);
});
}
});
//table.buttons().container().appendTo( $('#stampaXls', table.table().container() ) );
tableSO = $('#SO').DataTable(
{
paging: true,
"processing": true,
"ajax": "asset_SO.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": true,
"info": true,
"sDom": 'ltipr',
"bDestroy": true,
columns:
[{
title: "Operation",
class:"center" },
{ title: "Nome Servizio",
class:"center" },
{ title: "ID Servizio",
class:"center" },
{ title: "S.O.",
class:"center" },
{ title: "Patch Level",
class:"center" },
{ title: "Valida Dal",
class:"center" },
{ title: "N° di Apparati",
class:"center" }
]
} );
$("#filterboxG").keyup(function() {
tableSO.search(this.value).draw();
});
document.getElementById('filterboxG').addEventListener('keypress', function (e)
{
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
tableSO.rows( { search:'applied' } ).data().each(function(value, index) {
//console.log(value, index);
var array = [];
array.push(value);
//console.log(array, index);
});
}
});
// when a row is clicked, show a popup menu containing all the devices inside a Service
$('#SO tbody').on('click', 'tr', function () {
var data = tableSO.row( this ).data();
//alert( 'You clicked on '+data[0]+'\'s row' );
$.ajax({
type:'POST',
url:'utility3.php',
data: { opServizio: data[0], servizio: data[1], sistOp: data[3], midware: data[4], valido_dal: data[5] },
success: function(msg) {
$('#contextMenuIdConfApparati').fadeIn('slow');
$('#resultApparatiList').html(msg);
},
error: function(err) {
alert('Errore: ' + err);
}
});
} );
//table.buttons().container().appendTo( $('#stampaXls', table.table().container() ) );
} );
function exportSQL(tab){
location.href = "exportSQL.php?tab=" + tab;
}
var path = "<?php echo $_SERVER['REQUEST_URI']; ?>";
history.pushState(null, null, path + window.location.search);
window.addEventListener('popstate', function (event) {
history.pushState(null, null, path + window.location.search);
});
function clearObscuration(liv){
$("#closing").fadeIn();
$("#" + liv).fadeOut("slow", "swing");
}
function Obscuration(a){
$( a ).addClass("blurred");
removeHref();
}
function refreshDati( a ){
$('#' + a ).empty();
}
function exportREPORTS(tab){
location.href = "exportREPORTS.php?tab=" + tab;
}
function exportREPORTS2(tab){
location.href = "exportREPORTS_SA.php?tab=" + tab;
}
function exportREPORTS3(tab){
location.href = "exportREPORTS_SO.php?tab=" + tab;
}
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/fnSetFilteringDelay.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="DataTables/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Report Servizi</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxA">
<a style="color: white" href="javascript:exportREPORTS('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
</div>
<?php
echo "<table id=\"REPORT_SERVIZI\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>\n";
echo "<th>Codice Iniziativa</th>\n";
echo "<th>Servizio Operativo</th>\n";
echo "<th>Owner</th>\n";
echo "<th>Acronimo</th>\n";
echo "<th>Stato</th>\n";
echo "<th>Piattaforma</th>\n";
echo "<th>Service</th>\n";
echo "<th>DR</th>\n";
echo "<th>Cert</th>\n";
echo "<th>Sla D</th>\n";
echo "<th>Sla T</th>\n";
echo "</tr>\n";
echo "</thead>\n";
echo "<tbody>\n";
$stid = oci_parse($conn, "SELECT * FROM PCMDB_CAT.V_SERVIZIO WHERE STATUS!='Da cancelare' AND NOME_SERVIZIO NOT LIKE 'Dummy%'");
oci_execute($stid);
while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {
$qq = "select richiesto_dr from PCMDB_CAT.sic_servizio where id_servizio=".$row['ID_SERVIZIO'];
$stid2 = oci_parse($conn, $qq);
oci_execute($stid2);
$row2 = oci_fetch_array($stid2, OCI_ASSOC);
$DR = $row2['RICHIESTO_DR'];
if ($DR != "Si") { $DR = "No"; }
$ss = "select count(*) from PCMDB_CAT.V_VISTA_COMPLETA where ambiente = 'CERTIFICAZIONE' and id_servizio=".$row['ID_SERVIZIO'];
$stid3 = oci_parse($conn, $ss);
oci_execute($stid3);
$row3 = oci_fetch_array($stid3, OCI_ASSOC);
$numCert = $row3['COUNT(*)'];
if ($numCert > 0) { $CERT = "SI"; } else { $CERT = "NO"; }
echo "<tr>\n";
echo "<td>".$row['CODICE_INIZIATIVA']."</td>\n";
echo "<td>".$row['NOME_SERVIZIO']."</td>\n";
echo "<td>".$row['OWNER']."</td>\n";
echo "<td>".$row['ACRONIMO']."</td>\n";
echo "<td>".$row['STATUS']."</td>\n";
echo "<td></td>\n";
echo "<td>".$row['OPERATION']."</td>\n";
echo "<td>".$DR."</td>\n";
echo "<td>".$CERT."</td>\n";
echo "<td>".$row['SLA_D']."</td>\n";
echo "<td>".$row['SLA_T']."</td>\n";
echo "</tr>\n";
$CERT = "";
}
echo "</tbody>\n";
echo "</table><br>\n";
?>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Business Criticality</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxE">
</div>
<?php
echo "<table id=\"BC\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>Apparato </th>\n";
echo "<th>BC </th>\n";
echo "<th>Servizio </th>\n";
echo "<th>Dominio </th>\n";
echo "<th>Indirizzo IP </th>\n";
echo "<th>SO </th>\n";
echo "<th>Assegnato a </th>\n";
echo "<th>Tipo </th>\n";
echo "<th>CED </th>\n";
echo "<th>Stato </th>\n";
echo "<th>Ambiente </th>\n";
echo "</tr>";
echo "</thead>";
echo "</table><br>";
?>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Elenco Servizi / Apparati</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxF">
<a style="color: white" href="javascript:exportREPORTS2('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
<a id="partialExport" style="color: white" onclick="var limiter = 0; var arrProva =[]; var arrFinal = []; var count = 0; var countTableRows = tableSA.rows( { search: 'applied' } ).count(); tableSA.rows( { search:'applied' } ).data().each(function(value, index) {
arrProva = [value];
count++;
$.ajax({
type:'POST',
url:'exportREPORTS_SA_Filtered.php',
data: { ok: 1, arrayFiltrato: arrProva, countRows: countTableRows },
success: function(msg) {
$('#downloadPartialExport').html('Download Export Parziale');
$('#downloadPartialExport').attr('href',msg);
$('#downloadPartialExport').css('display','inline-block');
},
error: function(err) {
alert('Errore ' + err);
}
});
});"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Parziale</a>
<a style="color:white; font-weight: bold;" id="downloadPartialExport" href=""></a>
</div>
<?php
echo "<table id=\"SA\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>SERVIZIO</th>\n";
echo "<th>APPARATO</th>\n";
echo "<th>Ambiente </th>\n";
echo "<th>Indirizzo IP </th>\n";
echo "<th>Dominio </th>\n";
echo "<th>Sistema Operativo </th>\n";
echo "<th>Service Pack</th>";
echo "<th>Tipo </th>\n";
echo "<th>CED </th>\n";
echo "<th>ID Config </th>\n";
echo "<th>Operation </th>\n";
echo "</tr>";
echo "</thead>";
echo "</table><br>";
?>
</article>
<article class="content__item">
<div class="modal fade" id="contextMenuIdConfApparati" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Numero di Apparati</h5>
</div>
<div class="modal-body">
<p> </p>
<ul id="resultApparatiList" class="list-group list-group-flush"><!-- list-group e list-group-flush consentono di definire e stilizzare una lista di item -->
</ul>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="document.getElementById('contextMenuIdConfApparati').style.display = 'none';">Close</button>
</div>
</div>
</div>
</div>
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Elenco Sistemi Operativi inclusi in un Servizio</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxG">
<a style="color: white" href="javascript:exportREPORTS3('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
<a id="partialExport2" style="color: white" onclick="var limiter = 0; var arrFinal = {}; var count = 0; var countTableRows = tableSO.rows( { search: 'applied' } ).count(); tableSO.rows( { search:'applied' } ).data().each(function() {
arrFinal = tableSO.rows( { search:'applied' } ).data();
count++;
});
$.ajax({
type:'POST',
url:'exportREPORTS_SO_filtered.php',
data: { ok: 1, arrayFiltrato: JSON.stringify(arrFinal), countRows: countTableRows },
success: function(msg) {
$('#downloadPartialExport2').html('Download Export Parziale');
$('#downloadPartialExport2').attr('href',msg);
$('#downloadPartialExport2').css('display','inline-block');
},
error: function(err) {
alert('Errore ' + err);
}
});"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Parziale</a>
<a style="color:white; font-weight: bold;" id="downloadPartialExport2" href=""></a>
</div>
<?php
echo "<table id=\"SO\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "</table><br />";
?>
<button class="close-button"><i class="fa fa-close"></i><span>Close</span></button>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Vista Tripletta</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca stringa <input type="text" id="paramic" name="paramic"> <input type="button" value="Trova" onclick="vistaCompletaTripletta()">
</div>
<?php
echo "<table id=\"TRIPLETTA\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>Servizio</th><th>Sottoservizio</th><th>Funzione</th>";
?>
<script>
function vistaCompletaTripletta(){
var paramic = $("#paramic").val();
$.ajax({
type: "GET",
url: "tripletta.php",
data: {
"param": paramic
},
success: function(chicco){
$("#TRIPLETTA").html(chicco);
},
});
//$('#TRIPLETTA').dataTable().fnDestroy();
var table = $('#TRIPLETTA').DataTable( {
"paging": false,
"bFilter": false,
"processing": true,
"serverSide": false,
"deferLoading": 57,
"deferRender": true,
"scrollY": 300,
"scrollX": true,
"bPaginate": false,
"info": false,
"bRetrieve": true
});
}
</script>
</article>
</div>
</section>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/json2.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<?php } ?>
Related
I'm building a simple chat system using Ajax, jQuery, PHP, MySQLi.
On the chatting page, jquery post request is set to handle user sent messages.
Now the problem is, when I sends a message to a user, the message will be sent successfully, on trying to update the div (chat messages), some of my externally included js files in the index page will stop working. See jQuery code below:
$(function(){
$("#send-msgs").click(function(e){
/* Auto Detect A Link (START)*/
// Get the content
var output = $("#message").val();
var chat_id = $("#chat_id").val();
e.preventDefault();
//Start Post Request
$.ajax({
type: "POST",
url: "post_message.php",
data: "message_text="+output+"&chat_id="+chat_id,
cache: false,
beforeSend: function(){
//Show Events before sending request
$(".chat-main .active .details h6").html("<span class='text-primary'>You: </span><span class='text-secondary'>Sending...");
$(".chat-main .active .date-status h6#time_status").html("--:-- --");
$(".chat-main .active .date-status h6#msg_status").html("<span title='Sending...' class='fa fa-ellipsis-h'></span>");
$("#setemoj").attr({
"disabled" : "disabled",
});
$("#send-msg").attr({
"disabled" : "disabled",
});
},
//If everything looks right, continue
success: function(response){
$.ajax({
type: "POST",
url: "only_load_chat.php",
data: "phone_number=<?php echo #$phone_number1;?>&chat_id="+chat_id,
cache: false,
success: function(response){
// alert(response);
var current_time = $("#js_current_time").val();
var msg = $("#setemoj").val();
$(".chat-main .active .details h6").html("<span class='text-primary'><b>You:</b> </span><span class='text-secondary'>"+output+"</span>");
$(".chat-main .active .date-status h6#time_status").html(current_time);
$(".chat-main .active .date-status h6#msg_status").html("<span title='Seen'><span title='Sent' class='fa fa-check text-primary'></span></span>");
// $(".chat-main .active .details .date-status h6").html(js_current_time);
$("#fetch_chat").html(response);
document.getElementById("setemoj").removeAttribute("disabled");
document.getElementById("setemoj").value = "";
},
})
}
});
});
});
post_message.php file
if($_SERVER['REQUEST_METHOD'] == "POST"){
session_start();
require "./includes/db-config.php";
require "./includes/check_if_login.php";
require "./includes/SaNiTiZer.php";
require "./includes/function.php";
if(isset($_REQUEST['chat_id']) && isset($_REQUEST['message_text'])){
$user_msg = htmlspecialchars($_REQUEST['message_text']);
$chat_id1 = $_REQUEST['chat_id'];
$sql = mysqli_prepare($conn, "INSERT INTO direct_chats_msg(`message`, `user_id`, chat_id) VALUES(?,?,?)");
mysqli_stmt_bind_param($sql, 'sii', $user_msg, $user_id, $chat_id1);
mysqli_stmt_execute($sql);
echo "Done";
} else {
echo "Error in POST request";
}
} else {
echo "Error in POST request";
}
only_load_chat.php
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
session_start();
require "./includes/db-config.php";
require "./includes/check_if_login.php";
require "./includes/SaNiTiZer.php";
require "./includes/settings.php";
require "./includes/function.php";
$phone_number1 = $_REQUEST['phone_number'];
$main_chat_id = $_REQUEST['chat_id'];
?>
<!--<script src="./assets/js/owl.carousel.js"></script>-->
<!--<script src="./assets/js/tippy-bundle.iife.min.js"></script>-->
<!--<script src="./assets/js/bootstrap.js"></script>-->
<!--<script src="./assets/js/switchery.js"></script>-->
<!-- <script src="./assets/js/easytimer.min.js"></script> -->
<!-- <script src="./assets/js/index.js"></script> -->
<!-- <script src="./assets/js/popper.min.js"></script> -->
<!-- <script src="./assets/js/feather-icon/feather.min.js"></script>-->
<!-- <script src="./assets/js/feather-icon/feather-icon.js"></script>-->
<!-- <script src="./assets/js/zoom-gallery.js"></script> -->
<!-- <script src="./assets/js/script.js"></script> -->
<ul class="chatappend">
<?php
$sql = mysqli_prepare($conn, "SELECT * from direct_chats_msg where chat_id=?");
mysqli_stmt_bind_param($sql, 'i', $main_chat_id);
mysqli_stmt_execute($sql);
$get_result = mysqli_stmt_get_result($sql);
if(mysqli_num_rows($get_result)>0){
while($row2 = mysqli_fetch_array($get_result)){
$sender = $row2['user_id'];
$sql2 = mysqli_prepare($conn, "SELECT id, userID, FirstName, LastName, OtherName, DisplayName, reg_date,
about_text, profile_pic, gender, countryCode, phone_number, `address`, `state`, country, website, is_online from accounts where id=?");
mysqli_stmt_bind_param($sql2, 'i', $sender);
mysqli_stmt_execute($sql2);
$get_result2 = mysqli_stmt_get_result($sql2);
$row4 = mysqli_fetch_array($get_result2);
$chat_msg_id = $row2['dcm_id'];
?>
<li style="margin:15px;" class="<?php if($row2['user_id']==$user_id){echo"replies";}else{echo"sent";}?>">
<div class="media">
<div class="profile mr-4"><img class="bg-img" src="./assets/images/avtar/new/<?php echo $row4['profile_pic'];?>" alt="<?php echo $row4['LastName']." ".$row4['FirstName'];?>" /></div>
<div class="media-body">
<div class="contact-name">
<!-- <h5><?php echo $row4['LastName']." ".$row4['FirstName'];?></h5> -->
<h6><?php echo date("h:i:s A", strtotime($row2['chat_time']));?></h6>
<ul class="msg-box">
<li class="msg-setting-main">
<div class="msg-dropdown-main">
<div class="msg-setting"><i class="fa fa-ellipsis-h"></i></div>
<div class="msg-dropdown" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-top:-15px;margin-left:-100px;">
<ul>
<li><i class="fa fa-share"></i>forward</li>
<li><i class="fa fa-clone"></i>copy</li>
<li><i class="fa fa-star-o"></i>rating</li>
<li><i class="ti-trash"></i>delete</li>
</ul>
</div>
</div>
<h5 class="msg-content" id="msg-content<?php echo $row2['dcm_id'];?>" style="<?php if($row2['user_id']==$user_id){echo"background-color:#1c9dea;color:#ffffff;padding:7px;";}else{echo"background-color:#e5edf5;color:#000;padding:7px;";}?>">
<?php echo htmlspecialchars_decode($row2['message']);?><br/>
</h5>
</li>
<div id="link_title<?php echo $chat_msg_id;?>"></div>
<!--</li>-->
<style>
.custom_emoji {
width: 20px;
height: 20px;
background-origin: content-box;
color: transparent;
text-align: center;
padding: 3px;
}
.msg-content a {
color: #FF9800;
text-decoration: none;
border-bottom: 1px dotted #000;
}
.msg-content a:hover { color: #ffffff; }
</style>
</li>
<!-- <script>
function newMesssage() {
var message = $('.message-input input').val();
if($.trim(message) == '') {
return false;
}
// var today = new Date(),
// h = checkTime(today.getHours()),
// m = checkTime(today.getMinutes()),
// s = checkTime(today.getSeconds());
// document.getElementById('cur_time').innerHTML = h + ":" + m + ":" + s;
var current_time = $("#js_current_time").val();
$('<li class="replies" style="margin:15px;">\
<div class="media"> \
<div class="profile mr-4 bg-size" style="background-image: \
url("./assets/images/avtar/new/<?php // echo $profile_pic;?>"); background-size: \
cover; background-position: center center;"></div>\<div class="media-body">\
<div class="contact-name"> <h5> </h5> <h6 id="cur_time">'+current_time+'</h6> \
<ul class="msg-box"> <li> <h5 style=background-color:#1c9dea;color:#ffffff;padding:7px;>\
' + message + '</h5> </li></ul> </div></div></div></li>').appendTo($('.messages .chatappend'));
$('.message-input input').val(null);
$('.chat-main .active .details h6').html('<span>You: </span>' + message);
$(".messages").animate({ scrollTop: $(document).height() }, "fast");
};
</script> -->
</ul>
</div>
</div>
</div>
</li>
<?php require "./includes/current_user_chat_profile(right_sidebar).php";?>
<?php
}
?>
</ul>
<?php
} else {?>
<!-- node.js -->
<?php require "./includes/current_user_chat_profile(right_sidebar).php";?>
<script src="./assets/js/owl.carousel.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/tippy-bundle.iife.min.js"></script>
<script src="./assets/js/bootstrap.js"></script>
<script src="./assets/js/switchery.js"></script>
<script src="./assets/js/easytimer.min.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/feather-icon/feather.min.js"></script>
<script src="./assets/js/feather-icon/feather-icon.js"></script>
<script src="./assets/js/zoom-gallery.js"></script>
<script src="./assets/js/script.js"></script>
<?php
}
} else {
require "./includes/error.php";
}
// } else {
// require "./includes/error.php";
// }
?>
The externally included js files in the only_load_chat.php, when the comments are removed it would make the included js files in the index page not to work (But making the page load too slow), Even after viewing the codes via the developer mode (Ctrl+Shift+I Key), I will be seeing duplicates of the js files.
Please can someone help with me this:
I don't want the externally included js files in the index page disabled, because when disabled, that would make me to include the js files it in the only_load_chat.php, as this would make the website load very slow.
Thanks
So I created a PHP on which I have added the CKEditor5 document That worked great,
After that I realised uploading images does not work. So I started digging in the documentation.
I realise I need a FileImageAdapter, instead of creating my own, I downloaded and uploaded CKfinder and the ckeditor5-ckfinder on GitHUb I uploaded both documents.
My test server is: https://webkeuken.be/
On that after login people can edit somethings, having a page like:
<?php
session_start();
if($_POST['promo'])
{
$xml=simplexml_load_file("../db.xml") or die("Error: Cannot create object");
$usernameDb = $xml->usernameDb;
$passwordDb = $xml->passwordDb;
$hostname = $xml->hostname;
$dbname = $xml->dbname;
// Create connection
$conn = new mysqli($hostname, $usernameDb, $passwordDb, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$_POST['promo']=str_replace("'", "'", $_POST['promo']);
//$sql = "INSERT INTO `product`( `naam`, `info`,`price`) VALUES (,,".."')";
$sql = "UPDATE `promo_balance` SET `promo`='".$_POST['promo']."' WHERE id=1";
if ($conn->query($sql) === TRUE) {
$_SESSION['input']= "New record created successfully";
$last = $conn->insert_id;
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function verify()
{
if(!$_SESSION['user'])
{
if($_POST)
{
if($_POST['user']=="l-admin" && $_POST['pass']=="balance2016")
{
$_SESSION['user']="ok";
}
else
{
echo '
<form method="post" class="text-left" style="margin-top: 2%;">
<label style="margin-top: 2%;">USER</label>
<input type="text" name="user" class="form-control"/>
<label style="margin-top: 2%;">PASSWORD</label>
<input type="password" name="pass" class="form-control"/>
<input type="submit" class="form-control" style="margin-top: 2%;"/>
<span>Foute login gegevens</span>
</form>
';
}
}
else
{
echo '
<form method="post" class="text-left" style="margin-top: 2%;">
<label style="margin-top: 2%;">USER</label>
<input type="text" name="user" class="form-control"/>
<label style="margin-top: 2%;">PASSWORD</label>
<input type="password" name="pass" class="form-control"/>
<input type="submit" class="form-control" style="margin-top: 2%;"/>
</form>
';
}
}
}
function getPromo()
{
$xml=simplexml_load_file("../db.xml") or die("Error: Cannot create object");
$usernameDb = $xml->usernameDb;
$passwordDb = $xml->passwordDb;
$hostname = $xml->hostname;
$dbname = $xml->dbname;
$rij = array();
// Create connection
$conn = new mysqli($hostname, $usernameDb, $passwordDb, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT promo FROM promo_balance where id=1";
$item='';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$item = $row['promo'];
}
} else {
echo "0 results";
}
$conn->close();
return $item;
}
function toonForm(){
echo "<div class='col-lg-6'>";
echo "<h3><i class='fa fa-info'></i> Je kan hier een tekst schrijven, deze past zich aan.</h3>";
echo "<h3><i class='fa fa-bullhorn'></i> Ideaal voor je promoties.</h3>";
echo '<form method="post">';
echo '<label>Pas hier uw tekst aan</label>';
echo '
<div id="toolbar-container"></div>
<div id="editor">
'.getPromo().'
</div>
';
echo "<h5><i class='fa fa-pencil'></i> Deze tool werkt met Word Live</h5>";
echo '<input type="submit" class="btn btn-info btn-block" />';
echo '</form>';
}
function showOptions()
{
echo '<div class="row text-center">
<div class="col-lg-8 col-lg-offset-4">
<h2>Beheer uw promo vak</h2>
</div></div>';
echo '<div class="row">';
echo '<div class="col-lg-4">';
echo '
<script type="text/javascript">
google_ad_client = "ca-pub-3598185186227907";
google_ad_slot = "4603323478";
google_ad_width = 300;
google_ad_height = 250;
</script>
<!-- Extra -->
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
echo '</div>';
echo '<div class="col-lg-2 col-lg-offset-2 text-center ">';
echo '<div class="thumbnail">';
echo '<div class="caption">
<h1><i class="fa fa-arrow-left"></i></h1>
<h3>GA TERUG</h3>
<p> VORIG</p>
</div>';
echo '</div>';
echo '</div>';
echo '</div>';
//END OF ROW 1
echo '<div class="row">';
echo '<div class="col-lg-4">';
echo '<script type="text/javascript">
google_ad_client = "ca-pub-3598185186227907";
google_ad_slot = "4603323478";
google_ad_width = 300;
google_ad_height = 250;
</script>
<!-- Extra -->
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
echo '</div>';
toonForm();
echo '</div>';
echo "</div>";
//END ROW 2
echo '<div class="row">';
echo '<div class="col-lg-4">';
echo '
<script type="text/javascript">
google_ad_client = "ca-pub-3598185186227907";
google_ad_slot = "4603323478";
google_ad_width = 300;
google_ad_height = 250;
</script>
<!-- Extra -->
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
echo '</div>';
echo '</div>';// END ROW 3
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Krijtbord | Pas uw website aan in één klik.</title>
<meta name="description" content="Krijtbord | Pas uw website aan in één klik." />
<meta name="google-site-verification" content="ExQ89lGiGlXTIDoWcfx5CxMkRu-Wtubn8FYir2BJRU8" />
<link href="/bootstrap-assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Style -->
<link href="/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="/plugins/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="/plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="/plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
<link href="/plugins/Icons/et-line-font/style.css" rel="stylesheet">
<link href="/plugins/animate.css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="/css/main.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid ruimte-top">
<div id="vliegerContent" style="padding-top: 4%; padding-bottom: 4%; border-bottom: 1px solid black;background: url('/tegels/bg.jpg'); background-size: cover;" class="text-center">
<h1 style=" width: 100%; text-shadow: 3px 3px #000; color: white; margin-top: 0; margin-left: auto; margin-right: auto; padding-top: 5%; padding-bottom: 5%;"class="text-vertical-center" data-stellar-background-ratio="0.5">Beheerders Pagina</h1>
</div>
<?php verify();?>
<div class="row" style="padding-bottom: 1%; background-color: white;">
</div>
<?php
if($_SESSION['user']=="ok")
{
showOptions();
}
?>
<div class="row" style="border-top: 1px solid black; margin-right: 0; margin-left: 0;">
<div class="text-center ruimte-top">
</div>
</div>
<div class="row ruimte-bottom" style=" margin-right: 0; margin-left: 0;">
<div class="col-lg-4 col-md-4 col-sm-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"><img
alt="Creative Commons License" style="border-width:0"
src="https://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"/></a><a rel="license"
href="http://creativecommons.org/licenses/by-nc-nd/3.0/"></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2">
<a rel="license" href="http://cogitatio.be" id="support">Met de steun van Cogitatio.be</a>
</div>
</div>
</div>
<!-- JS SCRIPTS -->
<script src="https://cdn.ckeditor.com/ckeditor5/15.0.0/decoupled-document/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="/js/modernizr.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="behaviour.js"></script>
<script>
$( "#verstuur" ).prop( "disabled", true );
$("#goed").hide();
function IsEmail()
{
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(regex.test(document.getElementById('email').value))
{
$( "#verstuur" ).prop( "disabled", false );
$("#goed").show();
$("#fout").hide();
}
else
{
$("#goed").hide();
$("#fout").show();
}
}
</script>
<script>
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
DecoupledEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
// Enable the "Insert image" button in the toolbar.
// toolbar: [ 'imageUpload', ... ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
} )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Now my page just renders the getPromo Content,
In my console I get:
Uncaught SyntaxError: Cannot use import statement outside a module
For those who need a CkFinder and CkEditor in there site.
The Setup is quite different as I thought. (Took me a lot of time).
CkEditor setup is quite easy. The CKFinder is ok. But on the docs they do an import. With:
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
This caused an error.
Working Script for Upload
<script>
DecoupledEditor
.create( document.querySelector( '#editor' ), {
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://www.yumyumsushi.be/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
} )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
i am using the materialize framework for my front-end design but when its load initially all looks good but when i return to index there comes the problem with the alignment when i clear the cookies it looks good
This is how its looking
This is the orginal Expected Output.
Can anyone help to resolve the Issuie
<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="<?php echo base_url('assets/') ?>css/materialize.css" rel="stylesheet">
<link href="<?php echo base_url('assets/') ?>css/slippry.css" rel="stylesheet">
<link rel="shortcut icon" href="<?php echo base_url('assets/images/logo/favicon.ico'); ?>" type="image/x-icon">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/'); ?>js/materialize.js"></script>
<title>Tolle Exam No.1 Exam Platform for Nursing Exam | RAILWAY Exam</title>
</head>
<style type="text/css" media="screen">
.morecontent span {
display: none;
}
.morelink {
display: block;
}
nav ul li:hover {
background-color: #00ffbf;
}
.input-field input:focus + label {
color: orange !important;
}
.input-field input:focus {
border-bottom: 1px solid orange !important;
box-shadow: 0 1px 0 0 orange !important
}
#viewMore{
display: none;
}
.dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 300px; /* Changed this to accomodate content width */
max-height: auto;
margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
#hv:hover{
border-radius: 1px solid blue;
}
</style>
<body oncontextmenu="return false;">
<!-- Dropdown Structure -->
<!-- <ul id="dropdown1" class="dropdown-content">
<li>ALL</li>
<li>JEE MAIN</li>
<li>KERALA PSC</li>
<li>RAILWAY EXAMS</li>
</ul>
<nav style="height: 80px; padding: 10px;" class="white">
<div class="nav-wrapper ">
Logo
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li><a class="dropdown-trigger black-text" href="#!" data-target="dropdown1">Competative Exams<i class="material-icons right">arrow_drop_down</i></a></li>
<li>Institution Exams</li>
<li>Notifications</li>
<li>Login / Register <i class="material-icons right">lock</i></li>
</ul>
</div>
</nav> -->
<nav style="height: 100px; padding: 15px;" class="white">
<div class="nav-wrapper white darken-3">
<img src="<?php echo base_url('assets/images/logo/tolle_logo2.png'); ?>" style="height:80px;" alt="logo">
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li><a href="<?php echo base_url(''); ?>" class="black-text" >Home</a></li>
<li><a id="hv" class="dropdown-button black-text" href="#!" data-activates="dropdown" data-beloworigin="true">Competitive Exams<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="hv" href="<?php echo base_url('ins_view'); ?>" class="black-text">Institution Exams</a></li>
<li><a id="hv" href="<?php echo base_url('notification/show_notification1'); ?>" class="black-text">Notifications</a></li>
<!-- Dropdown Trigger -->
<?php if($_SESSION['logged_in']==FALSE){ ?>
Login / Register <i class="material-icons right">lock</i>
<?php }else{ ?>
<a class="black-text" title="Dashboard" href="<?php echo base_url('admin/dashboard'); ?>">Welcome: <?php echo $_SESSION['name']; ?></a>
Logout <i class="material-icons right">lock_open
<?php } ?>
</ul>
</div>
</nav>
<ul id="dropdown" class="dropdown-content collection">
<li class="collection-item">
<a href="<?php echo base_url('exam/ALL'); ?>" >
<span class="title black-text">ALL EXAMS</span>
</a>
</li>
<?php foreach($categories as $cat): ?>
<li class="collection-item">
<a href="<?php echo base_url('exam/'.$cat['name']); ?>" >
<span class="title black-text"><?php echo $cat['name']; ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="<?php echo base_url(''); ?>" class="black-text" >Home</a></li>
</li>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Competitive Exams</div>
<?php foreach($categories as $cat): ?>
<div class="collapsible-body">
<a href="<?php echo base_url('exam/'.$cat['name']); ?>" >
<span class="title blue-text" ><?php echo $cat['name']; ?></span>
</a>
</div>
<?php endforeach; ?></li></ul>
<li><a id="hv" href="<?php echo base_url('ins_view'); ?>" class="black-text">Institution Exams</a></li>
<li><a id="hv" href="<?php echo base_url('notification/show_notification1'); ?>" class="black-text">Notifications</a></li>
<!-- Dropdown Trigger -->
<?php if($_SESSION['logged_in']==FALSE){ ?>
Login / Register <i class="material-icons right">lock</i>
<?php }else{ ?>
<a class="black-text" title="Dashboard" href="<?php echo base_url('admin/dashboard'); ?>">Welcome: <?php echo $_SESSION['name']; ?></a>
<li></li>Logout <i class="material-icons right">lock_open
<?php } ?>
</ul>
<!-- Dropdown Structure -->
Above is my Header File
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript" src="<?php echo base_url('assets/') ?>js/slippry.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/') ?>js/readmore.js"></script>
<script>
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<script>
(function($) {
$(function() {
$('#article').readmore({
speed: 75,
lessLink: 'Read less'
});
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
}
);
}); // End Document Ready
})(jQuery); // End of jQuery name space
</script>
<?php
if( $this->session->flashdata('msg') ){
?>
<?php echo '<script>Materialize.toast("'.$this->session->flashdata('msg').'", 3000)</script>' ?>
<?php } ?>
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
$('.carousel.carousel-slider').carousel();
$('.collapsible').collapsible();
$('.button-collapse').sideNav();
$('.modal').modal();
$("#trigg").click(function(){
$("#viewMore").slideToggle("slow");
});
});
</script>
<script>
// count=0;
// $(document).ready(function() {
// var hidden, visibilityState, visibilityChange;
// if (typeof document.hidden !== "undefined") {
// hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
// } else if (typeof document.msHidden !== "undefined") {
// hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
// }
// var document_hidden = document[hidden];
// document.addEventListener(visibilityChange, function() {
// if(document_hidden != document[hidden]) {
// if(document[hidden]) {
// // Document hidden
// alert('hidden');
// count++;
// } else {
// // Document shown
// alert('Revoked');
// if(count ==3){
// alert('Exceeded the Limit');
// }
// }
// document_hidden = document[hidden];
// }
// });
// });
</script>
<script>
function startExam(url) {
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
params += ', resizable=no';
newwin=window.open(url,'FullWindowAll', params);
if (window.focus) {newwin.focus()}
return false;
}
jQuery('#out-of-the-box-demo').slippry();
</script>
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
</body>
</html>
THis is the footer
Some tags are not closed properly.
Somewhere closed </li> tag on the wrong position and somewhere you missed to closing </a> tags.
Help.
Datagrid EasyUI Not Work
Error :
jquery.easyui.min.js:11286 Uncaught TypeError: Cannot read property 'length' of undefined
at Object.renderTable (jquery.easyui.min.js:11286)
at Object.render (jquery.easyui.min.js:11263)
at _6e1 (jquery.easyui.min.js:10149)
at HTMLTableElement.<anonymous> (jquery.easyui.min.js:11055)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at Object.loadData (jquery.easyui.min.js:11054)
at m.fn.init.$.fn.datagrid (jquery.easyui.min.js:10816)
at jquery.easyui.min.js:10770
at Object.success (jquery.easyui.min.js:11526)
Code in : https://pastebin.com/Y2L8UyeV
Controller Pencatatan.php
class Pencatatan extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->model('M_Pencatatan');
}
function index(){
$data['title'] = 'Pencatatan Transaksi';
$data['content'] = 'V_Pencatatan';
$this->load->view('Template/full',$data);
}
function data()
{
$data['datatables'] = $this->M_Pencatatan->show_keuangan_all();
echo json_encode($data);
}
}
Model M_Pencatatan.php
function show_keuangan_all(){
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'id_keuangan';
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
$offset = ($page-1) * $rows;
$result = array();
$result['total'] = $this->db->get('keuangan')->num_rows();
$row = array();
$this->db->limit($rows,$offset);
$this->db->order_by($sort,$order);
$criteria = $this->db->get('keuangan');
foreach($criteria->result_array() as $data)
{
$row[] = array(
'id'=>$data['id_user'],
'keterangan'=>$data['keterangan'],
'value'=>$data['value'],
'tanggal'=>$data['tanggal_transaksi']
);
}
$result=array_merge($result,array('rows'=>$row));
return $result;
}
}
Full View
<html>
<head>
<meta charset="UTF-8">
<title>Pencatatan</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/demo/demo.css">
<script type="text/javascript" src="<?php echo base_url(); ?>asset/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/jquery.easyui.min.js"></script>
<script type="text/javascript">
window.setTimeout("waktu()",1000);
function waktu() {
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("jam").innerHTML = tanggal.getHours();
document.getElementById("menit").innerHTML = tanggal.getMinutes();
document.getElementById("detik").innerHTML = tanggal.getSeconds();
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding-left:5px;padding-right:5px">
<table width="100%">
<tr>
<td style="width:50%;"><font size="5px;" color="#00004d"><b>Pencatatan Keuangan</b></font></td>
<td style="width:50%;" align="right">
</td>
</tr>
<tr>
<td><font size="2px;" color="#7c7c50">Selamat Datang, </font></td>
<td align="right"><font size="3px;" color="#00004d"><b><?php echo date('d F Y'); ?> <Font id="jam" style=""></Font>:
<Font id="menit"></Font>:
<Font id="detik"></Font></b></font></td>
</tr>
</table>
</div>
<div data-options="region:'west',split:true,title:'Main Menu'" style="width:150px;" class="easyui-accordion">
<div title="Transaction" data-options="iconCls:'icon-search'">
<ul class="easyui-tree">
<li>
<span>Transaction</span>
<ul>
<li>
<a style="color:black;text-decoration:none;" href="<?php base_url();?>Pencatatan" data-options="plain:true" onclick="addPencatatan()">Pencatatan</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false,split:false" style="height:25px;background:#A9FACD;padding:0px;"><font size="2px;" color="#00004d"><b><center>© Tuyullie</center></b></font></div>
<!-- Sub Main -->
<div data-options="region:'center',title:'Web Dashboard'">
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:100%;height:100%">
<?php if(isset($content)) {$this->load->view($content);} ?>
</div>
</div>
<script type="text/javascript">
function addPencatatan(){
$('#tt').tabs('add',{
title: 'Pencatatan',
closable: true
});
}
</script>
<!-- End Sub Main -->
</body>
</html>
V_Pencatatan.php View
<table id="dg"></table>
<!-- Toolbar -->
<div id="toolbar">
</div>
<script>
$(document).ready(function(){
$('#dg').datagrid({
border: false,
title: "Pencatatan",
fit: true,
class: "easyui-datagrid",
pagination: true,
pageSize: 50,
striped: true,
sortName: "id_user",
sortOrder: "desc",
pageList: [50, 100, 150, 200, 250],
rownumbers: true,
fitColumns: true,
singleSelect: true,
url:'Pencatatan/data',
columns:[[
{field:'id',tittle:'ID',width:100},
{field:'keterangan',tittle:'Keterangan',width:100},
{field:'value',tittle:'Value',width:100},
{field:'tanggal',tittle:'Tanggal',width:100}
]]
})
})
</script>
Using JQuery Mobile I want to pop a dialog box where the user can enter in search filters and then when they submit the query show the jqmobile grid(trirand) inside a modal window. Is this possible. Here is my code below:
qr.php
<?php require_once '../auth.php'; require_once '../jqSuitePHP/jq-config.php'; // include the PDO driver class require_once '../../jqSuitePHP/php/jqGridPdo.php'; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); if(isset($_REQUEST['a'])) { //get asset information $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); $sql = "SELECT asset_no, dept_id as dept, short_desc, `LOTO #` as loto FROM mfg_eng_common.machine WHERE asset_no ='".$_REQUEST['a']."'"; $result = $conn->query($sql); $row = $result->fetch(PDO::FETCH_ASSOC); //check to see if active work order exists in MWO system for current asset //status_id of 50 mean Approved/Closed $sql = "SELECT count(*) woCnt FROM mfg_eng_mwo.mwo WHERE asset_id ='".$_REQUEST['a']."' AND status_id != 50"; $result = $conn->query($sql); $woCnt = $result->fetch(PDO::FETCH_ASSOC); } else { header("Location: http://rworley-laptop.dayton-phoenix.com/dpg/mwo/forms/MWO.php"); } ?> <!DOCTYPE HTML> <html lang="en-US"> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript"> function getWOCnt() { var cntval = <?php echo $woCnt['woCnt'];?>; if(cntval > 0) { if (confirm(" There are already active work order(s) for asset <?php echo $_REQUEST['a']?>. \n To see active work orders:\n Click Cancel and then click 'Update Work Orders'. \n\n To enter a new work order for asset <?php echo $_REQUEST['a']?> \n Click OK .")) { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } } else { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } }; </script> </head> <body> <div data-role="page" data-theme="b" align="center"> <div data-theme="a" data-role="header"> <h1>Maintenance Work Orders</h1> <img alt="<?php echo $_REQUEST['a']?>" src="../../Machine Pictures/<?php echo $row['dept']?>/<?php echo $row['asset_no']?>.jpg" height="240" width="300"/> <b><br><?php echo $row['short_desc']?></b> </div><!-- /header --> <br> <div data-theme="c" data-content-theme="d" > <hr> <?php echo "PM Procedure" ?> <b>|</b> <?php echo "Loto Procedure" ?> </div> <div data-role="collapsible-set" data-theme="b" data-content-theme="d" > <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a id="newMWO" name="newMWO" data-role="button" data-inline="true" target="_blank" onclick=getWOCnt() > New Work Order </a> </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> Update Work Order </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a href="../../mwo/MWO_mobile.php?a=<?php echo $_REQUEST['a']?>" data-role="button" data-inline="true" data-rel="dialog" target="mwoSearch" data-transition="slidedown" > Search Work Orders </a> </li> </ul> </div> <?php if(!($_POST)) { echo " <a href='#popupBasic' data-rel='popup' data-role='button' data-inline='true'>Quick Search</a> <div data-role='popup' id='popupBasic' data-transition='flip' > <a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a> <form action='#' method='POST'> <div data-theme='a' data-role='header'> <h2>Look Up MWO</h2> </div> <p> Problem<textarea name='search_prob' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_prob' /></textarea> </p> <p> Solution<textarea name='search_sol' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_sol' /></textarea> </p> <p id = 'submit-area'> <input type='submit' data-theme='b' value='Search' id = 'sub1'/> </p> </form> </div> "; } else { echo " <ul data-role='listview' data-inset='true' align='center' data-filter='false' data-theme='b'> <li> <a href=\"QS.php?a=".$_REQUEST['a']."\" data-role='button' data-inline='true' data-rel='dialog' data-transition='slidedown'> Qucick Search Results </a> </li> </ul>"; } ?> <div data-role="footer" data-theme="a"> <h4>Dayton-Phoenix Group, Inc.</h4> </div><!-- footer --> </div><!-- page --> </body> </html>
QS.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MWO Quick Search</title>
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/ui.jqgridmobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shCoreEclipse.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shThemeEclipse.css" />
<script src="../../jquerymobile.jqGrid/js/jquery.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquerymobile.jqGrid.min.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquery.mobile.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/grid.locale-en.js" type="text/javascript"></script>
</head>
<body>
Paging, sorting and searching
</body>
</html>
quickSearch2.php
<!DOCTYPE html>
<html>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="header" data-theme="b" style="margin-bottom: 10px">
<h1> MWO Quick Search Results</h1>
Home
</div>
<!-- HTML table Definition -->
<table id='grid'></table>
<div id='pager'></div>
<!-- Java Scruipt Code -->
<script type='text/javascript'>
var a = <?php echo json_encode($_REQUEST['a']); ?>;
var prob = <?php echo json_encode($_REQUEST['search_prob']); ?>;
jQuery('#grid').jqGrid({
"hoverrows":false,
"viewrecords":true,
//"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
"gridview":true,
"url":"../../mwo/mobile/quicksearch.php?a=" + a + "&search_prob=" + prob,
"loadonce": true,
"rowNum":10,
"height":200,
"autowidth":true,
"sortname":"mwo_id",
"rowList":[10,30,40],
"datatype":"json",
"colModel":[
{"name":"e", "index":"empty", "sorttype":"int", "hidden":true,"width":50,"editable":true},
{"name":"MWO #", "index":"mwo_id", "sorttype":"int", "key":true,"width":80,"editable":true},
{"name":"DPG #", "index":"asset_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Assigned to", "index":"assigned_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Entered", "index":"entered_time", "sorttype":"datetime", "width":80, "editable":true,"datefmt":"m/d/Y", "searchoptions":{sopt:['eq']}, "formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"}},
{"name":"Problem", "index":"long_desc", "sorttype":"string", "width":80, "editable":true},
{"name":"Solution", "index":"solution", "sorttype":"string", "width":80, "editable":true}
],
"pager":"#pager"
});
</script>
</div>
</body>
</html>
json data being used:
{"page":1,"total":2,"records":13,"rows":[{"mwo_id":"1302271211","cell":["","1302271211","38315","-1","2013-07-08 11:13:19","approved test",""]},{"mwo_id":"1302271213","cell":["","1302271213","38315","-1","2013-07-11 09:26:26","yo momma is so fattest","how fat is she? she's so fat she left the house in heels and came back in flip-flops"]},{"mwo_id":"1302271214","cell":["","1302271214","38315","-1","2013-07-12 12:13:55","july test",""]},{"mwo_id":"1302271215","cell":["","1302271215","38315","-1","2013-07-08 08:59:56","test","update2"]},{"mwo_id":"1302271216","cell":["","1302271216","38315","-1","2013-07-09 06:14:02","test",""]},{"mwo_id":"1302271217","cell":["","1302271217","38315","-1","2013-07-08 09:01:30","yep testing","no answer yet"]},{"mwo_id":"1302271218","cell":["","1302271218","38315","-1","2013-07-09 09:59:46","new test of email system",""]},{"mwo_id":"1302271219","cell":["","1302271219","38315","","2013-07-08 12:33:09","email new test",""]},{"mwo_id":"1302271221","cell":["","1302271221","38315","12","2013-07-11 13:20:55","ANOTHER TEST OF NEW ...WITH EMAIL","AND THE ANSWER IS ....."]},{"mwo_id":"1302271222","cell":["","1302271222","38315","","2013-07-11 09:29:58","test...add issue",""]},{"mwo_id":"1302271223","cell":["","1302271223","38315","","2013-07-11 13:11:15","testing",""]},{"mwo_id":"1302271224","cell":["","1302271224","38315","7","2013-07-11 13:27:32","test with auto assign","no solution its all good"]},{"mwo_id":"1302271226","cell":["","1302271226","38315","7","2013-07-12 12:05:02","Meeting test",""]}]}