Develop Reference

why is html2canvas used in a loop not getting all the images in the div

I have a page with multiple report cards in separate div tags, each with a unique id. Each report card has a student picture and a school logo there. I also have another page that shows only one report card at a time.
I noticed that when I use html2canvas to convert the page with a single report card, it converts to an image fine, both the logo and student image shows on it but on the page with multiple report cards, when I try using a loop to convert about 8 report cards at once, some of the report cards logo and student picture does not show. They all got converted successfully to an image but the student picture and logo do not show in some. Other information in the report card showed fine.
What can cause this? below is the code I used to convert the page
function doCapture(report_id, loop_num) {
window.scrollTo(0, 0);
$.toast().reset('all');
showToast("<b>Please Wait</b>", "Processing your request...", "info", "#46c35f");
html2canvas(document.getElementById("report_card_page" + loop_num), {scrollY: -window.scrollY}).then(function (canvas) {
var image = canvas.toDataURL("image/jpeg", 0.9);
$.post("../worker/edit-report-card/save-all-capture.php", {"image": image, "report_id" : report_id, "loop_num" : loop_num}, function(data){
$.toast().reset('all');
if(data.includes(" :: ") == true){
var toast_array = data.split(" :: ");
if(toast_array[2].trim() != "success") showToast(toast_array[0], toast_array[1], toast_array[2], toast_array[3]);
else { var total_loop_num = <?php echo $loop_stud_num ?>; if(loop_num == total_loop_num) alert("Publish Completed"); }
//else { var total_loop_num = <?php echo $loop_stud_num ?>; if(loop_num == total_loop_num) showToast(toast_array[0], toast_array[1], toast_array[2], toast_array[3]); }
}
else{
alert(data);
}
});
});
}
and the code to run the loop
$(".convert-multiple-result").click(function(){
var loop_num = <?php echo $loop_stud_num ?>;
for(let g = 1; g <= loop_num; g++){
var report_id = $(".report_card_id" + g).attr("id");
doCapture(report_id, g);
}
});
Each report card goes to a php file that saves the image in a folder. The only issue is that when i try to run the html2canvas in a loop, it does not show the student image or report card in some report cards. I forgot to mention that the report card content is a bit long.
Thanks.

I was using <img src="worker/open-image?name=<?php echo $school_image ?>&f=l" alt="logo"> to open the the image in the browser, the location of the image is in the open-image.php file. For some unknown reason, it was causing some images not to show sometimes and show some other time. I fixed it by using the location of the image directly in the img tag. e.g
<img src="../../logos/<?php echo $school_image ?>" alt="logo">

waiting animation while fetching data in PHP

I have a gif with a loading animation.
in my code I use mysqli_query() to fetch data from a server.
Because, the table is very large it takes time until I see the results.
I am trying to show a "loading" animation while the PHP function is fetching data.
This is my PHP code,
if (isset($_GET['variable'])) {
$_SESSION['variable'] = $_GET['variable'];
$results = mysqli_query($mysqli,"select q1.variable, t3.label, q1.numvalue, description, num_cases from (select variable, numvalue, count(variable) as num_cases from nhws.num_all_{$_SESSION['country']} where variable = '{$_SESSION['variable']}' group by variable, numvalue) q1 inner join (select * from nhws.luvalues where source = '{$_SESSION['country']}' and variable = '{$_SESSION['variable']}') t2 on q1.numvalue=t2.numvalue inner join (select * from nhws.luvariables where source = '{$_SESSION['country']}' and variable = '{$_SESSION['variable']}') t3 on q1.variable=t3.variable;");
echo "<h5>Counts</h5>";
echo '<div id="container" ><img src="ajax-loader.gif" alt="Searching" /></div>';
if ($results->num_rows > 0) {
echo "<table><tr><th>Variable</th><th>label</th><th>Numvalue</th><th>Description</th><th>Num Cases</th></tr>";
// output data of each row
while($row = $results->fetch_assoc()) {
echo "<tr><td>" . $row["variable"]. "</td><td>" . $row["label"]. "</td><td>" . $row["numvalue"]. "</td><td>" . $row["description"]. "</td><td>" . $row["num_cases"]. "</td></tr>";
}
echo "</table>";
} else {echo "0 results";}
}
I am assuming that the function mysqli_query() is the one that takes time because, in my browser it says in the bottom right "waiting for (IP address of the server)"
I tried several methods with AJAX but it did not work while the website was waiting for the server. It did work when the website was waiting for itself and not for a query.
This is my script,
<script>
function makeLoadingGifDisappear() {
document.getElementById('myLoadingGif').style.display = 'none';
}
</script>
And this my HTML code which I replaced before my PHP code,
<img src="ajax-loader.gif" id="myLoadingGif">
Any suggestions?
Thanks!

