Develop Reference

Checkboxes Not Rendering with jsPDF

I have a page that auto-populates a form based on some SQL data. The formatting of the form mirrors a form that some users are currently having to manually populate, so this is designed to make sure the form is populated completely and accurately from SQL instead, and save the users some time. As a result though, the formatting of the form has to be exactly like it currently is.
I then have a button that the user clicks at the bottom of the form, and it uses jsPDF and html2canvas to turn the 3 "page" divs into a 3 page PDF that is automatically sent to our s3 server for them to access through their files page.
Everything is basically working perfectly now, except, there is a column of checkboxes on the first page that are used to document if anything in the form has been "changed." You can see an example here. Basically, if the answer to any of the questions is "yes" it auto-checks the box "yes," but also there's a Javascript function that writes a SQL table if they (un)click a box and persists the change.
Example of Form w Checkbox
My scripts for jQuery, jsPDF, and html2canvas
<!-- jsPDF library -->
<script src="/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
Here's the HTML where the checkbox is:
<div class="filerow">
<div class="mcfcolumn"><b>Assignment of Benefits (AOB)</b></div>
<div class="response"><?php echo $aobVal; ?></div>
<div class="changebox"><input type="checkbox" class="checkbox" id="aob" onclick="checkboxClicked('aob')" value="<?php print_r($changeVals['aob']); ?>" <?php if($changeVals['aob'] == 'yes'){ ?> checked <?php } ?> ></div>
</div>
The PHP is echoing the results of some SQL queries.
At the bottom of the page is a button for the Javascript function that creates the PDF
<button class="submitbutton" id="createPdf" onclick="createPdf(<?php echo '\'' . $cid . '\', \'' . $title . '\''; ?>)">Generate PDF</button>
I used some code from this answer to create a recursive function for jsPDF
function createPdf(claimid, title) {
var pdf = new jsPDF('p', 'pt', 'a4');
var pdfName = 'test.pdf';
var options = {};
var $divs = $('.page') //jQuery object of all the myDivClass divs
var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
var currentRecursion=0;
//Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
// pdf.save(pdfName);
var pdfFile = btoa(pdf.output());
$.ajax({
method: "POST",
url: "velocityform_s3save.php",
data: {
data: pdfFile,
claimid: claimid,
title: title,
},
}).done(function(data){
console.log(data);
});
}else{
currentRecursion++;
pdf.addPage();
//$('.page')[currentRecursion] selects one of the divs out of the jquery collection as a html element
//addHtml requires an html element. Not a string like fromHtml.
pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
console.log(currentRecursion);
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
});
}
I have Ajax going to a php page that saves the form to s3 instead of just saving locally, but that's not really relevant, because when I use
pdf.save(pdfName);
I get a locally saved PDF which also does not render the checkboxes. When the PDF renders, it looks like this:
PDF Generated
Everything else is doing exactly what I need it to do, except this one detail. I used jsPDF instead of something like TCPDF because between the CSS, PHP, HTML, and Javascript it just wasn't able to render a remotely well formatted PDF. As of yet, jsPDF is the only thing I've found that's been able to render the 3 pages in proper formatting. Any help getting the checkboxes to render into the PDF is appreciated.
Thanks.

In case anyone has a similar problem, I found the issue was I needed to update my html2canvas link. I found the answer here .
<script src="https://raw.githubusercontent.com/CodeYellowBV/html2canvas/master/build/html2canvas.js"></script>
Immediately resolved the issue.

Can't change span content inside a td HTML using js/php

I have a php snippet on Wordpress that contains a loop through my SQL that will create a table for user.
On that PHP code, i have a specific var that needs to get a X value from web, i was using PHP to do all of it, but since it's not async, it causes page load to be 10s~
I tried use jQuery/JS, unfortunately, i couldn't change value inside <td>
$charstatus = "
<script>
$.get('isOnline.php?name=".$jsName."', function(data) {
var element = document.querySelector('".$vps.$slot."')
element.innerHTML = data
});
</script>";
Why won't it work?

javascript set variable from .text method

I'm new in javascript development and I want to ask how to set variable from text method.
Example: in this code have a text method
$('.phone').text(theRestaurant.phone);
$('.location').text(theRestaurant.location);
$('.info').text(theRestaurant.info);
in the Html file, when I create any class from these will print the value from JSON file.
Example :
<div class='phone'></div>
Output: (000)000-9999
source code:
<div class='phone'>(000)000-9999</div>
I try to set this in variable but it doesn't work.
My try:
var phone = theRestaurant.phone
I want to set it in variable because I need to put it inside href value like so:
<script>
var phone = 'tel:' + phone
document.getElementById("phone").href = phone;
</script>
I hope everything clear. and If have an other solution please tell about it.
Thanks

