Develop Reference

refresh modal window without closing it

I have image thumbnails in 100s of directories. I am using PHP to retrieve the images. A bootstrap modal with id #imagePalette window pops up on clicking a button and displays all the images in the directory.
In javascript
$.post('getCroppedImages.php',{'location': location, 'brand':brand},function(data) {
var imagemodal = $('#imagePalette');
imagemodal.find('.modal-title').html('Brand: ' + brand + ' in ' + location);
imagemodal.find('.modal-body').html(data).show();
});
PHP code that retrieves the images:
$path = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($path);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $path . $imgname;
$filnam = substr($filname, -9,9);
$filnam = rtrim($filnam);
echo '<ul class="croppeditem" id="croppeditem">';
echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
The above code works perfectly. It displays the images. I have a function clickCroppedImage attached to each image. When the user clicks on a image in the modal window, this function triggers another php that deletes the image from the folder.
This deletion also works without any trouble. I am trying to refresh the modal modal without closing it so that the current set of images in the folder gets displayed. I have written similar php and javascript code and used unlink to delete the image from the folder.
In Javascript
$.post('deleteAnnCroppedImage.php', {'folder':wd, 'matchLst':matchLst, "imgPath" : clickedImg, 'currentAnnotCheckLocation': currentAnnotCheckLocation, 'currentAnnotCheckBrand': currentAnnotCheckBrand}, function(data){
//imagemodal.find('.modal-body').html().show();
var imagemodal = $('#imagePalette');
imagemodal.find('.modal-body').html("");
imagemodal.find('.modal-body').html(data).show();
});
PHP Code
$currentAnnotPath = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($currentAnnotPath);
$imgPath = $_POST['imgPath'];
unlink($imgPath);
//echo "Deleted Image";
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $currentAnnotPath . $imgname;
$filnam = substr($filname, -9,9);
$filnam = rtrim($filnam);
echo '<ul class="croppeditem" id="croppeditem">';
echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
The php scripts returns the ul li data correctly which I can print to console. However, I am not able to refresh the modal body and display the returned images. I tried different combinations, but the modal window does not show any reaction.
How do I clear the modal body and reload the images without closing the modal window?

You will have to use AJAX if I understood your problem correctly.
After a user deleted an image you have to trigger a AJAX request and change the content of the modal.
A good introduction to AJAX can be found via google.
Best regards

You should be able to reach the modal-body element.
First of all make sure you can see it from the current function scope.
Sample codes that are working with the basic bootstrap modal:
Pure JS:
document.getElementsByClassName('modal-body')[0].innerHTML = '<p>some html</p>';
jQuery:
$('#imagePalette .modal-body:first').html('<p>some html</p>');
If there is an iFrame and the modal is inside than you should get into the iFrame document first from JavaScript.
Other:
In these cases you can use jQuery wrapper instead of introducing a new variable. You won't loose performance but it will make this code more readable.

simple-gallery.js only partially working, js conflict?

I am using simple-gallery.js (found here: alexkalicki.com/jquery-simple-gallery/) and it is only half-way working for me. The script seems to be pulling in the photos per the jQuery initiation code, but clicking on the thumbnails does not replace the large photo (.project-image) the way it is suppose to. I have gotten the same plugin working before, I assume there must be some kind of javascript conflict or a dumb coding mistake I can't see. Any help would be much appreciated.
The test site is here: joshofsorts.com/projects/dsenergy/#commercial. If you click on one of the photos under the "Portfolio" heading, it will reveal the gallery in question.
Here is my js that is dynamically creating the initiation jQuery line for each gallery and inserting it into the footer:
var newjava = "<scr"+"ipt type='text/javascript'>";
newjava += "jQuery(document).ready(function($) {";
$('[id$=-project-gallery]').each(function() {
var the_id = this.id;
newjava += "$('#" + the_id + " .project-image').gallery({source:'#" + the_id + " .project-thumbnails img'});";
});
newjava += "});";
newjava += "</scr"+"ipt>";
$('#newjava').replaceWith(newjava);
And here is the html/php:
<div id="<?php echo $solution; ?><?php echo $item; ?>-project-gallery">
<div class="project-image"></div>
<div class="project-thumbnails"
<?php if($image_count == 1){echo ' style="display:none"';} ?>>
<?php $fourmax=0;
foreach ($images as $image){
if($fourmax==4) break;
echo '<img src='.$image['sizes']['project-image'].'>';
$fourmax++;
} ?>
</div>
</div>

cannot impliment infinite scroll with my code

