Refreshing owl-carousel2 on dynamic image load - javascript

I need to show a carousel of images inside a <td> in a dataTable dynamically, based on a array of images provided by PHP. Right now all I got is a stack of all the images.
Searching online I undestood I have to reload the carousel AFTER all the images in the td are loaded, but I don't know how.
Here's my html:
<?php foreach ($intest as $int) {
if (is_array($int['cartella'])) {
foreach ($int['cartella'] as $cartella){ ?>
<td><div class="owl-carousel owl-theme prova" >
<?php $files = "images/" . Yii::app()->session['dominio']."/".$row['num_registraz']."/". $cartella."/";
//CVarDumper::dump($file);
if(is_dir($files)){
if ($dh = opendir($files)) {
while (false !== ($file = readdir($dh))) {
if($file == '.' || $file == '..'){
continue;
}
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
if ($ext=='jpg' || $ext=='jpeg' || $ext=='png' || $ext=='gif'){?>
<img class="mia" src="<?= $files.$file ?>">
<?php } else if ($ext == 'pdf'){ ?>
<div>File PDF</div>
<?php } else if ($ext == 'doc' || $ext =='docx') {?>
<div>File DOC</div>
<?php } else {?>
<div>Unsupported file</div>
<?php } } } }else if (!is_dir($files)){ ?>
No foto
<?php } } } } } ?>
</div></td>
And here's the Javascript i tried to reload it
var car = $('#prova');
car.on('load', function(){
car.trigger('destroy.owl.carousel');
car.owlCarousel({
'items':1
});
});
Any help would greatly appreciated

Related

How to load a load with ajax without includ all php file

i have probleme when i load a page with.laod() or $.ajax()
it load only the content like static page
at page1.php i have function getStats() as php and i have a <div id="loadpage">
and at page2.php i when use the getStats() and page2.php is load in the <div id="loadpage">
so i have include all the file i need at page2.php but it start become too slow
so i tried load page with a include and when any checkbox checked it will load the content again like
$("#loadpage").text("<?php include "page2.php"?>");
but you can imagine what i get when my page2.php have a table with 300 line data
so i give up this solution
and my plan is every time i check a checkbox it will reset my table
$func=getStats($_POST['statut']);
<div id="loadpage">
echo "$func";
</div>
actuel code : // it load but really slow
[page1.php]
<div id="loadpage">
</div>
<script type="text/javascript">
$(function(){
$("#loadpage").load("views/suivicommande2View.php",{"statut" : "","page":"page2.php"});
$("input[type='checkbox']").change(function(){
var statut = [];
$.each($(".ckb:checked"), function(){
statut.push($(this).val());
});
console.log(statut);
var urgent = $("input[name='Urgent']").val();
console.log(urgent);
$("#loadpage").load("views/page2.php",{"statut" : statut,"page":"suivicommande2View.php"});
});
});
</script>
[page2.php]
<?php include "function.php" ?>
<table id="myTable" class="table table-bordered display" style="width:100%">
<thead>
<tr>
<th> some th here</th>
</tr>
</thead>
<tbody >
<?php
$data=getStats($_REQUEST['statut']); //getStats function is in function.php
//getStats([statut]){ return data }
// var_dump($historiques);
foreach ($data as $oneData) {
//showing all my data as table
}
</tbody>
</table>
[function.php]
function getStats($condition = null,$date=null,$type=null,$hide_col=false){
//setting default val
if($condition == null)$condition = null;
if($data == null)$date="DESC";
if($type == null) $type=null;
if($hide_col==0)$hide_col=" AND hide_col IS NULL";else {
$hide_col="";
}
$where=where($condition);
$where2=where2($type);
if(!$date === null){
$ordre =" ORDER BY `wor7576_historique_commandes`.id_commande".$date;
}else {
$date ="";
}
$req="SELECT distinct * FROM `wor7576_historique_commandes` where ".$where2." AND ".$where." ".$hide_col." ".$ordre;
// echo $req ; // show query req
$db=DBConnect();
$mysqli_request = mysqli_query($db, $req);
$res=array();
$result_request = mysqli_fetch_all($mysqli_request, MYSQLI_ASSOC);
return $result_request;
}
function where($condition){
if(!count($condition)==0){
$where =" ( ";
for ($i=0; $i < count($condition); $i++) {
$where= $where." statut = ".$condition[$i];
if( $i ==(count($condition)-1) ){
}else{
$where= $where ." OR ";
}
}
$where =$where .")";
}else {
$where =" (statut = statut) ";
}
return $where;
}
function where2($type){
if(!count($type)==0){
$where2 =" ( ";
for ($i=0; $i < count($type); $i++) {
$where2 = $where2." type = '".$type[$i];
if( $i ==(count($type)-1) ){
}else{
$where2 = $where2 ."' OR '";
}
}
$where2 = $where2 ."')";
}else {
$where2 ="(type = type)";
}
return $where2;
}
i'm just learning the jq and ajax at internet like 1 week
i'm not sure im using the .load or ajax right way..

