We Keep Coding

Adding DropDown list in jQuery DataTable

I want to display table's data with jQuery DataTable and sometimes apply an extra data filtering, using the output of a dropdown select input.
The main code for fetching data (fetch.php) is:
<?php
include('db.php');
include('function.php');
$query = '';
$output = array();
$query .= "SELECT * FROM Part_tb ";
if(isset($_POST["search"]["value"]))
{
$query .= 'WHERE part_manufacturer LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR part_id LIKE "%'.$_POST["search"]["value"].'%" ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY part_id ASC ';
}
if($_POST["length"] != -1)
{
$query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connection->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["part_manufacturer"];
$sub_array[] = $row["part_id"];
$sub_array[] = $row["part_category"];
$sub_array[] = $row["part_stock"];
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $filtered_rows,
"recordsFiltered" => get_total_all_records(),
"data" => $data
);
echo json_encode($output);
?>
while the DataTable is defined in index.php as follows:
var dataTable = $('#user_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"actions/fetch.php",
type:"POST"
},
"columnDefs":[
{
"targets":[0, 1],
"orderable":false,
},
],
});
In index.php, i've created 3 dependent dropdown lists, which load data from other tables. Now, i want to take the id of 3rd dropdown list and update the data of Part_tb in fetch.php accordingly. Below, you can see that when 3rd dropdown change, i call a function load_parts():
$(document).on('change', '#sub3_category_item', function(){
load_parts();
});
function load_parts()
{
var action = 'fetch_data';
var filter_part_id = $('#sub2_category_item').val();
$.ajax({
url:"actions/fetch.php",
method:"post",
data:{action:action, filter_part_id:filter_part_id},
success:function(data)
{
$('#user_data').DataTable().ajax.reload();
}
});
}
The problem is that i can't filter the data of fetch.php according to the selected id of #sub2_category_item. Could you help me on that?
I've modified the index.php as follows:
$(document).on('change', '#sub3_category_item', function(){
var filter_part_id = $('#sub3_category_item').val();
$('#user_data').DataTable().destroy();
fill_datatable(filter_part_id);
});
fill_datatable();
function fill_datatable(filter_part_id = '')
{
var dataTable = $('#user_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"searching" : false,
"ajax":{
url:"actions/fetch.php",
type:"POST",
data:{filter_part_id:filter_part_id}
}
});
and fetch.php:
$query .= "SELECT * FROM Part_tb ";
if(isset($_POST['filter_part_id']) && $_POST['filter_part_id'] != '')
{
$query .= "SELECT * FROM Part_tb WHERE part_id IN (SELECT pcfit_name from Part_car_fit_tb WHERE pcfit_id ='".$_POST["filter_part_id"]."') ";
}
but dataTable crashes, when #sub3_category_item is selected. Any idea, how to filter datatable with the value $_POST["filter_part_id"]?

My pagination is jumping around and I can't figure out how to fix it

