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.
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
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 } ?>
I would like to achieve such an effect, except that when you click on the picture (link) jquery script sends a GET to the same file from the fact that with another ID. I mean the dynamic reload the page without refreshing the addition of a nice effect in the attached link.
my code :
<script>
$('a.menu').click(function(){
$('.content').html('');
})
</script>
<div class="content" id="page_effect" style="padding:0px; display:none;">
<div class="separator" style="margin: -17px auto;"></div>
<span class="choose-product"> Wybierz Produkt</span>
<p>
<?php
$kat=$_GET['kat'];
$co_ile_strona=9;
//----------------
$dopisz="";
if (is_numeric($kat)) {
$dopisz=" WHERE kat_id='".$kat."'";
$wyk=mysql_query("SELECT * FROM kategorie WHERE kat='".$kat."'");
while($ww=mysql_fetch_array($wyk)) {
$dopisz.=" OR kat_id='".$ww['id']."'";
}
}
$sile=false;
$wyk=mysql_query("SELECT * FROM produkty ".$dopisz."");
if ($ile=mysql_num_rows($wyk)) {
if (!$sile) {
$nazwa = mysql_fetch_assoc(mysql_query("SELECT * FROM kategorie WHERE id='".$_GET['kat']."'"));
if(strlen($nazwa['nazwa']) > 0)
$nazwa = $nazwa['nazwa'];
?>
<div style="text-align: center; width: 80%;margin: 0 auto;margin-top: 39px;">
<a href="produkt.html"><div class="product-box">
<img src="images/picasso0.png" alt="Product"/>
<span class="product-title"><?=$nazwa?></span>
</div>
</a>
<?
$sile=true;
}
if (!$_GET['strona']) $strona=1; else $strona=$_GET['strona'];
$start=($strona*$co_ile_strona)-$co_ile_strona;
mysql_data_seek($wyk,$start);
$licz=0;
while(($ww=mysql_fetch_object($wyk)) && $licz<$co_ile_strona) { $licz++;
?>
<a href="<?=strtolower(seo($ww->nazwa))?>-<?=$ww->id?>p.html"><div class="product-box">
<img src="produkty/front/<?=$ww->front?>" alt="<?=$ww->nazwa?>"/>
<div class="name2"><span><?=$ww->nazwa?> </span></div>
</div>
</a>
<?
}
} else echo "<span style='color: #ff0000; font-size: 12pt; font-weight: bold;'>Przepraszamy, ale nie znaleziono produktów pasujących do tego zapytania</span>";
?>
</div>
<div class="menu-bottom" style="text-align:center;">
<span style="position: relative;top: 25px;display: inline-flex;margin-bottom: 20px;">Wybierz serię:
<ul>
<?php
$zapas=$_GET['kat'];
$wyk=mysql_query("SELECT * FROM kategorie WHERE kat='0' and wid='1' ORDER BY poz ASC");
while($ww=mysql_fetch_object($wyk)) {
?> <!--<?/*=$ww->nazwa?>-<?=$ww->id*/?>k.html*/-->
<li> <? if($_GET['kat']==$ww->id) echo "<span style='color: #000;'>".$ww->nazwa.""; else echo $ww->nazwa?></li>
<? } ?>
</ul>
</span>
</div>
<!-- end .content --></div>
link : Click here
As mentioned in the comment, you should send an AJAX request to the page that is responsible for handling the database tasks. You can use get() or post() function which is a shorthand of AJAX function as stated in jQuery documentation.
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
I've prepared a simple jsFiddle demonstrating how the task can be achieved (please note the event.preventDefault() call):
$(document).ready(function(){
$("button").click(function(e){
var URL = '';
$.get(URL,function(data){
console.log("Status: " + status);
e.preventDefault();
});
});
});
Hope that helps.
I'm new to jQueryUI and I'm not able to drag multiple <li> elements to the drop area. However I managed to drag one and drop it on the drop area. Please can anyone help me with this.
JavaScript
$(function() {
$trash= $( "#trash" );
$("a", ".polaroids").draggable({
zIndex: 999,
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("a", ".polaroids").selectable();
$trash.droppable({
accept: ".polaroids a",
activeClass: "custom-state-active",
drop: function( event, ui ) {
$(this).append(ui.draggable);
}
});
});
Here is the <div> in which the <li> elements are dragged but one by one
<div class="st_view_container">
<div class="st_view">
<?php
foreach($gpID as $k => $v) {
?>
<div id="stv_content_<?php echo $v;?>" class="st_tab_view st_first_tab_view">
<ul class="polaroids" id ="polaroids">
<?php
$sql2=mysql_query("select * from user_group WHERE group_id='$v' AND user_id=3");
$i=1;
while($row=mysql_fetch_array($sql2)) {
$memid=$row['member_id'];
$sql1=mysql_query("select * from users_profile WHERE uid='$memid'");
while($row1=mysql_fetch_array($sql1)) {
$ufname=$row1['fname'];
$ulname=$row1['lname'];
$upic=$row1['profile_pic'];
?>
<li>
<a href="#" title="<?php echo $ufname; ?>">
<img src="../<?php echo $upic; ?>" rel="<?php echo $row1['uid']?>" width="65px" height="65px" />
</a>
</li>
<?php
if($i%6==0) {;}
$i++;
}
?>
</ul>
</div>
<?php } ?>
</div> <!-- /.st_view -->
</div> <!-- /.st_view_container -->
and here is the <div> in which i want the multiple elements to be dropped, but not one by one.
<div id="trash" style="width:200px; height:200px; border:1px solid;">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
Here is a demo based on some research…
Is it possible to link two jquery.ui draggables together?
grouping draggable objects with jquery-ui draggable
Can't drop jquery ui helper on droppable
How to reimplement jQuery's default helper in a custom helper
and me playing with the jQueryUI droppable photo manager demo which is what you are using as a template.
Functionality includes single click and drag (as is the default behaviour) or use Ctrl+left click to select multiple items and then drag. The drag helper function is used to select all the items with class="selected" and the drop function is customised to extract the img elements from the container the drag helper added them to. The other function simple enables the Ctrl+click behaviour.
The following code is duplicated below from the demo but does require jQuery, jQueryUI and one of the jQueryUI themes.
HTML
<ul id="draggable">
<li><img src="nature-q-c-50-50-1.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-2.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-3.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-4.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-5.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>
<div id="trash">
<h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash"></span></h4>
</div>
CSS
body {
font-family:"Trebuchet MS";
}
#draggable {
margin:0;
padding:10px;
width:300px;
list-style-type:none;
background-color:#000;
}
li {
display:inline;
}
img {
border:5px solid white;
}
.image-group img {
margin-right:5px;
}
#trash {
margin-top:10px;
width:200px;
height:200px;
border:1px dotted #000;
}
.selected {
border-color:#aed0ea
}
#trash h4 {
margin:0;
padding:0 5px;
}
.ui-icon {
display:inline-block;
}
JavaScript
$('#draggable li').draggable({
revertDuration:100,
helper:function() {
var selected = $('#draggable img.selected');
if (selected.length === 0) {
selected = $('img', $(this)).addClass('selected');
}
console.log('selected', selected);
var container = $('<div class="image-group"/>');
container.append(selected.clone());
console.log('container', container);
return container;
},
cursorAt:{ left:25,top:25 }
});
$('#trash').droppable({
drop: function(event, ui) {
var newItems = $(ui.helper).find('img').clone(false)
.removeClass('selected');
$(this).append(newItems);
console.log('ui.draggable', ui.draggable);
$('#draggable img.selected').parent().remove();
}
});
$('#draggable li').click(function(event) {
if (event.ctrlKey) {
$('img', $(this)).toggleClass('selected');
}
});
I have a problem I've been trying to solve for the past days. I have a Jquery that updates an HTML and creates new content inside a div tag. The thing is that the javascript does not apply on the generated code. In other words, I could take the exact output that the Php gives me, put it in the html code directly and it works, but if it comes from the php while the page is running it won't work, it doesn't display the images correctly in a slideshow jflow.
Here is the HTML header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
/* SLIDESHOW AT HOMEPAGE */
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<script type="text/javascript">
/* Function to show/hide the side menu for all images */
function showDIV(e)
{
var notEmpty = true;
var count = 0;
while(document.getElementById('subCat'+count) != null)
{
document.getElementById('subCat'+count).style.display = 'none';
count++;
}
document.getElementById(e).style.display = 'block';
}
/* MENU INTERACTION */
function showContent(cmd, id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
document.getElementById("controller").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getMain.php?cmd="+cmd+"&id="+id,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<link rel="stylesheet" type"text/css" href="css/stylesheet.css" />
<link rel="shortcut icon" href="logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper" >
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
KARIM VICTOR TABAR
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<?php
$count = 0;
foreach (new DirectoryIterator('images/menuImages') as $fileInfo)
{
if($fileInfo->isDot()) continue;
echo "<h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo->getFilename() ."');\"><a href='#'>".$fileInfo->getFilename() ."</a></h2><div class='acc_container' id='container".$count."'><div class='block' name='subCats' id='subCat".$count."'><ul>";
foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2)
{
if($fileInfo2->isDot() || $fileInfo2 == "thumbnails") continue;
echo "<li>".$fileInfo2->getFilename() . "</li>";
}
echo "</ul></div></div>";$count++;
}
?>
<div id="navigationlinks">
<ul>
<li>BIO</li>
<li>CONTACT</li>
<li>BLOG</li></ul>
</div>
</div>
<!-- Images Thumbnails Categories -->
<div id="contentMain">
<div id="slideshow">
<img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" />
<img src="images/homepage/et1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga2.jpg" width = "750px" alt="" />
<img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" />
<img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo2.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo5.jpg" width = "750px" alt="" />
<img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" />
<img src="images/homepage/wavy1.jpg" width = "750px" alt="" />
<img src="images/homepage/Wenya.jpg" width = "750px" alt="" />
</div>
</div>
</body>
</html>
And Here is the Php code that generates the new HTML(getMain.php)
<?php
$cmd=$_GET["cmd"];
$id = $_GET["id"];
/* The Thumbnail Display */
if($cmd == 1)
{
echo "<div id='thumbnailcontentplaceholder'>";
echo "<div id='thumbnailcontent'>";
echo "<ul>";
$dir = "images/menuImages/".$id."/thumbnails";
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<li>";
echo "<a href='#' title='".$file."'><img src='".$dir."/".$file."' alt='' /></a>";
echo "<div id='thumnailtitle'>".substr($file, 0, strpos($file, "."))."</div>";
echo "</li>";
}
closedir($dh);
}
}
echo "</div></div>";
}
if($cmd == 2)
{
$dir = "images/menuImages/".$id;
$count = 1;
$nFiles = countFiles($dir);
echo "<div id='imageplaceholder'> \n";
/* No1 No2 No3 ... */
echo "<div id='controller' class='hidden'>\n";
for($i =1; $i < $nFiles; $i++)
{
echo "<span class='jFlowControl'>No ".$i."</span>\n";
}
echo "</div>";
echo "<div id='slides'>";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<div><img src='".$dir."/".$file."'></div>\n";
}
closedir($dh);
}
}
echo "</div>\n";
echo '<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a> </div>';
echo '<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br></div></div>';
}
function countFiles($dir)
{
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
}
if ($files)
$num_of_files = count($files) - 2; // we substract 2 because . and .. are included
else
die('there is an error');
return $num_of_files;
}
?>
Thanks
Real HTML that used to work was like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){
//On Click
$('.acc_trigger').click(function(){
('#open').click()
});
});
</script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type"text/css" href="../../css/stylesheet.css">
<link rel="shortcut icon" href="../../logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper">
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
KARIM VICTOR TABAR
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<h2 class="acc_trigger">EDITORIAL</h2>
<div class="acc_container">
<div class="block"> <ul> <li>BEIJING BLUE</li>
<li>GAGA</li>
<li>DOUBLE TROUBLE</li>
<li>EXTRATERRESTRIAL DREAMS</li>
<li>LIFE RUSH</li>
<li>RODEO GLAM</li>
<li>WANDERLUST</li>
<li>RUN AWAY ANGEL</li>
<li>RUSSIAN STANDARD</li>
<li>HOLLYWOOD HILLS</li></ul>
</div>
</div> <h2 class="acc_trigger">TRAVEL</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>HONG KONG</li> </li>
<li>DUBAI, UAE</li>
<li>KYOTO, JAPAN</li>
<li>MIAMI, USA</li>
<li>L.A., USA</li></ul>
</div>
</div>
<h2 class="acc_trigger">ART</h2>
<div class="acc_container">
<div class="block">
<ul> <li>MIRROR ANGEL</li>
<li>ROUGE</li>
<li>VIOLET</li>
<li>NOIRE</li></ul>
</div>
</div> <h2 class="acc_trigger">VIDEO</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>ZIGMAT - BETWEEN BULLETS VIDEO</li><li>ZIGMAT - BEHIND THE SCNES</li></ul>
</div>
</div>
<h2 class="acc_trigger">EXHIBITIONS</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>2009 RESIDENT, MONTRÉAL, CANADA</li><li>2011 ART WALK, HONG KONG, CHINA</li>
</ul>
</div>
</div><!-- <h2 class="acc_trigger">PRESS</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>NME</li>
<li>LIVE FAST MAG</li>
<li>GURU</li></ul>
</div>
</div>
--><div id="navigationlinks">
<ul>
<li>BIO</li>
<li>CONTACT</li>
<li>BLOG</li></ul>
</div> <!-- <div id="buyherelogo">
<img src="../../store/buyhere.png" width="150" border="0">
</div>
--></div>
<!--IMAGE // RIGHT PORTION -->
<div id="imageplaceholder">
<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
<span class="jFlowControl">No 4</span>
<span class="jFlowControl">No 5</span>
<span class="jFlowControl">No 6</span>
<span class="jFlowControl">No 7</span>
</div>
<div id="slides">
<div><img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"></div>
</div>
<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>
</div>
<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br>
</div>
</div>
</div>
</div>
</body>
</html>
When you bind events, or call jQuery functions, the element needs to exist in the DOM for jQuery to find it.
Because you are populating your page after the script has executed, there's no element's to be selected (despite placing the selection in a document.ready callback.
If you did a console.log on $('div#controller') you'd see an empty jQuery object.
If you, instead, used the complete callback to register your jsFlow call, you should see things working as expected.
Is there a reason you're not using jQuery's normalized ajax functions?
You use <div id="contentMain"> in the code, but you call it on div#controller? Anyways, it wouldn't work even if you specified the correct selector, because as zzzzBov answered, when the page loads, your div is empty. You have to recall the jFlow function after you update the content:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
$("div#contentMain").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
}