How can I change css from php side?

Basically, I want to add an additional class when a certain IF condition is met.
<?php
if($type == 'NEW')
{
$('#'+day+s).addClass('new');
}
if($type == 'USED')
{
$('#'+day+s).addClass('used');
}
?>
You would need to do it through JavaScript / jQuery inside of a PHP conditional.
You can either close your PHP tags while leaving the conditional open:
<?php
if($type == 'NEW')
{
?>
<script>$('#'+day+s).addClass('new');</script>
<?php
}
if($type == 'USED')
{
?>
<script>$('#'+day+s).addClass('used');</script>
<?php
}
?>
Or echo() out the <script> tags from within PHP:
<?php
if($type == 'NEW')
{
echo "<script>$('#'+day+s).addClass('new');</script>";
}
if($type == 'USED')
{
echo "<script>$('#'+day+s).addClass('used');</script>";
}
?>
Having said that, you'd be better off simply altering your logic to output classes based on your conditionals. That way you would simply need to add a regular CSS rule for each class. The right rule would be selected based on which class was outputted.
It should be directly in your HTML :
<div class="<?php if ($type == 'NEW') echo 'new';?>"></div>
You have to assign your calss name in a variable and simply give that to your corresponding MHTL.
<?php
if($type == 'NEW')
{
$style = "class_name for if"; //eg:- new
}
if($type == 'USED')
{
$style = "class_name for else"; //eg:- used
}
?>
//html element
for eg:
<p id="days" class="<?php echo $style;?>"></p>
several ways to do that and depends also in your code
<!-- Assignment inline -->
<div class="<?= $type === 'NEW' ? 'newClass' : 'usedClass'?>"></div>
<!-- Assignment previous -->
<?php
$class = 'defaultClass';
if ($type === 'NEW') { $class = 'newClass'; }
if ($type === 'USED') { $class = 'usedClass'; }
?>
<div class="<?=$class?>"></div>
<!-- Assignment in script -->
<?php $class = $type === 'NEW' ? 'newClass' : 'usedClass'; ?>
<script>
$(document).ready(function(){
$('#'+day+s).addClass('<?= $class ?>');
});
</script>
You can put the if condition of PHP inside class attribute directly. No need to do any method or js for this. You can use the logic as below:
<div class="<?php if($type == 'NEW'){ echo 'new';} else if($type == 'USED'){ echo 'used'; } ?>"></div>

Passing argument from javascript to PHP function