I'm making a product listings page that uses AJAX calls to post the user's inputted data:
The pagination uses the jQuery inView function to call the next page
(NextPage.php) when loader.gif is in view
InfiniteScroll.js
$(document).ready(function() {
$('#Loader').on('inview', function(event, isInView) {
if (isInView) {
//Pagination
var nextPage = parseInt($('#pageno').val()) + 1;
//Filters
var minimum_wt = $('#hidden_minimum_wt').val();
var maximum_wt = $('#hidden_maximum_wt').val();
var shape = get_filter('shape');
var color = get_filter('color');
var enhancement = get_filter('enhancement');
var matching = get_filter('matching');
$.ajax({
type: 'POST',
url: 'vendors/php/NextPage.php',
data: {
pageno: nextPage,
minimum_wt: minimum_wt,
maximum_wt: maximum_wt,
shape: shape,
color: color,
enhancement: enhancement,
matching: matching
},
cache: false,
success: function(data) {
console.log(nextPage); //For debugging
if(data != '') {
$('#StoneContainer').append(data);
$('#pageno').val(nextPage);
} else {
$('.LoaderContainer').hide(); //Hide infinite scroll
}
}
});
}
});
});
//Checking applied filters
function get_filter(class_name) {
var filter = [];
$('.'+class_name+':checked').each(function() {
filter.push($(this).val());
});
return filter;
}
NextPage.php
<?php
if(isset($_GET['pageno']) || isset($_POST['action'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = $_POST['pageno'];
}
$limit = 10;
$offset = ($pageno-1) * $limit;
//Include database configuration file
include('dbConfig.php');
$SQL = "
SELECT
number,
image1,
wt,
TRUNCATE(length,1) as length,
TRUNCATE(width,1) as width,
CASE
WHEN stonetype = 'SA' THEN 'Sapphire'
WHEN stonetype = 'RU' THEN 'Ruby'
WHEN stonetype = 'TML-P' THEN 'Paraiba'
WHEN stonetype = 'EM' THEN 'Emerald'
WHEN stonetype = 'TS' THEN 'Tsavorite'
WHEN stonetype = 'SI' THEN 'Spinel'
WHEN stonetype = 'GT' THEN 'Garnet'
WHEN stonetype = 'BER' THEN 'Beryl'
WHEN stonetype = 'TML' THEN 'Tourmaline'
WHEN stonetype = 'KO' THEN 'Kornerupine'
ELSE 'n/a'
END AS 'stonetype',
CASE
WHEN enhcode = 'H' THEN 'Heated'
WHEN enhcode = 'N' THEN 'Unheated'
ELSE 'n/a'
END AS 'enhcode'
FROM
stones
WHERE
wt >= 2.5
";
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {
$SQL .= "
AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'
";
}
if(isset($_POST["shape"])) {
$shape_filter = implode("','", $_POST["shape"]);
$SQL .= "
AND stoneshape IN('".$shape_filter."')
";
}
if(isset($_POST["color"])) {
$color_filter = implode("','", $_POST["color"]);
$SQL .= "
AND stonecolor IN('".$color_filter."')
";
}
if(isset($_POST["enhancement"])) {
$enhancement_filter = implode("','", $_POST["enhancement"]);
$SQL .= "
AND enhcode IN('".$enhancement_filter."')
";
}
if(isset($_POST["matching"])) {
$matching_filter = implode("','", $_POST["matching"]);
$SQL .= "
AND pair IN('".$matching_filter."')
";
}
$SQL .= "
ORDER BY
wt ASC
LIMIT
" . $offset. ",
" . $limit. "
";
$res_data = mysqli_query($db, $SQL);
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {
while($row = mysqli_fetch_array($res_data)) {
echo '
<div class="Stone">
<!-- landing page -->
<a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">
<!-- image -->
<div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>
<!-- weight -->
<div class="StoneData">' . $row['wt'] . 'Ct</div>
<!-- type -->
<div class="StoneData">' . $row['stonetype'] . '</div>
<!-- enhancement -->
<div class="StoneData">' . $row['enhcode'] . '</div>
<!-- dimensions -->
<div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>
<!-- item number -->
<div class="StoneData"># ' . $row['number'] . '</div>
</a>
</div>
';
}
}
?>
4 different check box fields and a jQuery range slider so the user
can filter out only the data they want
Filters.js
$(document).ready(function() {
filter_data();
function filter_data() {
var action = 'fetch_data';
//Pagination
var nextPage = parseInt($('#pageno').val()) + 0;
//Filters
var minimum_wt = $('#hidden_minimum_wt').val();
var maximum_wt = $('#hidden_maximum_wt').val();
var shape = get_filter('shape');
var color = get_filter('color');
var enhancement = get_filter('enhancement');
var matching = get_filter('matching');
$.ajax( {
url: 'vendors/php/Filters/FilterData.php',
method: 'POST',
data: {
action: action,
pageno: nextPage,
minimum_wt: minimum_wt,
maximum_wt: maximum_wt,
shape: shape,
color: color,
enhancement: enhancement,
matching: matching
},
async: true,
error:
function(jqXHR, strError) {
if(strError == 'timeout') {
// Do something. Try again perhaps?
alert('Seems like there was an error loading the filters request.');
}
},
success:
function(data) {
$('#StoneContainer').html(data);
$('#pageno').val(nextPage);
$('.LoaderContainer').show(); //Show infinite scroll
},
timeout: 3000
});
}
// Where to find values to be filtered
function get_filter(class_name) {
var filter = [];
$('.'+class_name+':checked').each(function() {
filter.push($(this).val());
});
return filter;
}
// Apply filter_data() of .common_selector
$('.common_selector').click(function() {
filter_data();
});
// Range slider
$('#wt_range').slider({
range: true,
values: [2.5, 30],
min: 2.5,
max: 30,
step: 0.1,
slide:
function(event, ui) {
// prevent thumbs from overlapping
if ((ui.values[1] - ui.values[0]) < 3) {
return false;
}
$('#wt_show').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#hidden_minimum_wt').val(ui.values[0]);
$('#hidden_maximum_wt').val(ui.values[1]);
filter_data();
}
});
// open and close filters menu on mobile
if ($('#StoneContainer').width() < 420 ) {
$('.OpenCloseFilters').on('click', function() {
$('.FiltersContainer').slideToggle();
// refresh button
$('.ResetFiltersToggle0').toggleClass('ResetFiltersToggle1');
// change icon on toggle
$('#MenuIcon').toggleClass('mdi-menu-up mdi-menu-down');
});
}
});
FilterData.php
<?php
if(isset($_POST['pageno']) || isset($_POST['action'])) {
//Include database configuration file
include('../dbConfig.php');
$limit = 10;
$offset = !empty($_POST['pageno']) ? $_POST['pageno']: 0;
$SQL = "
SELECT
number,
image1,
wt,
TRUNCATE(length,1) as length,
TRUNCATE(width,1) as width,
CASE
WHEN stonetype = 'SA' THEN 'Sapphire'
WHEN stonetype = 'RU' THEN 'Ruby'
WHEN stonetype = 'TML-P' THEN 'Paraiba'
WHEN stonetype = 'EM' THEN 'Emerald'
WHEN stonetype = 'TS' THEN 'Tsavorite'
WHEN stonetype = 'SI' THEN 'Spinel'
WHEN stonetype = 'GT' THEN 'Garnet'
WHEN stonetype = 'BER' THEN 'Beryl'
WHEN stonetype = 'TML' THEN 'Tourmaline'
WHEN stonetype = 'KO' THEN 'Kornerupine'
ELSE 'n/a'
END AS 'stonetype',
CASE
WHEN enhcode = 'H' THEN 'Heated'
WHEN enhcode = 'N' THEN 'Unheated'
ELSE 'n/a'
END AS 'enhcode'
FROM
stones
WHERE
wt >= 2.5
";
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {
$SQL .= "
AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'
";
}
if(isset($_POST["shape"])) {
$shape_filter = implode("','", $_POST["shape"]);
$SQL .= "
AND stoneshape IN('".$shape_filter."')
";
}
if(isset($_POST["color"])) {
$color_filter = implode("','", $_POST["color"]);
$SQL .= "
AND stonecolor IN('".$color_filter."')
";
}
if(isset($_POST["enhancement"])) {
$enhancement_filter = implode("','", $_POST["enhancement"]);
$SQL .= "
AND enhcode IN('".$enhancement_filter."')
";
}
if(isset($_POST["matching"])) {
$matching_filter = implode("','", $_POST["matching"]);
$SQL .= "
AND pair IN('".$matching_filter."')
";
}
$SQL .= "
ORDER BY wt ASC
LIMIT
$offset,
$limit
";
$result = mysqli_query($db, $SQL);
$output = '';
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {
if($row = mysqli_fetch_array($result)) {
foreach($result as $row) {
$output .= '
<div class="Stone">
<!-- landing page -->
<a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">
<!-- image -->
<div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>
<!-- weight -->
<div class="StoneData">' . $row['wt'] . 'Ct</div>
<!-- type -->
<div class="StoneData">' . $row['stonetype'] . '</div>
<!-- enhancement -->
<div class="StoneData">' . $row['enhcode'] . '</div>
<!-- dimensions -->
<div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>
<!-- item number -->
<div class="StoneData"># ' . $row['number'] . '</div>
</a>
</div>
';
}
}
} else {
$output = '
<h1 class="Error">
<span class="mdi mdi-filter-remove mdi-48px"></span>
NO STONES MATCH THAT
</h1>
';
}
echo $output;
}
?>
My problem is when the user updates the filters my pagination jumps to the next page so not only will they not see the else statement on FilterData.php (which can obviously be very confusing for the user) but they will get a totally blank page, even when there are some results.
I imagine the solution to be resetting to the first page (of my pagination) every time the data updates. But for some reason I can't figure out how to do it. I tried changing line 52 of Filters.js to $('#pageno').val(0);, but that didn't seem to work as expected.
I know this is probably a very simple issue for you guys and i'm sort of embarrassed even asking but I've been trying to fix this since last Wednesday and still can't get it (i'm pretty new to php). Thank you so much for your time in advance!

JavaScript/AJAX prints weirdly

My JavaScript/AJAX prints comments. It's all good, until I want to insert/get more than one comment. It duplicates itself. This feels like a nesting/missed parenthesis problem in my code, but I can't be able to find it...
My JS code:
$(document).ready(function(){
var url = 'comment-get.inc.php';
$.getJSON(url, function(data) {
$.each(data, function(index, item) {
var t = '';
t += '<div class="comment_holder" id="_'+item.id+'">';
t += '<div class="user"> <img src="src/img/page3_img7.jpg" alt="" class="img_inner fleft">';
t += '<div class="extra_wrapper">';
t += ''+item.username+'<br>';
t += ''+item.date+'<br>';
t += '<button class="button2" type="button" id="'+item.id+'">Delete</button>';
t += '</div></div>';
t += ''+item.message+'<br><br>';
t += '</div>';
$('.comment_holder').prepend(t);
add_delete_handlers();
});
});
add_delete_handlers();
$('#postButton').click(function(){
comment_post_btn_click();
});
function comment_post_btn_click()
{
//text in textarea with username, page and date
var _username = $('#postUsername').val();
var _page = $('#postPage').val();
var _date = $('#postDate').val();
var _message = $('#postMessage').val();
if(_message.length > 0)
{
//proceed with ajax callback
$('#postMessage').css('border', '1px solid #ABABAB');
$.post("comment-set.inc.php",
{
task : "comment-set",
username : _username,
page : _page,
date : _date,
message : _message
}
).success(
function(data)
{
//Task: Insert html into the div
comment_set(jQuery.parseJSON(data));
console.log("ResponseText: " + data);
});
}
else
{
//text in area is empty
$('#postMessage').css('border', '1px solid #FF0000');
console.log("Comment is empty");
}
//remove text after posting
$('#postMessage').val("");
}
function add_delete_handlers()
{
$('.button2').each(function()
{
var btn = this;
$(btn).click(function()
{
comment_delete(btn.id);
});
});
}
function comment_delete(_id)
{
$.post("comment-del.inc.php",
{
task : "comment-del",
id : _id
}
).success(
function(data)
{
$('#_' + _id).detach();
});
}
function comment_set(data)
{
var t = '';
t += '<div class="comment_holder" id="_'+data.comment.id+'">';
t += '<div class="user"> <img src="src/img/page3_img7.jpg" alt="" class="img_inner fleft">';
t += '<div class="extra_wrapper">';
t += ''+data.comment.username+'<br>';
t += ''+data.comment.date+'<br>';
t += '<button class="button2" type="button" id="'+data.comment.id+'">Delete</button>';
t += '</div></div>';
t += ''+data.comment.message+'<br><br>';
t += '</div>';
$('.comment_holder').prepend(t);
add_delete_handlers();
}
});
Comments.php:
<?php
class Comments {
public function set($message, $username, $date, $page) {
$connect = mysqli_connect('localhost', 'root', '', 'trdb');
$sql = "INSERT INTO comments VALUES ('', '$username', '$page', '$date', '$message')";
$query = mysqli_query($connect, $sql);
if($query){
$std = new stdClass();
$std->id = mysqli_insert_id($connect);
$std->message = $message;
$std->username = $username;
$std->date = $date;
$std->page = $page;
return $std;
}
return null;
}
public function del($id) {
$connect = mysqli_connect('localhost', 'root', '', 'trdb');
$sql = "DELETE FROM comments WHERE id = $id";
$query = mysqli_query($connect, $sql);
if($query)
{
return true;
}
}
}
?>
Comment-get.inc.php:
<?php
$page = htmlentities("/index.php?page=maplepancakes", ENT_QUOTES);
$connect = mysqli_connect('localhost', 'root', '', 'trdb');
$sql = "SELECT * FROM comments WHERE page='$page' ORDER BY id DESC";
$result = $connect->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
$row_data = array(
'id' => $row['id'],
'username' => $row['username'],
'date' => $row['date'],
'message' => $row['message']
);
array_push($data, $row_data);
}
?>
<?php
echo json_encode($data);
?>
Comment-set.inc.php:
<?php
if(isset($_POST['task']) && $_POST['task'] == 'comment-set'){
$username = $_POST['username'];
$date = $_POST['date'];
$page = $_POST['page'];
$message = $_POST['message'];
require_once 'comments.php';
if(class_exists('Comments')){
$userInfo = $username;
$commentInfo = Comments::set($message, $username, $date, $page);
$std = new stdClass();
$std->user = $userInfo;
$std->comment = $commentInfo;
echo json_encode($std);
}
}
?>
Picture of the problem (json_encode in the bottom of the picture containing 3 comments):

