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.
Related
I am using CSS-Trick's Drag and Drop upload, but it doesn't quite work as I thought. I am saving the uploaded image with PHP, the following code:
if(isset($_FILES['image'])) {
function upload($file_temp, $file_extn) {
$file_path = 'i/' . uniqid() . '.' . $file_extn;
move_uploaded_file($file_temp, $file_path);
if(file_exists($file_path)) {
//header('Location: ' . $file_path);
}
}
$allowed = array('jpg', 'jpeg', 'gif', 'png');
$file_name = $_FILES['image']['name'];
//$file_name = uniqid() . '.png';
echo 'Filename is ' . $file_name . '<br>';
//$file_extn = strtolower(explode('.', $file_name));
$file_extn = end((explode(".", $file_name)));
$file_temp = $_FILES['image']['tmp_name'];
echo 'Filetemp is ' . $file_temp . '<br>';
if(!empty($file_temp) && !empty($file_name)) {
if(in_array($file_extn, $allowed)) {
upload($file_temp, $file_extn);
} else {
echo "The filetype '" . $file_extn . "' is not allowed<br>The allowed filetypes are: ";
echo implode(', ', $allowed);
}
} else {
echo 'Error';
}
}
My problem is, that when I Drag and Drop an image to the site - found here, so you can try it yourself - the form is auto-submitted, but it is like the file was not attached correctly. As seen in the PHP script above, I try to echo the name and the temp location of the file, both required to save the file. But, they're both empty. It is like the image does not get attached correctly, but I cannot see why here. I use Ajax so submit the form, and it works just fine when I choose the file manually, clicking "Choose a file".
So, somehow the Drag And Drop attachment of the image is incorrect - but as I am not quite a "JavaScript genius" here, I cannot see what would be wrong here. I might be missing the obvious, but I doubt it, as I have changed very few lines from CSS-Trick's JavaScript - and most of it was pure preferably styling.
I have a page that automatically retrieves two random entries from a MySQL database and asks the user to compare them every time the page is refreshed. How can I convert those two strings into the first google image result for them automatically? This is what I have so far:
<?php //I retrieve the names and group names here//
$firstpersonaName = (string) $row["personaName"];
$firstpersonaGroupName = (string) $row["groupName"];
$firstpersonaGroupNameForGoogle = preg_split('( )', $firstpersonaGroupName);
?> //then convert any group names containing spaces into arrays here//
<?php //then here I build the query that displays a google image page//
$newname = '';
foreach ($firstpersonaGroupNameForGoogle as $firstpersonaPartofGroupName) {
$newname = $firstpersonaPartofGroupName . '+';
}
$newname = rtrim($newname, "+");
echo "https://www.google.com/search?q=" . $firstpersonaName . "+" . $newname . '&tbm=isch';
?>
This gives me stuff like: https://www.google.com/search?q=charlie+always+sunny&tbm=isch
So how do I take that link and turn it into the link of the first image? Or any of the first couple really. (In this case: http://cdn3.denofgeek.us/sites/denofgeekus/files/sunny_0.jpg)
Okay so here's what I ended up doing to randomly generate two pics per query:
First I downloaded this and added it to the same directory as the webpage: http://simplehtmldom.sourceforge.net/
Then I simply added this PHP code in the div where I wanted the picture to show up:
<?php
// Include the php dom parser
include_once 'simple_html_dom.php';
//build the google images query
$newname = '';
foreach ($firstpersonaGroupNameForGoogle as $firstpersonaPartofGroupName) {
$newname = $firstpersonaPartofGroupName . '+';
}
$newname = rtrim($newname, "+");
//echo "https://www.google.com/search?q=" . $firstpersonaName . "+" . $newname . '&tbm=isch';
$newname = "https://www.google.com/search?q=" . $firstpersonaName . "+" . $newname . '&tbm=isch';
//use parser on queried page
$html = file_get_html($newname);
//echo $html;
//create an array for all pics on page
$picarray = array();
$picurl = '';
// Find all images
foreach($html->find('img') as $element) {
//echo $element->src . '<br>';
$picurl = $element->src;
array_push($picarray,$picurl);
}
//then pick two random ones
$picurl = $picarray[array_rand($picarray)];
echo "<img src=" . $picurl . ">";
$picurl = $picarray[array_rand($picarray)];
echo "<img src=" . $picurl . ">";
?>
They're pretty small resolution (about 150px) but that actually works great with what I'm trying to do. If you wanted to retrieve a non-thumbnail pic that's a whole different can of worms.
I'm trying to add a script element to the HTML from the PHP code and instantly remove it so it won't be visible in the HTML. The script only contains things to execute at the same moment and not functions. Generally, I'm trying to replicate ASP.NETs runat property, so I'll be able to set values of elements (inputs for now) right from the PHP code.
This is what I tried so far (which I found in a different question, with some changes of mine) and it adds the script properly, but won't remove it.
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script>
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '"
</script>';
$html = <<<HTML
...
HTML;
$dom = new DOMDocument();
$dom->loadHTML($html);
$script = $dom->getElementsByTagName('script');
foreach($script as $item)
{
$item->parentNode->removeChild($item);
break;
}
$html = $dom->saveHTML();
}
Thanks for everyone who were trying to help. Anyway, I found a solution to my question, which is this:
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script id="phpjs">
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '";
document.getElementById("phpjs").remove();
</script>';
}
It adds the script and removes it, so it won't be visible when inspecting elements anymore.
I've create in my php programme a piece of code:
$dest = 'https://www.google.com';
$stay = 'currenturl';
echo '<pre>';
echo "<script language=\"javascript\">";
echo " window.location = '". $stay."';";
echo " var win = null;";
echo " LeftPosition = (screen.width) ? (screen.width-995)/2 : 0;";
echo " TopPosition = (screen.height) ? (screen.height-640)/2 : 0;";
echo " settings = 'height=500,width=600,top='+TopPosition+',left='+LeftPosition+',scrollbars=no,resizable=yes,status=yes';";
echo " win = window.open('" . $dest . "','network',settings);";
echo "</script>";
echo '</pre>';
exit;
If I run this code it will open my pop up window, which is google, and refresh (because it's the only idea I've got which allow me to stay on the same page - otherwise it goes blank...) current page. I want to avoid refreshing and stay on the same page.
Do you know how to change this "window.location" to achieved it?
mate, you should not use php code to open a new window by injecting js script, that's why you are going to another page as the php code ouput new content to the current page, you should have all your logic about new window in a JavaScript function. then you should stay on the same page
I am trying to use jQuery to pass some values to session variables when buttons are clicked on. Each button has unique values and I need to display values from both buttons when both are clicked.
The problem I am having is that only one set of values (from the most recent button clicked) is translated as a session variable - if I click the first button, the first values are passed to the session backend fine, but clicking the second button afterwards results in only the second values being passed.
My jquery looks like this:
$button_one.click(function(e) {
e.preventDefault();
var var_one = "value1";
var var_two = "value2";
$.post("sessions.php", { 'session_var_one': var_one, 'session_var_two': var_two });
});
$button_two.click(function(e) {
e.preventDefault();
var var_three = "value3";
var var_four = "value4";
$.post("sessions.php", { 'session_var_three': var_three, 'session_var_four': var_four });
});
The sessions.php is very simple:
<?php
session_start();
$_SESSION['value_one'] = $_POST['session_var_one'];
$_SESSION['value_two'] = $_POST['session_var_two'];
$_SESSION['value_three'] = $_POST['session_var_three'];
$_SESSION['value_four'] = $_POST['session_var_four'];
?>
And I have a simple page set up to display the session values:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
echo '<h5>' . $_SESSION['session_var_one'] . '</h5>';
echo '<h5>' . $_SESSION['session_var_two'] . '</h5>';
echo '<h5>' . $_SESSION['session_var_three'] . '</h5>';
echo '<h5>' . $_SESSION['session_var_four'] . '</h5>';
?>
</body>
</html>
This page displays only the two values of the button that was last clicked on - instead of displaying both sets of values if both buttons are clicked on.
I am guessing that having two separate AJAX requests, one within each click function, may be the problem here - when button two is clicked after button one, it "forgets" the first request and thus the values are not recorded.
I have worked around this problem by sending each of the button click values to a different session php page (i.e. button_one goes to sessions_one.php and button_two goes to sessions_two.php) but I would prefer not to have to create a new place to store the session values for each button. I plan on adding more buttons and it seems like bad practice to have each button have a separate home for its stored values.
How can I rewrite my AJAX requests and/or sessions.php so that I can store all of the values from each button click? Thank you for any guidance, I'm very new to PHP and AJAX in general!
If a $_POST variable is not provided, your code will just put NULL in the corresponding $_SESSION variable. To prevent that, check that it is provided before doing so:
<?php
session_start();
if( isset($_POST['session_var_one']) ){
$_SESSION['value_one'] = $_POST['session_var_one'];
}
if( isset($_POST['session_var_two']) ){
$_SESSION['value_two'] = $_POST['session_var_two'];
}
if( isset($_POST['session_var_three']) ){
$_SESSION['value_three'] = $_POST['session_var_three'];
}
if( isset($_POST['session_var_four']) ){
$_SESSION['value_four'] = $_POST['session_var_four'];
}
?>
I think you really want something like this so the session data stays if you aren't passing it a new value.
$_SESSION['value_one'] = (!empty($_POST['session_var_one'])) ? $_POST['session_var_one'] : $_SESSION['value_one'];
$_SESSION['value_two'] = (!empty($_POST['session_var_two'])) ? $_POST['session_var_two'] : $_SESSION['value_two'];
$_SESSION['value_three'] = (!empty($_POST['session_var_three'])) ? $_POST['session_var_three'] : $_SESSION['value_three'];
$_SESSION['value_four'] = (!empty($_POST['session_var_four'])) ? $_POST['session_var_four'] : $_SESSION['value_four'];
To display you should to call to session not post and it will be like this:
<?php
echo '<h5>' . $_SESSION['value_one'] . '</h5>';
echo '<h5>' . $_SESSION['value_two'] . '</h5>';
echo '<h5>' . $_SESSION['value_three'] . '</h5>';
echo '<h5>' . $_SESSION['value_four'] . '</h5>';
?>