I am using jqueryfiletree to display a folder of files on the web server. I also have php to parse the csv and display it on the page. How can I pass the selected jqueryfiletree file to the php in the page so it displays the selected csv? Here's what I have so far:
Javscript:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="jqueryFileTree.js" type="text/javascript"></script>
<link href="jqueryFileTree.css" rel="stylesheet" type="text/css"
media="screen" />
<script type="text/javascript">
$(document).ready( function() {
$('#fileTreeDemo_1').fileTree({ root: '../data/', script:
'connectors/jqueryFileTree.php' }, function(file) {
alert(file);
var file = "<?php echo $file;?>";
});
});
</script>
</head>
<body>
<h1>Select a file to view</h1>
<div class="menuleftcontent">
<div id="fileTreeDemo_1" class="demo"></div>
</div>
</td><td>
PHP
<div class="maincontent">
<?php
$row = 1;
if (($handle = fopen($file, "r")) !== FALSE) {
echo '<table border="1">';
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
$num = count($data);
if ($row == 1) {
echo '<thead><tr>';
}else{
echo '<tr>';
}
for ($c=0; $c < $num; $c++) {
//echo $data[$c] . "<br />\n";
if(empty($data[$c])) {
$value = " ";
}else{
$value = $data[$c];
}
if ($row == 1) {
echo '<th>'.$value.'</th>';
}else{
echo '<td>'.$value.'</td>';
}
}
if ($row == 1) {
echo '</tr></thead><tbody>';
}else{
echo '</tr>';
}
$row++;
}
echo '</tbody></table>';
fclose($handle);
}
?>
</div>
I can see two problems so far. Firstly, you do not have a semi-colon to end the line on this line:
var file = "<?php echo $file;?>";
(i've added it).
Also, $file is not defined in your php. And you can not try and define it in javascript (I fear that is what you are trying to do maybe?).
Best options is to make an AJAX request so you can send it to the server side and use it there (which is what you want?). And of course, you can then respond data back to the front end.
THis is a rough idea:
$('#fileTreeDemo_1').fileTree({ root: '../data/', script:
'connectors/jqueryFileTree.php' }, function(file) {
$.post('myphpfile.php', {file:file}, function(response){
// handle response
});
});
and then in php, check for the post with if(isset($_POST['file'])) ,etc etc

how to put multiple grouped && , || conditions using if else

I want to check conditions with && || groupping it means if one group stisfy then execute the first condition otherwise second and so on so i'll do that with the help of (if else) kindly give me an example
Description:-i have a select box with multiple options so diffrent diffrent div will remain open if the selected option value exists in the session.
<div id="bizseg" class="col-sm-4" <?php if(isset($_SESSION['constitution'])){ if($_SESSION['constitution']=="Individual" && $_SESSION['myprof']=="Self Employed Businessman") {?> style="display:block;" <?php }else { ?> style="display:none;" <?php }} ?> style="display:none;">
Shrbham please read what you posted why 2 if statements???
if it is all tests for true just && them here is the code and formated so it can be read but in HTML output will be 1 line
<div id="bizseg" class="col-sm-4" <?php
if(
isset($_SESSION['constitution']) &&
$_SESSION['constitution'] == $variable &&
$_SESSION['myprof'] == $variable2 ) {
?> style="display:block;" <?php
}else {
?> style="display:none;" <?php } ?>
If's are quite simple true or false
$var1 = "test";
$var2 = "test";
$var3 = "test2";
//so
$result = $var1 == $var2; // true
$result = $var2 == $var3; // false
//(false) (true) // false and anything == false
if($var2 == $var3 && $var1 == $var2); // false
// (false) (true) // true or anything == true
if($var2 == $var3 || $var1 == $var2); // true
if( ($var2 == $var3 || $var1 == $var2) && $var1 == $val3 ) // false
// ((false) || (true)) && (false) ==
// (true) && (false)
//following rules above and false = false;
As "#Lightness Races in Orbit" has said in comments this sort of procedural code is not liked
you can do it as
<?php
if(
isset($_SESSION['constitution']) &&
$_SESSION['constitution'] == $variable &&
$_SESSION['myprof'] == $variable2 )
{
$result = 'style="display:block;"';
}else {
$result = 'style="display:none;"';
}
?>
<div id="bizseg" class="col-sm-4" <?php echo $result ?>

Should be simple (but it isn't): Javascript snippet inside PHP

I have coded in PHP and JS for a while, but I don't do it often, and so I've been snagged by something that should be simple, but it's giving me fits. And none of the answers I've found here have solved the problem.
I have JS slideshow code that is inserted into a WordPress page when multiple images named [pagename]1,2,3...png are present in the images folder. I've struggled to get the code to read the folder, and now it does. But the JS slideshow is not working on the "Menu" page, while the exact same code is working on the "Home" page. The only difference between the two is that the Menu code tests whether images are present in the images folder. (They are.)
This first part of the code is, I feel certain, correct. The second piece of code is where the issue is. Why is the JS not starting my slideshow? It should. The code reads properly on the page.
<?php
$uploads = wp_upload_dir();
$x = 1;
$poname = $post->post_name;
if ($dir = opendir('/home/rowlandwilliams/public_html/lepeep/wp-content/themes/twentythirteen-child/images')) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
asort($images);
}
}
closedir($dir);
}
And this is where I think the problem is:
foreach($images as $image) {
$subimg = substr($image, 0, -5);
if ($subimg == $poname) {
if ($x == 1) {
echo "<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>"; ?>
<div class="cycler" id="page-cycler">
<?php $actstat = 'class="active"'; ?>
<?php $x++; ?>
<?php } else { ?>
<?php $actstat = ''; ?>
<?php } ?>
<img <?php echo $actstat; ?> src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $image; ?>">
<?php } ?>
<?php } ?>
</div><!-- #page-cycler -->
http://rowlandwilliams.com/lepeep/menu/
This is where your problem is:
echo "<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>";
When you use " to echo with, php will parse all $var...
So the variable $activeand $next is being echoed from php, which doesn't look like it's set anywhere in your code. The solution would either be to change variable names from $active to active or to use single quotes ' instead of double quotes "
Using single quotes (') will tell PHP not to parse any variables inside the echo, while using double quotes (") will.
Try using ' quotes, and replace any ' quotes inside the JS with " quotes.
echo '<script type="text/javascript">
function cycleImages(container) {
var $active = container.find(".active");
var $next = ($active.next().length > 0) ? $active.next() : container.find("img:first");
$next.css("z-index",2);
$active.fadeOut(1500,function() {
$active.css("z-index",1).show().removeClass("active");
$next.css("z-index",3).addClass("active");
});
$(document).ready(function() {
setInterval(function(){cycleImages($("#page-cycler"))}, 2000);
})
}
</script>';
Your code is mess, I have rewrite your code for more clean, maybe. Since you there is no php code inside your javascript, don't try to use echo it will make your code even mess and as #Arian mentioned, $active and $next will be work as php variable.
foreach($images as $image):
$subimg = substr($image, 0, -5);
if ($subimg == $poname):
if ($x == 1): ?>
<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>
<div class="cycler" id="page-cycler">
<?php
$actstat = 'class="active"';
$x++;
else:
$actstat = '';
endif; ?>
<img <?= $actstat; ?> src="<?php bloginfo('stylesheet_directory'); ?>/images/<?= $image; ?>">
<?php endif; ?>
<?php endforeach; ?>
</div><!-- #page-cycler -->

Categories