your comments div container has class .comment_holder so each time with new comment you prepend to all class's so create comment container with unique id an prepend to this. like this $('#comment_container').prepend(t); this with work.

How to open fancybox pop-up view images outside of an iframe which has an image gallery made in php?

I installed a php gallery and configured it and I finally could make it to run inside an iframe.But now when I click at an image, I want it to open that image pop-up view outside the iframe.imgGallery
<?php
if (isset($this->vars['file_list']))
{
$thumb_code['file'] = $this->getThumbCode("file");
foreach ($this->vars['file_list'] as $file)
{
$output = '';
$img_url = $this->genThumbURL($request, $file);
if ($this->settings['use_popup_image_viewer'] == true) {
$url = "?image=" . $request . $file['file'];
if ($this->settings['show_thumbs_under_viewer'] == true) {
$fancy_class = "fancybox-thumbs";
$fancy_attr = "data-fancybox-group=\"thumb\"";
} else {
$fancy_class = "fancybox";
$fancy_attr = "data-fancybox-group=\"gallery\"";
}
} else {
$url = '?view=' . $request . $file['file'];
$fancy_class = "";
$fancy_attr = "";
}
//<<URL>> = $url = ?view=folder/image.jpg
//<<FANCY_CLASS>> = $fancy_class = fancybox-thumbs (If left out fancybox will not work. Use inside class attribute on A tag)
//<<FANCY_ATTR>> = $fancy_attr = data-fancybox-group="gallery" (If left out fancybox will not work. Use on A tag)
//<<TITLE>> = $file['file'] = image.jpg
//<<THUMB_WIDTH>> = $this->settings['thumb_size_' . $this->vars['thumb_size']] = 125 (autodetect thumb size also)
//<<THUMB_HEIGHT>> = $this->settings['thumb_size_' . $this->vars['thumb_size']] = 125 (autodetect thumb size also)
//<<THUMB_LOCATION>> = $this->escapeString($img_url) = phppi/cache/folder/image_small.jpg (may also set to phppi/themes/gallery/themename/images/no_images.png if no image)
//<<THEME_LOCATION>> = $this->showThemeURL(1) = phppi/themes/gallery/themename
$replace_codes = array("<<URL>>",
"<<FANCY_CLASS>>",
"<<FANCY_ATTR>>",
"<<TITLE>>",
"<<THUMB_WIDTH>>",
"<<THUMB_HEIGHT>>",
"<<THUMB_LOCATION>>",
"<<THEME_LOCATION>>"
);
$replace_values = array($url,
$fancy_class,
$fancy_attr,
$file['file'],
$this->settings['thumb_size_' . $this->vars['thumb_size']],
$this->settings['thumb_size_' . $this->vars['thumb_size']],
$this->escapeString($img_url),
$this->showThemeURL(1)
);
echo str_replace($replace_codes, $replace_values, $thumb_code['file']);
}
}
echo "<div style=\"clear: both;\"></div>\n";
}
function showPrevFolderURL($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
echo '?' . $this->vars['dir']['req']['parent'];
} else if ($format == 1) {
return '?' . $this->vars['dir']['req']['parent'];
}
}
function showPrevImageURL($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
if ($this->settings['use_javascript_navigation'] == true)
{
echo 'javascript: phppi.go_prev_image();';
} else {
if (isset($this->vars['file_list'][$this->vars['previous_image_id']]['full_path']))
{
echo '?view=' . $this->vars['file_list'][$this->vars['previous_image_id']]['full_path'];
} else {
echo '';
}
}
} else if ($format == 1) {
if ($this->settings['use_javascript_navigation'] == true)
{
return 'javascript: phppi.go_prev_image();';
} else {
if (isset($this->vars['file_list'][$this->vars['previous_image_id']]['full_path']))
{
return '?view=' . $this->vars['file_list'][$this->vars['previous_image_id']]['full_path'];
} else {
return '';
}
}
}
}
function showNextImageURL($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
if ($this->settings['use_javascript_navigation'] == true)
{
echo 'javascript: phppi.go_next_image();';
} else {
if (isset($this->vars['file_list'][$this->vars['next_image_id']]['full_path']))
{
echo '?view=' . $this->vars['file_list'][$this->vars['next_image_id']]['full_path'];
} else {
echo '';
}
}
} else if ($format == 1) {
if ($this->settings['use_javascript_navigation'] == true)
{
return 'javascript: phppi.go_next_image();';
} else {
if (isset($this->vars['file_list'][$this->vars['next_image_id']]['full_path']))
{
return '?view=' . $this->vars['file_list'][$this->vars['next_image_id']]['full_path'];
} else {
return '';
}
}
}
}
function showUpFolderURL($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
echo '?' . $this->pathInfo($_GET['view'], 'dir_path');
} else if ($format == 1) {
return '?' . $this->pathInfo($_GET['view'], 'dir_path');
}
}
function showThemeURL($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
echo 'phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/';
} else if ($format == 1) {
return 'phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/';
}
}
function showTitle($format = 0)
{
//0 = Output url
//1 = Return url as string
if ($format == 0)
{
echo $this->vars['page_title'];
} else if ($format == 1) {
return $this->vars['page_title'];
}
}
function showSiteName($format = 0)
{
//0 = Output name
//1 = Return name as string
if ($format == 0)
{
echo $this->settings['site_name'];
} else if ($format == 1) {
return $this->settings['site_name'];
}
}
function showLogo($format = 0)
{
//0 = Output img tag
//1 = Return img tag as string
if ($format == 0)
{
echo "<img id=\"page-logo\" src=\"" . $this->settings['page_title_logo'] . "\" alt=\"" . $this->settings['site_name'] . "\">";
} else if ($format == 1) {
return "<img id=\"page-logo\" src=\"" . $this->settings['page_title_logo'] . "\" alt=\"" . $this->settings['site_name'] . "\">";
}
}
function showNav($format = 0, $home = "", $prev = "", $sep = "", $mode = "")
{
//Mode:
//classic = Only show title and previous button
//new = Breadcrumb style, may take up most of the page if using a large folder tree
//auto = Depending on theme it may switch between the two depending on the screen size
//left empty = Set based on user settings
//$home = HTML to insert for home button
//$prev = HTML to insert for prev button
//$sep = HTML to insert for seperator
$output = "";
if ($mode == "") {
$mode = $this->settings['nav_menu_style'];
}
if ($mode == "auto" || $mode == "new") {
$new_output = "<ul><li class=\"nav-home\">" . $home . "</li>";
$url = "?";
if ($this->vars['dir']['req']['full'] !== "") {
$new_output .= "<li class=\"nav-sep\">" . $sep . "</li>";
$i = 1;
foreach ($this->vars['dir']['req']['split'] as $value) {
if ($i < (count($this->vars['dir']['req']['split']))) {
$url .= $value . "/";
$new_output .= "<li>" . $value . "</li>";
$new_output .= "<li class=\"nav-sep\">" . $sep . "</li>";
} else {
$new_output .= "<li class=\"nav-curr\"><div class=\"title\">" . $value . "</div></li>";
}
$i++;
}
}
$new_output .= "</ul>";
}
if ($mode == "auto" || $mode == "classic")
{
$url = "?";
if ($this->vars['dir']['req']['parent'] !== "") {
$i = 1;
foreach ($this->vars['dir']['req']['split'] as $value) {
if ($i < (count($this->vars['dir']['req']['split']))) {
$url .= $value . "/";
}
$i++;
}
$url = substr($url, 0, -1);
}
$classic_output = "<ul><li class=\"nav-prev\">" . $prev . "</li>";
if ($this->vars['dir']['req']['curr'] !== "") {
$classic_output .= "<li class=\"nav-sep\">" . $sep . "</li>";
$classic_output .= "<li class=\"nav-curr\"><div class=\"title\">" . $this->vars['dir']['req']['curr'] . "</div></li>";
}
$classic_output .= "</ul>";
}
if ($mode == "auto") {
$output .= "<div class=\"nav-menu-new\">" . $new_output . "</div>";
$output .= "<div class=\"nav-menu-classic\">" . $classic_output . "</div>";
} else if ($mode == "new") {
$output = $new_output;
} else if ($mode == "classic") {
$output = $classic_output;
}
//0 = Output nav
//1 = Return nav as string
if ($format == 0)
{
echo $output;
} else if ($format == 1) {
return $output;
}
}
function showPage()
{
require($this->showThemeURL(1) . 'pages/' . $this->vars['page_requested'] . '.php');
}
function resizedSize($width, $height, $return = 2)
{
//Returns width, height or an array of width and height for the thumbnail size of a full sized image
if ($width > $height)
{
$new_height = $this->settings['thumb_size_' . $this->vars['thumb_size']];
$new_width = $width * ($this->settings['thumb_size_' . $this->vars['thumb_size']] / $height);
} else if ($width < $height) {
$new_height = $height * ($this->settings['thumb_size_' . $this->vars['thumb_size']] / $width);
$new_width = $this->settings['thumb_size_' . $this->vars['thumb_size']];
} else if ($width == $height) {
$new_width = $this->settings['thumb_size_' . $this->vars['thumb_size']];
$new_height = $this->settings['thumb_size_' . $this->vars['thumb_size']];
}
if ($return == 0)
{
//Return width
return floor($new_width);
} else if ($return == 1) {
//Return height
return floor($new_height);
} else if ($return == 2) {
//Return array with width and height
return array(floor($new_width), floor($new_height));
}
}
function insertHeadInfo()
{
echo "
<!--
PHP Picture Index " . $this->vars['version'] . "
Created by: Brendan Ryan (http://www.pixelizm.com/)
Site: http://phppi.pixelizm.com/
Licence: GNU General Public License v3
http://www.gnu.org/licenses/
-->\n\n";
echo "<meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; user-scalable = no; maximum-scale=1.0;\">\n";
if (isset($_GET['view']) && !isset($this->vars['error'])) {
echo "<script type=\"text/javascript\" src=\"phppi/scripts/jquery/jquery.js\"></script>";
} elseif ($this->settings['use_popup_image_viewer'] == true) {
echo "<script type=\"text/javascript\" src=\"phppi/scripts/jquery/jquery.js\"></script>\n";
}
if (isset($_GET['view']) && !isset($this->vars['error']))
{
if ($this->settings['page_title_show_full_path'] == true) { $temp_title_full_path = '1'; } else { $temp_title_full_path = '0'; }
if ($this->settings['enable_hotkeys']) { $enable_hotkeys = 1; } else { $enable_hotkeys = 0; }
if ($this->settings['enable_up_hotkey']) { $enable_up_hotkey = 1; } else { $enable_up_hotkey = 0; }
echo "
<script type=\"text/javascript\" src=\"phppi/scripts/phppi_js.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function() { phppi.initialize(); });
phppi.image_width = " . $this->vars['file_list'][$this->vars['current_image_id']]['data'][0] . ";
phppi.image_height = " . $this->vars['file_list'][$this->vars['current_image_id']]['data'][1] . ";
phppi.up_folder = '" . $this->escapeString($this->showUpFolderURL(1)) . "';
phppi.prev_image = '" . $this->escapeString($this->showPrevImageURL(1)) . "';
phppi.next_image = '" . $this->escapeString($this->showNextImageURL(1)) . "';
phppi.title_full_path = " . $temp_title_full_path . ";
phppi.enable_hotkeys = " . $enable_hotkeys . ";
phppi.enable_up_hotkey = " . $enable_up_hotkey . ";";
if ($this->settings['use_javascript_navigation'] == true)
{
$file_list = "";
$x = 0;
$dir = $this->pathInfo($_GET['view'], 'dir_path');
foreach($this->vars['file_list'] as $file) {
$file_list .= "['" . $this->escapeString($dir) . "/" . $this->escapeString($file['file']) . "', '" . $this->escapeString($file['file']) . "', " . $file['data'][0] . ", " . $file['data'][1] . "]";
if ($x < (count($this->vars['file_list']) - 1)) { $file_list .= ","; }
$x++;
}
echo "
phppi.site_name = '" . $this->settings['site_name'] . "';
phppi.page_title = '" . $this->vars['page_title'] . "';
phppi.current_file = " . $this->vars['current_image_id'] . ";
phppi.files = [" . $file_list . "];";
}
echo "</script>\n";
}
if ($this->settings['use_popup_image_viewer'] == true)
{
echo "<script type=\"text/javascript\" src=\"phppi/scripts/fancybox/jquery.fancybox.js\"></script>\n";
if ($this->settings['show_thumbs_under_viewer'] == true) { echo "<script type=\"text/javascript\" src=\"phppi/scripts/fancybox/jquery.fancybox-thumbs.js\"></script>\n"; }
if ($this->settings['enable_mousewheel'] == true) { echo "<script type=\"text/javascript\" src=\"phppi/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js\"></script>\n"; }
if ($this->settings['show_thumbs_under_viewer'] == true) {
//Thumb Helper Version
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$('.fancybox-thumbs').fancybox({
openEffect: '" . $this->settings['open_image_animation'] . "',
closeEffect: '" . $this->settings['close_image_animation'] . "',
prevEffect: '" . $this->settings['nextprev_image_animation'] . "',
nextEffect: '" . $this->settings['nextprev_image_animation'] . "',
closeBtn: false,
arrows: false,
nextClick: true,
helpers: {
thumbs: {
width: " . $this->settings['popup_thumb_size'] . ",
height: " . $this->settings['popup_thumb_size'] . "
}
}
});
});
</script>\n";
} else {
//Normal Version
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect: '" . $this->settings['open_image_animation'] . "',
closeEffect: '" . $this->settings['close_image_animation'] . "',
prevEffect: '" . $this->settings['nextprev_image_animation'] . "',
nextEffect: '" . $this->settings['nextprev_image_animation'] . "'
});
});
</script>\n";
}
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"phppi/scripts/fancybox/jquery.fancybox.css\">\n";
if ($this->settings['show_thumbs_under_viewer'] == true) { echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"phppi/scripts/fancybox/jquery.fancybox-thumbs.css\">\n"; }
}
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"phppi/css/global.css\">\n";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"phppi/themes/thumbnail/" . $this->settings['thumbnail_theme'] . "/style.css\">\n";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"" . $this->showThemeURL(1) . "style.css\">\n";
}
function initialize()
{
//Debug Mode
if ($this->settings['debug_mode'] == true)
{
error_reporting(E_ALL);
ini_set('display_errors', '1');
}
ini_set('memory_limit', $this->settings['php_memory'] . 'M');
//Set Thumb Size if changed
if (isset($_POST['thumb_size'])) {
if ($_POST['thumb_size'] == 0) {
$this->setThumbSize('small');
} else if ($_POST['thumb_size'] == 1) {
$this->setThumbSize('medium');
} else if ($_POST['thumb_size'] == 2) {
$this->setThumbSize('large');
}
} else {
$this->setThumbSize(NULL);
}
//GZIP Compression
ini_set('zlib.output_compression', $this->settings['use_gzip_compression']);
ini_set('zlib.output_compression_level', $this->settings['gzip_compression_level']);
//Theme Mode
$this->setThemeMode();
if ($this->settings['allow_mobile_theme'] == true)
{
if (!is_file('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php'))
{
$this->vars['theme_mode'] = 'standard';
}
} else {
$this->vars['theme_mode'] = 'standard';
}
//Load Variables
$this->loadVars();
//Load Blacklists/Whitelists
$this->loadLists();
//Display Content
if (isset($_GET['thumb']))
{
//Show thumbnail only
$this->genThumbnail($_GET['thumb']);
exit;
} else if (isset($_GET['image'])) {
//Show image
if ($this->checkExploit('/' . $_GET['image']) == true) {
$file_ext = strtolower($this->pathInfo($_GET['image'], 'file_ext'));
if ($file_ext == 'jpg' or $file_ext == 'jpeg')
{
$format = 'jpeg';
} else if ($file_ext == 'png') {
$format = 'png';
} else if ($file_ext == 'gif') {
$format = 'gif';
}
header("Content-length: " . filesize($this->vars['dir']['gallery'] . '/' . $_GET['image']));
header("Content-type: image/" . $format);
readfile($this->vars['dir']['gallery'] . '/' . $_GET['image']);
} else {
echo "File doesn't exist.";
}
exit;
} else if (isset($_GET['view'])) {
//Show full image view
$req_path = $this->pathInfo($_GET['view'], 'dir_path');
if ($req_path !== "") { $req_path = "/" . $req_path; }
if ($this->checkExploit($req_path) == true) {
if (!$this->getDir($req_path . '/'))
{
$this->vars['error'] = 'Folder doesn\'t exist';
$this->vars['page_title'] = 'Error';
$this->vars['page_requested'] = 'error';
$this->logs("access", "add", "Folder not found (/" . $_GET['view'] . ")");
} else if (!is_file($this->vars['dir']['gallery'] . '/' . $_GET['view'])) {
$this->vars['error'] = 'File doesn\'t exist';
$this->vars['page_title'] = 'Error';
$this->vars['page_requested'] = 'error';
$this->logs("access", "add", "File not found (/" . $_GET['view'] . ")");
} else {
for($i = 0; $i < count($this->vars['file_list']); $i++)
{
if ($this->vars['file_list'][$i]['file'] == $this->pathInfo($_GET['view'], 'full_file_name'))
{
$this->vars['current_image_id'] = $i;
$this->vars['previous_image_id'] = NULL;
$this->vars['next_image_id'] = NULL;
if ($i > 0)
{
$this->vars['previous_image_id'] = $i - 1;
}
if ($i < (count($this->vars['file_list']) - 1))
{
$this->vars['next_image_id'] = $i + 1;
}
break;
}
}
if ($this->settings['page_title_show_full_path'] == true) {
$this->vars['page_title'] = $this->settings['site_name'] . " - " . str_replace("/", " \ ", $_GET['view']);
} else {
$this->vars['page_title'] = $this->settings['site_name'] . " - " . $this->pathInfo($_GET['view'], 'full_file_name');
}
$this->vars['page_requested'] = 'image';
$this->logs("access", "add", "Viewed image (/" . $_GET['view'] . ")");
}
} else {
$this->vars['error'] = 'File doesn\'t exist';
$this->vars['page_title'] = 'Error';
$this->vars['page_requested'] = 'error';
$this->logs("access", "add", "Possible exploit attempt, blocked access (/" . $_GET['view'] . ")");
}
require('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php');
if ($this->settings['debug_show_vars'] == true) { $this->outputVarsArray(); }
if ($this->settings['debug_show_settings'] == true) { $this->outputSettingsArray(); }
} else {
//Show folder view
if ($this->vars['dir']['req']['full'] == '')
{
$dir_req = "";
} else {
$dir_req = $this->vars['dir']['req']['full'] . '/';
}
if ($this->vars['dir']['req']['full'] == '' || $this->checkExploit('/' . $this->vars['dir']['req']['full']) == true) {
if (!$this->getDir($dir_req))
{
$this->vars['error'] = 'Folder doesn\'t exist';
$this->vars['page_title'] = 'Error';
$this->vars['page_requested'] = 'error';
$this->logs("access", "add", "Folder not found (/" . $dir_req . ")");
} else {
if ($this->settings['page_title_show_full_path'] == true) {
if ($this->vars['dir']['req']['full'] == "") { $sep = ""; } else { $sep = " - "; }
$this->vars['page_title'] = $this->settings['site_name'] . $sep . str_replace("/", " \ ", $this->vars['dir']['req']['full']);
} else {
if ($this->vars['dir']['req']['full'] == "") { $sep = ""; } else { $sep = " - "; }
$this->vars['page_title'] = $this->settings['site_name'] . $sep . $this->vars['dir']['req']['curr'];
}
$this->vars['page_requested'] = 'folder';
$this->logs("access", "add", "Viewed folder (/" . $dir_req . ")");
}
} else {
$this->vars['error'] = 'Folder doesn\'t exist';
$this->vars['page_title'] = 'Error';
$this->vars['page_requested'] = 'error';
$this->logs("access", "add", "Folder not found or exploit attempt, blocked access (/" . $dir_req . ")");
}
require('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php');
if ($this->settings['debug_show_vars'] == true) { $this->outputVarsArray(); }
if ($this->settings['debug_show_settings'] == true) { $this->outputSettingsArray(); }
}
}
}
?>
How to add or turn this jQuery or Javascript code into php to modify this fancybox to open images outside of the iframe?
<script>
/* <![CDATA[ */
$(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'img/sample-9.jpg', title: '01'},
{href:'img/sample-9.jpg', title: '02'},
{href:'img/sample-9.jpg', title: '03'}
],{
// href: this.href,
helpers: {
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
//or in this way using another way or option
$('.image').click(function(e){
e.preventDefault();
parent.$.fancybox({
href: this.href,
width: 560,
height: 315,
type: 'iframe',
helpers: {
overlay: {
opacity: 0.3
} // overlay
} // helpers
}); // fancybox
}); // click
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
helpers: {
overlay: {
opacity: 0.3
} // overlay
}
}); //fancybox
return false;
}); //click
}); // ready
/* ]]> */
</script>
This problem is similar to this example:Example Demo
I am in the iframed page 01 situation and I want to do something similar to
iframed page 02.

