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.

Using jquery to change div content in a php loop

I need to change the html in a div without page refreshing while php runs a foreach statement, i think this is possible with jquery, but i'm not sure i'm doing the correct way to achieve this. This is the code i have at the moment.
$filename = "entries.csv";
$topic = $_GET['q'];
$file = new SplFileObject($filename, 'w');
$sentences = explode(".", getResultsPage(getBingLink($topic)));
$file->fputcsv(array("Topic", "Sentence", "Word", "Tag"));
foreach($sentences as $sentence){
?>
<script>
$("#view").html('<?php echo $sentence; ?>');
</script>
<?php
if(preg_match("/^[A-Za-z0-9òàùèìé\s\?\!\,\-]*$/",$sentence)){
$words = $pos->tag(explode(" ", $sentence));
foreach($words as $word){
$file->fputcsv(array($topic, $sentence, $word[0], $word[1]));
}
}
}
because it only prints the script when the page is loaded. Any useful hints or advices are greatly appreciated. Thanx.

JavaScript not working in mPDF

I am using mPDF for PDF generation in PHP. It is working fine with no issue.
What I want if user is not logged in then I would like to show error in alert box and after that redirect to index.php.
But due to some reason that I don't know it is not showing any alert box nor redirect. It seems like JavaScript is not working.
Here is the code:
<?php
session_start();
$uid=$_SESSION['uid'];
if($uid== "" or $uid == NULL)
{
echo '<script type="text/javascript">window.alert("Please login first to access this page."); </script>';
echo '<script type="text/javascript">window.location.href("/index.php");</script>';
}
Above code is top of the file and now below I have these code for mPDF:
include("pdf/mpdf.php");
$mpdf=new mPDF('');
$stylesheet = file_get_contents('pdf/tablecss.css');
$mpdf->WriteHTML($stylesheet,1);
//==============================================================
//$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->SetWatermarkText(' www.somewebsite.com ');
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->showWatermarkText = true;
$mpdf->WriteHTML($html);
$html = '
<html>
<head>
<style>
....