Have you wrapped your jQuery code in a document.ready() wrapper?
If not, then the javascript might run before the page has had time to create the elements in the DOM, and nothing will work.
<script>
$(document).ready(function(){
//all javascript/jQuery code goes in here
});
</script>
Also, see my comment above about mixing up "ByClassName" and "ByID"

Answer came from #itsgoingdown
this code in main javascript file:
var phone=document.getElementById('phone').innerHTML; document.getElementsByClassName("phone")[0].href = phone;

editing html with embedded PHP using javascript

I hope someone has an answer for me,
I am currently trying to create a PHP product page for my shop website, I have an sql table that stores the name of an image prefix eg if the image file is 'test_1.png' then the table stores 'test'. using embedded php
src="images/shop/<?php echo $row['item_img'], '_1.png';?>"></img>
what I would like to do is using js, dynamically update the src on a mouse click.
something like eg.
var imgSwitch = function(i){
Document.getElementById('js-img').src = "images/shop/
<?php echo $row['item_img'], '_';?>i<?php echo '.png';?>";
}
Even to me this seems wrong which is why I've turned to the GURU's here
Is there anyway this would be possible? If not, any suggestions would be GREATLY appreciated

I am trying to figure out what you are asking, and I think this is your way to go:
var imgSwitch = function(i){
document.getElementById('js-img').src = "images/shop/<?php echo $row['item_img'], '_';?>" + i + ".png";
}
The change is in the i, you have to cut the string and add it as a variable.
But remember that the PHP code is executed at the server, and will not change once the page is sent to the client. When you execute that function, $row['item_img'] will always be the same.

A simple example which you can adapt. What I do in the code below is give the element an id and attach an onclick to it.
In the function we pass the id as a parameter (onclick(changeSrc(this.id))) and we manipulate the src using the getElementById as we have the id.
<img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" id="test" onclick="changeSrc(this.id);" height="400" width="400" />
<script>
function changeSrc(id) {
document.getElementById(id).src = "http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200";
}
</script>
http://jsfiddle.net/tq1Lq5at/
Edit 1
You're using Document when it should be document, notice the lowercase d.

storing values on page to use with javascript

I am populating a list from php, and using the onClick event to run a javascript function once the link has been clicked, I need to associate the value for the engine to the link that has been clicked..and at the moment it is by having the value assigned to the TITLE tag as shown in the code below, I know this is not the proper way of doing this, so instead how could I store the values on the page and be able to access them in the javascript function, so depending on the link that is clicked it retrieves the corresponding value, I was thinking of a storing them as a javascript array or object? or something associative so I could access them from the id of the link so if the link is clicked with the id of e213, once it is clicked then inside the javascript function I could use, 'objectname'.value + 'idvariable', and the property names would be "value" + the id's of the links.
Any help would be great thanks!
<?php
connect();
$sql = "SELECT engine_id, engine, image, value FROM engines";
$result = mysql_query($sql);
while ($row=mysql_fetch_array($result) ) {
echo "<li><a style=\"color:#FF6600;\" id='e".$row['engine_id']."' title = '".$row['value']."' onclick='return enginepic(this)' onfocus='this.hideFocus=true;' href='".$row['image']."'>".$row['engine']."</a></li>";
}
?>

HTML5 allows attributes that start data- for this case. Eg...
<div data-whatever-property="some value" id="some-id"></div>
You can then fetch this data using:
document.getElementById('some-id').getAttribute('data-whatever-property')
Or with jquery...
$('#some-id').attr('data-whatever-property')
Or even easier...
$('#some-id').data('whateverProperty')
Notice that the data method on jQuery turns one-two-three to oneTwoThree. This is conforming to the dataset part of the html5 spec.
Also, consider adding your events via JavaScript rather than using onclick/onfocus/etc attributes. For a list of links, you'll get better performance out of delegated events, jquery makes these easy.

You could just pass in the data you want to the enginepic function as a parameter.
Your onclick would look something like this
onclick='return enginepic(this, \''" . $row['value'] . "\')
And your function declarations would look something like
function enginepic(oLink, data){
.
.
.
}