Your page inside <iframe> is limited to the shape of iframe. Period.
First what comes to my mind is this. In order to display something bigger than iframe you would have to have some script outside your iframe, and then have some communication between iframe contents and page with iframe (most likely with postMessage).
Other idea would be going with your gallery full screen with FullscreenAPI, and then you would have all screen to yourself. In case of gallery that could lead to some nice effect. Just remember, to be able to do that, <iframe> that displays your gallery has to has attribute allowfullscreen (no value needed).
In both cases you will need to be able to either add additional JavaScript outside iframe, or control how iframe is added to page. This is security measure so the contents of iframe will not abduct the parent page.

JQuery alerting when a select box is changed

Ok so all of the other functions I've done this same way have worked so far. This one for whatever reason will not work.I don't know if there is something I"m missing or if maybe a potential error in the code earlier could cause this. Here is my code:
jQuery("#teamTab_addPlayerForm").on('change', 'select#teamTab_suggestedPlayer', function(e) {
e.preventDefault();
alert('It Worked');
});
And here is the PHP file that calls it:
$output .= '<div id="ld_addPlayerFunction" style="clear:both; width:100%;"><h3>Add Player</h3>';
$standins = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'kdc_user_sync ORDER BY computedMMR ASC');
$output .= '<form id="teamTab_addPlayerForm" action="" method="POST">
<select id="teamTab_suggestedPlayer" name="suggestedPlayer">
<option value="base">Suggested Player</option>';
foreach($standins as $standin){
$playerID = $wpdb->get_var('SELECT ID FROM ' . $wpdb->prefix . 'leagueDesigner_players WHERE userID = ' . $standin->userID);
$test = true;
if($playerID != ''){
$leagueTest = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'leagueDesigner_league_players WHERE playerID = ' . $playerID);
foreach($leagueTest as $test){
if ($test->leagueID == $leagueID){
$test = false;
}
}
}
if($standin->computedMMR < ($suggestedMMR + 100) && $standin->computedMMR > ($suggestedMMR -100) && $test == true){
$output .= '<option value="' . $standin->userID . '">' . substr($standin->profileName, 0, 20) . ' - ' . $standin->computedMMR . ' MMR</option>';
}
}
$output .= '</select><br />';
$output .= '</form>';
The output is then echoed later in the script. So one user has told me to use document instead of #teamTab_addPlayerForm and it works, but I'm wondering why this previous code worked fine and that one didn't:
jQuery("#teamTab_teamListForm").on('change', 'select#teamTab_teamSelect', function (e) {
e.preventDefault();
jQuery(this).attr('disabled', true);
var teamID = jQuery(this).val();
jQuery('select#teamTab_leagueSelect').attr('disabled', true);
var leagueID = jQuery('select#teamTab_leagueSelect').val();
data = { action: "leagueDesignerTeamsTabLoadTeamPlayers", leagueID: leagueID, teamID: teamID };
jQuery.ajax({
type: 'POST', url: ajaxurl, data: data, dataType: 'html', success: function(response) {
if (response == "error") {
jQuery('select#teamTab_teamSelect').attr('disabled', false);
alert('There was an error processing your request');
}
else {
jQuery('select#teamTab_teamSelect').attr('disabled', false);
jQuery('select#teamTab_leagueSelect').attr('disabled', false);
jQuery('.ld_teamEdit').remove();
jQuery('#ld_addPlayerFunction').remove();
jQuery('div#ld_teamTabTeamInfo').remove();
jQuery('#teamTab_teamListForm').after(response);
}
}});
});
That was the code that is dealing with select boxes in the same way. And here is the PHP code:
function leagueDesignerTeamsTabLoadLeagueTeams () {
global $wpdb;
$leagueID = $_POST['leagueID']; //Pull the POST'd leagueID
$output = '<select id="teamTab_teamSelect" name="team"><option value="">Choose a Team</option>'; //Output...
$errors = 0; //Error checking...
$teams = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'leagueDesigner_teams WHERE leagueID = ' . $leagueID);
foreach($teams as $team){
$output .= '<option value="' . $team->teamID . '"';
if ($_POST['team'] == $team->teamID){
$output .= ' selected';
}
$output .= '>' . $team->teamID . '. ' . $team->teamName . '</option>';
}
if (!$teams) {
$errors++;
}
$output .= '</select>';
if ($errors == 0) { echo $output; } else { echo 'error'; }
die(); // this is required to return a proper result
}

The element is created after page load so you need to bind it to an already existing element (see below)
$(document).on('change', '.class-name', function () {
//Commands to run on change
});