I've read multiple examples on infinite scrolling, but I find it hard to implement it to my code. Here's the code, where data get shown from MySQL database :
<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php
$result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
while ($row = mysql_fetch_array($result))
{
extract($row);
$link=$row["linkas"];
echo "<div class='col-md-4'>";
$sites_html = file_get_contents($link);
$html = new DOMDocument();
#$html->loadHTML($sites_html);
$meta_og_img = null;
//Get all meta tags and loop through them.
foreach($html->getElementsByTagName('meta') as $meta) {
//If the property attribute of the meta tag is og:image
if($meta->getAttribute('property')=='og:image'){
//Assign the value from content attribute to $meta_og_img
$meta_og_img = $meta->getAttribute('content');
}
}
list($width, $height) = getimagesize($meta_og_img);
$skaicius = abs($width - $height);
if($width > $height) {
echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
}
else if($width < $height) {
if($skaicius < 100){
echo "<img src=\"$meta_og_img\" style='width:234px'
onclick='window.open(\"$link\", \"_blank\");'>";
}
else {
echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
onclick='window.open(\"$link\", \"_blank\");'>";
}
}
echo "</div>";
}
?>
Stored in the database is a link to, for example, a internet shop page. What the code does is it takes a image for facebook preview from the link stored in the db, which is tagged og:image and then positions it to center. The problem is that page tries to load every image and that takes a ton of time to load the page, thats why I want to somehow make it into a load on scroll page. Btw, Im using Bootstrap's grid system here. I hope you can help me. P.S. If you don't get what I mean because of my bad english, ask me and I'll try to answer it more clearly

delete sql row after echo onClick

I am making a program for a quiz show in our school programme. I have a table that contains WHO asked the question (among the teachers), WHAT is the question and another table as to what the answer to that question is. So, I have a table with THREE COLUMNS.
Now, what I was trying to do is that when the page loads, it will display a number of links labeled . I echoed each link such that when you click any of them, a random row will be taken from MySQL table and the "Question" as well as who asked that particular question will be displayed publicly.
so far, i was able to do all that just fine. But here's the problem.
I want to do it in such a way that after clicking the question, (after displaying it, to be exact,) that specific row will be DELETED from the MySQL table. I didn't want to use a timer because the time allotted for each question differs. I was wondering if there is some kind of "after click" function (or some way to do it) in javascript and AJAX. or perhaps a PHP code?
sorry for the noobish question. History teacher here. :)
by the way, here is a part of my code:
<?php
$checkrow = $db->query("SELECT * FROM questions WHERE `who` = $teachers");
while ($row = $checkrow->fetch(PDO::FETCH_ASSOC))
{
$who = $row['who'];
$question = $row['question'];
$date =$row['date_asked'];
$ask = $db->query("SELECT COUNT(*) FROM teachers WHERE science = $from AND who = $teachers");
$count = $ask->fetch(PDO::FETCH_NUM);
if($count[0] == 0) {
echo ' MYSTERY QUESTION ';
$fromwho = "From science Department.";
echo "<br>";
} else {
echo ' MYSTERY QUESTION ';
$fromwho = "From your Arts Department.";
echo "<br>";
}
}
?>
and here is my javascript.
<script language="javascript">
function readmsg(){
var qst = "<?php echo $question; ?>";
var dte = "<?php echo $date; ?>";
var frm = "<?php echo $fromwho; ?>";
document.getElementById("displaymsg1").textContent = qst;
document.getElementById("displaymsg2").textContent = dte;
document.getElementById("displaymsg3").textContent = frm;
}
</script>

1st, you have to make page delete_question.php (or method like this):
<?php
$db->query(('DELETE FROM questions WHERE ID=' . $_GET['uid']); // make it safer
echo '{result:"done"}';
?>
2nd, make delete onclick handler function with ajax sends UID to specified
function delete_question(el) {
$.ajax({
url : 'delete_question.php',
dataType : 'json',
data : {
uid : el.dataset.uid
},
success : function(response) {
// remove line?
$(el).parent().remove();
alert(response.result);
}
});
3nd: add handler to element
<a href="#" onclick="delete_question(this)" data-uid="<?php echo $row['ID'] ?>">

Struggling to create a php array to fetch photos from directory that can be used as an array in JavaScript

Basically I am trying to create a photo slideshow that will display specific photos depending on the userid. These photos will be stored in the directory of my web server space. Currently I have a html (not changed into php) file with basic html layout, css style sheet and an external js file that has my code that makes the photos fade in and out. I have added php at the bottom of my html. This is what I have:
$user_id = $_GET['userid'];
print "<h1> Hi, $user_id </h1>";
function returnimages($dirname = "Photos/1") { //will replace 1 with userid once something starts working
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
and in my javscript, the code I had before for the array of photos:
// List of images for user one
var userphoto = new Array();
userphoto[0] = "Photos/1/1.jpg";
userphoto[1] = "Photos/1/2.jpg";
userphoto[2] = "Photos/1/1.jpg";
userphoto[3] = "Photos/1/1.jpg";
userphoto[4] = "Photos/1/1.jpg";
which I have now commented out and replaced it with this:
var userphoto = <? echo json_encode($galleryarray); ?>;
I am hoping to be able to change the src of photodisplay with the new array:
photodisplay[x].attr("src", userphoto[x]);
Sorry if my problem is not clear at all. I am very confused myself. :( hopefully someone can help!

$user_id = (int) $_GET['userid'];
print "<h1> Hi, $user_id </h1>";
function returnimages($dirname = "Photos/1") {
$dirname = str_replace('..', '.', $dirname); //only remove this if you know why it's here
$pattern = "*{.jpg,.png,.jpeg,.gif}"; //valid image extensions
return glob($dirname . DIRECTORY_SEPARATOR . $pattern, GLOB_BRACE);
}
echo "var galleryarray = ".json_encode(returnimages()).";\n";
?>
Also, you should use <?= json_encode($ret) ?> because the PHP short tag (<?) is deprecated, but <?= is not, and is the equivalent of <?php echo.