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.

php facebook photos likes and comments

I setup a gallery on my site using some code I found online, doing this through php and blueimp gallery, it all works and I set it up mostly the way I want it to but now I want to try to add a like button and comments from the facebook photos to the gallery. I'm very new to js and my php is very rusty so bear with me. Again I got the code off another site and have some understanding of both php and js but reading through the code a bit i'm a bit lost as to how to add it to the existing code setup. I added the likes and comments request but I don't know how to call for it in the js, any help?
$json_link = "https://graph.facebook.com/v2.3/{$album_id}/photos?
fields=source,images,name,likes,comments&access_token={$access_token}";
$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);
$photo_count = count($obj['data']);
for($x=0; $x<$photo_count; $x++){
// $source = isset($obj['data'][$x]['source']) ? $obj['data'][$x]['source']
: "";
$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]
['images'][0]['source'] : ""; //hd image
$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";
echo "<a href='{$source}' data-gallery>";
echo "<div class='photo-thumb' style='background: url({$source}) 50% 50%
no-repeat;'>";
echo "</div>";
echo "</a>";

Is it possible to combine javascript/jquery and mysql/php

I have a odd question i cannot find the answer to, which probably means it is impossible. The reason i ask is i am creating a food delivery website. In the admin panel of my website administers are able to input restaurant details and menus. Part of the details is how much a customer must spend before they can checkout for delivery. so i want to be able to deactivate the checkout button, but when they met the minimum order fee the button activates.
This is my first time attempting anything like this, i have looked all over and i can only find posts or tutorials on how to deactivate then activate a button when a certain event takes place using javascript or jQuery and i know i would have to get the minimum order fee from the DB.
The only logical answer is to combine them.
I am trying to achieve something similar to this...
Shopping
I followed a tutorial to do this, it is a mini fixed shopping cart, which is on the same page as the shopping cart. It redirects to shopping_cart.php from product_page.php. Most aspects on product_page.php is dynamically made.
mysqli_stmt_execute($runn_query);
while ($get_row = mysqli_fetch_array($runn_query)) {
echo "<div id='prods_ere'>";
$item_sub = $get_row['Product_Price'] * $value;
echo $value . ' x ' .$get_row['Product_Name']. ' # £' . $get_row['Product_Price'] . '<a id="minus" class="buttons" href="Shopping_cart.php?remove=' . $Product_Id . '">-</a> <a id="plus" class="buttons" href="Shopping_cart.php?add_item=' . $Product_Id . '"> + </a> <a id="del" class="buttons" href="Shopping_cart.php?delete=' . $Product_Id . '">✖</a> </br><p id="sub">£' . $item_sub . '</p>';
echo "<br>";
echo "<br>";
echo "<hr id='shopp_dashed'>";
echo "</div>";
}
}
//creating subtotal
$sub_total += $item_sub;
$num_items += $value;
$total += $sub_total;
}
}
//subtotal and empty cart message
if ($sub_total == 0) {
echo "Ouch.. its empty in here";
} else {
echo "<div id='grey'>";
echo"Subtotal (excl delivery)";
echo "<br/>";
echo "<div id='sub_t'>";
echo '£' . number_format($sub_total, 2);
echo "</div>";
echo "<br/>";
echo"Items";
echo "<br/>";
echo "$num_items";
echo "<br/>";
echo "</div>";
echo "<div id='total'>";
echo"Total: ";
echo "$total";
echo "</div>";
}
Products page
<div id="prods_here">
<!-- PLACE PRODUCTS HERE-->
<?php cart(); ?>
</div>

Well, I'm not sure how you're keeping track of the customer's order but let's say you're keep track of it in a counter, say, totalOrderAmt. As they are making changes to the order, keep this updated and add a condition to the page, that when the totalOrderAmt >= checkOutAmt, enable the checkOut button.
I can add more details if you post some code, may be.