Try putting a check in a while loop which will check (mysqli_num_rows($result)==0) which means that if table has returned any data back. But, use an if statement inside loop so that you don't put loader everytime loop runs. Once you get back the data the loop going to quit and you can proceed with data.
:D

Place the animated image tag in a div positioned with CSS to cover the portion of the screen you wish to cover and make sure it is the first thing loaded into the page body:
<div class="animated">
<img src="ajax-loader.gif" id="myLoadingGif">
</div>
You can now hide the animated div when the page finishes loading by adding the following just before the closing body tag (shown for reference):
<script type="text/javascript">
window.onload = function() {
document.getElementsByClassName('animated').style.display = 'none';
};
</script>
</body

So, what I did to solve this problem is to hide the GIF with <img src="ajax-loader.gif" id="myLoadingGif" style= "display: none;">
And where the user needs to pick and send the variable to make the query run I added onchange='showDiv()'
Which activates the function below,
function showDiv(){
document.getElementById('myLoadingGif').style.display = "block";
}
And after the query finishes to run the GIF automatically switched to display: none; which is perfect!

Filemaker, PHP and jquery > show hide elements

I am echoing out a form (foreach) from my filemaker records which will result in the items ID, Name, a Checkbox and then an image.
In my understanding i will have to use classes or the elements will all have the same id.
My Code;
foreach($result->getRecords() as $record){
$id = $record->getField('Record_ID_PHP');
$name = $record->getField('DB_Name');
$pic = $record->getField('Photo_Path');
echo '"'.$id.'"<br>';
echo $name.'<br>';
echo '<input type="checkbox" class="check" value="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'">';
echo '<div class="pics">';
echo '<img style="width:200px;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'"><br>';
echo '<hr>';
echo '</div>';
}
Which results in a page full of the records, a checkbox and the relating image.
I wish to only show these images when the checkbox is checked but cannot find a solution, i have tried many jquery scripts, to no avail.
The images will then populate the next page as a pdf to be printed.
I am hoping not to have to grab the checkbox's values as an array to then use the get method with 100's of if statements but cant see another way ?
The jquery ive used.
$(document).ready(function () {
$('.pics').hide();
$('.check').click(function () {
$('pics').show;
});
$('.pics').hide;
});
and
$(function() {
$(".check").click(function(e) {
e.preventDefault();
$('.pics').hide();
$('.pics').show();
});
});
Plus many similar alternatives.
Is there something obvious i am missing ?
Query to filemaker method;
I have changed the path field to a calculated value which works great, thank you, although with 1000's of records, i would need lots of php code to echo the checkbox's to the website and lots more to be able to edit them from the website.
I have done this previously with the value held within the checkbox in filemaker.
$sesame = $print->getField('Allergens::Allergens[11]'); if ($sesame == "Sesame") { $sesame = "checked" ;} else if ($sesame !== "Sesame") {$sesame = "" ;}
This displays the checkbox synced with filemaker.
if ($_POST['Sesame'] == 'Sesame'){ $a_sesame = 'Sesame';} else { $a_sesame = 'No Sesame'; }
This is sent as a variable to my script.
if($a_sesame == "Sesame"){$contains_sesame = "Yes";} else { $contains_sesame = "No";}
This grabs the new value from the form.
Which all work great, but then i am writing a script in filemaker too to enable the to and from of the different names for each checkbox state.
which is for this part 120 lines long, this is a sample which i have to repeat for each repetition of this field.
Set Variable [ $sesame; Value:GetValue ( Get ( ScriptParameter ) ; 11 ) ]
If [ $sesame = "Sesame" ]
Set Field [ Allergens::Allergens[11]; "Sesame" ] Commit Records/Requests
[ Skip data entry validation; No dialog ]
Else If [ $sesame = "No Sesame" ]
Clear [ Allergens::Allergens[11] ] [ Select ]
Commit Records/Requests
[ Skip data entry validation; No dialog ]
Refresh Window
[ Flush cached join results; Flush cached external data ]
End If
This would be far too large to write for so many records, just for these 14 fields used 120 in filemaker and 400 plus in the php.