I fixed that. What i did is i put mPdf code inside else.
Like this and it works.
if($uid== "" or $uid == NULL)
{
echo '<script type="text/javascript">window.alert("Please login first to access this page."); </script>';
echo '<script type="text/javascript">window.location.replace("/index.php");</script>';
}else{
mpdf code goes here

How to retrieve $_SESSION value in a JavaScript/HTML

I have this working script yet when I change it to retrieve(supposedly) the value inside $_SESSION["username"], it doesn't retrieve anything. The whole page is saved as .php as I am using some codes that uses PHP.
Code:
echo "<script type=text/javascript>";
echo "var hidden = false;";
echo "function actiondb1() {";
echo "if(!hidden) {";
echo "document.getElementById(\'clickdb1\').style.visibility = \'hidden\';";
echo "document.getElementById(\'db1\').style.visibility = \'visible\';";
echo "document.getElementById(\'db1\').disabled = false;";
echo "document.getElementById(\'db1\').value =".$_SESSION["username"];.";";
echo "}";
echo "}";
echo "</script>";
How can I make the script to properly retrieve the data inside $_SESSION["username"];?

Observe that, for instance, if the value of $_SESSION["username"] is John, your echo will be generating this result:
document.getElementById('db1').value = John;
But John is supposed to be a string and should be wrapped in quotation marks, otherwise JavaScript will understand it as a variable name (which value will be probably undefined).

As Havenard mentioned, this line is missing Javascript single quotes to properly denote a string variable:
echo "document.getElementById(\'db1\').value ='".$_SESSION["username"];."';";
However, you really shouldn't print JS out with PHP if you can help it. Though iatboy's answer answer won't ultimately fix your bug, it is a much cleaner way of doing things.
?>
<script type=text/javascript>;
var hidden = false;
function actiondb1() {
if(!hidden) {
document.getElementById('clickdb1').style.visibility = 'hidden';
document.getElementById('db1').style.visibility = 'visible';
document.getElementById('db1').disabled = false;
document.getElementById('db1').value ='<?php echo $_SESSION["username"];?>';
}
}
</script>;
<?php

Did you start session in this page?If you didn't,use the follow code to start session.
session_start();
Then change your code to
echo "<script type=text/javascript>";
echo "var hidden = false;\n";
echo "function actiondb1() {\n";
echo "alert('".$_SESSION['username']."')\n"; //test code
echo "if(!hidden) {\n";
echo "document.getElementById('clickdb1').style.visibility = 'hidden';\n";
echo "document.getElementById('db1').style.visibility = 'visible';\n";
echo "document.getElementById('db1').disabled = false;\n";
echo "document.getElementById('db1').value ='".$_SESSION["username"]."';\n";
echo "}\n";
echo "}\n";
echo "</script>";
it will be ok.

Redirect to a page/URL after alert button is pressed

i have referred to this two questions call php page under Javascript function and Go to URL after OK button in alert is pressed. i want to redirect to my index.php after an alert box is called. my alert box is in my else statement. below is my code:
processor.php
if (!empty($name) && !empty($email) && !empty($office_id) && !empty($title) && !empty($var_title) && !empty($var_story) && !empty($var_task) && !empty($var_power) && !empty($var_solve) && !empty($var_result)) {
(some imagecreatefromjpeg code here)
else{
echo '<script type="text/javascript">';
echo 'alert("review your answer")';
echo 'window.location= "index.php"';
echo '</script>';
}
it's not displ ying anything(no alert box and not redirecting). when i delet this part echo 'window.location= "index.php"'; it's showing the alert. but still not redirecting to index.php. hope you can help me with this. please dont mark as duplicate as i have made tose posts as reference. thank you so much for your help.

You're missing semi-colons after your javascript lines. Also, window.location should have .href or .replace etc to redirect - See this post for more information.
echo '<script type="text/javascript">';
echo 'alert("review your answer");';
echo 'window.location.href = "index.php";';
echo '</script>';
For clarity, try leaving PHP tags for this:
?>
<script type="text/javascript">
alert("review your answer");
window.location.href = "index.php";
</script>
<?php
NOTE: semi colons on seperate lines are optional, but encouraged - however as in the comments below, PHP won't break lines in the first example here but will in the second, so semi-colons are required in the first example.

if (window.confirm('Really go to another page?'))
{
alert('message');
window.location = '/some/url';
}
else
{
die();
}

window.location = mypage.href is a direct command for the browser to dump it's contents and start loading up some more. So for better clarification, here's what's happening in your PHP script:
echo '<script type="text/javascript">';
echo 'alert("review your answer");';
echo 'window.location = "index.php";';
echo '</script>';
1) prepare to accept a modification or addition to the current Javascript cache.
2) show the alert
3) dump everything in browser memory and get ready for some more (albeit an older method of loading a new URL
(AND NOTICE that there are no "\n" (new line) indicators between the lines and is therefore causing some havoc in the JS decoder.
Let me suggest that you do this another way..
echo '<script type="text/javascript">\n';
echo 'alert("review your answer");\n';
echo 'document.location.href = "index.php";\n';
echo '</script>\n';
1) prepare to accept a modification or addition to the current Javascript cache.
2) show the alert
3) dump everything in browser memory and get ready for some more (in a better fashion than before) And WOW - it all works because the JS decoder can see that each command is anow a new line.
Best of luck!

Like that, both of the sentences will be executed even before the page has finished loading.
Here is your error, you are missing a ';'
Change:
echo 'alert("review your answer")';
echo 'window.location= "index.php"';
To:
echo 'alert("review your answer");';
echo 'window.location= "index.php";';
Then a suggestion:
You really should trigger that logic after some event. So, for instance:
document.getElementById("myBtn").onclick=function(){
alert("review your answer");
window.location= "index.php";
};
Another suggestion, use jQuery

Working example in php.
First Alert then Redirect works.... Enjoy...
echo "<script>";
echo " alert('Import has successfully Done.');
window.location.href='".site_url('home')."';
</script>";

<head>
<script>
function myFunction() {
var x;
var r = confirm("Do you want to clear data?");
if (r == true) {
x = "Your Data is Cleared";
window.location.href = "firstpage.php";
}
else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</head>
<body>
<button onclick="myFunction()">Retest</button>
<p id="demo"></p>
</body>
</html>
This will redirect to new php page.