If you're using PHP you could load a JavaScript object on each restaurant page that basically makes a minimum_order_price variable available on the DOM for the JavaScript to handle the rest:
<html>
<head>
...
</head>
<body>
<h1>Restaurant X</h1>
<p>Minimum order: <span id="_restaurantMinimumOrder"></span></p>
<input id="submit" type="submit" class="disabled" value="Checkout" disabled>
<script type="text/javascript">
<?php
echo "window.RestaurantDetails = {}";
echo "window.RestaurantDetails.minimum = $RestaurantMinimumOrder";
?>
</script>
</body>
</html>
In this instance, $RestaurantMinimumOrder is something you configure and setup on PHP (I am not sure what you're setup is so I went with a variable name). From there, when the page is parsed from the server, the PHP will echo out that JavaScript. Once the page loads, window.RestaurantDetails will be available for the rest of your JavaScript to use. I've also included an example implementation:
<script type="text/javascript">
// set price on the DOM
var priceEl = document.getElementById('_restaurantMinimumOrder');
priceEl.textContent = window.RestaurantDetails.minimum;
// ensure submit button is disabled initially
var submitEl = document.getElementById('submit');
submitEl.disabled = true;
</script>
From here, if you're using jQuery you can easily adjust the state of the submit button based on whatever logic flow you have setup. Let me know if you have more questions. Best of luck! Cheers ~

JS failing to pass value?

I have the following code which is updating a form on click. When populating title and content, it works fine. When I added startDate nothing populates. Im assuming something in my syntax is wrong but all the logic looks correct to me. Am I missing something?
<script type="text/javascript">
function changeText(title, content, startDate){
window.alert("test");
document.getElementById('startDate').value = document.getElementById(startDate).getAttribute('data-content');
document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
document.getElementById('title').value = document.getElementById(title).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$tile = ($row["announcementID"] ."t");
$cont = $row["announcementID"];
$startDate = ($row["announcementID"] ."s");
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$tile.'" data-content="'.$row["title"].'" type=button class=test onclick="changeText(id, '.$cont.', '.$startDate.');" value="Edit">';
echo '<p id="'.$cont.'" data-content="'.$row["content"].'">test</p>';
echo '<p id="'.$startDate.'" data-content="'.$row["startDate"].'">startDate</p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
?>

I found the solution after some more testing. JS didnt approve of the variable names with letters attached. After editing that variable names the code worked fine.

PHP form dynamic inputs

Very new to php... bear with me!
I'm creating a photography website and am stuck on a particular page. Ultimately I need the page to be a form with a dynamic number of inputs. It will be a dynamic visual representation of folders (or "galleries") on my web host server. Each div block will contain the first image from the folder along with the name of the folder - the heading text and image should both be clickable and act as a submit button to continue to the album.php page, passing the name of the folder via a GET method.
The first problem I had was trying to get rid of the submit button from a form, and replace with my album thumbnail and album title in an <a> tag. Apparently via javascript, and I managed to get this to work - kind of. I've gotten the page to a state where there is a form, with multiple inputs, but every single folder name is now being passed in the URL (e.g. mywebsite.com/album.php?name=album1&name=album2&name=album3) and I'm absolutely stuck!
The code is included, so if someone could have a look over and offer some guidance or point me in the right direction (and offer any other newbie tips!) it would be much appreciated.
Cheers
Lee
<form id="album" method="get" action="album.php">
<?php
$basepath = 'images/portfolios/public/';
$results = scandir($basepath);
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_dir($basepath . '/' . $result)) {
//create new gallery for each folder
?>
<div class="gallery">
<?php
//get count of images in folder
$i = 0;
$path = 'images/portfolios/public/' . $result;
if ($handle = opendir($path)) {
while (($file = readdir($handle)) !== false){
if (!in_array($file, array('.', '..')) && !is_dir($path.$file))
$i++;
}
}
//create array, and choose first file for thumbnail
$files = array();
$dir = opendir($path);
while(($file = readdir($dir)) !== false)
{
if($file !== '.' && $file !== '..' && !is_dir($file))
{$files[] = $file;}
}
closedir($dir);
sort($files);
//form input - album name for next page
echo '<input type="hidden" name="name" id="name" value="'.$result.'" />';
//the headline and image link for gallery
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
?>
</div> <!-- end gallery -->
<?php }
}
?>
</form>
<script type="text/javascript">
function submitform(){document.forms["album"].submit();}
</script>

change your code from:
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
to this code:
echo '<a href="admin.php?name='.$result.'">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';