I am not 100% sure what you are trying to do but this should work. First add an extra div that closes input and div pics like below.
foreach($result->getRecords() as $record){
$id = $record->getField('Record_ID_PHP');
$name = $record->getField('DB_Name');
$pic = $record->getField('Photo_Path');
echo <<<TEXT
'{$id}'<br>
{$name}<br>
<div>
<input type='checkbox' class='check' value='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'>
<div class='pics'>
<img style='width: 200px;' src='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'><br>
<hr>
</div>
</div>
TEXT;
}
then change your java to this
$(document).ready(function() {
$(".pics").hide();
$(".check").click(function() {
$(this).siblings().toggle();
});
});
well I hope this helps

Another alternative would be to set up a simple calculated container field in FileMaker, with a calculated value of:
If ( checkbox; imageField )
This would only pass the image when the checkbox was ticked for a record. This should be faster than handling this in JavaScript, since you'd be limiting the number of images being sent over the wire.
Note: For performance, you might try this with this calculated container field stored and unstored. I suspect stored v unstored should make little difference, in which case I'd suggest leaving this unstored to minimize disk space consumed.

You can use the toggle()function:
$(function() {
$('.pics').hide();
$(".check").is(':checked',function(e) {
e.preventDefault();
$('.pics').toggle();
});
});

PHP: print from a list of data (loop difficult)

Hi i have a little problem,my code create a list of buttons and each button have a name(value) from my list (table 'usernames')
....for exemple (table 'usernames' have 3 lines aa-bb-cc my code make 3 button with values aa & bb & cc..............
so what i want to do, is when i click on a button i want to print the value of this button in a div, for exemple if i click on the button who have the value 2 i want to print 2 in the div(i have a problem whit my loop, and i need help please)
this is my code:
$conn=mysqli_connect("localhost", "root", "pwd","sn") or die(mysqli_error());
$que2=mysqli_query($conn,"select usernames from posts", MYSQLI_USE_RESULT); // return a lot of lines on 'usernames'
$re=0;
$datax=array();
$i=0;
while ($r = mysqli_fetch_array($que2))
{
$re = $r["cnt"];
$datax[$i]=$re;
?>
<input id="ppost" name="ppost" value="<?php echo $datax[$i]; ?>" type="submit">
<br>
<script type="text/javascript">
$(function(){
$('#ppost').click(function(){
alert("<?php echo $datax[$i]; ?>");
});
});
</script>
<?php
$i++;
}

Ok, so there're few things to have a look at:
take the <script> out of the loop - one script can take care of all the buttons
you can't give same ID to all your inputs - id="..." has to be unique throughout your script
the JS script (assuming you have jQuery included prior to your ) should be:
<script type="text/javascript">
$(function(){
$('input[type="submit"]').click(function(){
alert($(this).attr('value'));
});
});
</script>
this should do the trick, let me know if this is what you wanted.

display 125 words from the description field of the database mysql

Hello fellow Overflows,
So im in the middle of creating a toplist script, ready to launch to the public,
I'm stuck on one perticualr subject.
Displaying X amount of content from A database field.
<?php echo $server_data['description']; ?>
As you can see in this image below, That wouldn't be a good idea to display the full amount.
http://i.imgur.com/IhLs7L7.png
What do i need?
Instead of it displaying all of the database field, i just want it to display 150 characters of the field.

It is best to limit characters while you are selecting from database because it will improve performance a bit. You can limit characters on select with mysql LEFT() function.
Here is how to do it:
SELECT LEFT(description, 150), another_col FROM ......

Try this:
$string = substr($server_data['description'], 0, 150);

substr() will only return a certain amount of characters. If you want a certain amount of words then you could use the following:
<?php
function excerpt($content = '',$number_words = 125){
$content = strip_tags($content);
$contentWords = substr_count($content," ") + 1;
$words = explode(" ",$content,($number_words+1));
$excerpt = join(" ",$words);
return $excerpt;
}
echo excerpt($server_data['description'], 125);