I have a table showing file location along with other informations. for e.g. :
When the user click on the first row i.e. on $_FILES then it should display the contents of FileA.txt.
Is it possible to do this using javascript or using Angular js?
I don't want to use
<input type='file' />
as we already know the file location and also it gives dialog box which ask to save the file, I don't want this. Instead I directly want to show file content. But as I said it shows dialog box which I don't want to show hence looking for alternative.
Thanks in advance,
Ramesh
You can do this using php:
<?php
$filepath = "yourpathhere";
$content = file_get_contents($filepath);
echo $content;
?>
You need to give file location as id of corresponding <tr>. file_class is class of table.
and create a div with class text in which file content will be displayed.
JQuery Code is:
$(document).ready(function() {
$(".file_class").click(function() {
var file_location = $(this).attr('id');
$.ajax({
url : encodeURIComponent(file_location),
dataType: "text",
success : function (data) {
$(".text").html(data);
}
});
});
});
HTML Code should be like this:
<table class="file_class"><tr id="D:\input.txt"></tr></table>
Related
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.
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?
I want to populate a jQuery dialog with dynamic content from a getData.php file. That works fine so far via:
$("#buttonGetData").click(function() {
$.get("getData.php", function(data){
$("#dialog").html(data);
$("#dialog").dialog();
return false;
});
});
The getData.php just gives something back like:
<p id="data1" class="data">data1</p>
<p id="data2" class="data">data2</p>
<p id="data3" class="data">data3</p>
My problem now is: How do I add a dynamic click listener to each data row so I can use the clicked data in my site? I want each 'p' be clickable and then use the data inside for setting its content to a 'textarea'.
The problem seems to be, that the new dynamically added rows arent part of the JS from the site, so I can't reach them via a clickListener.
How would this be done correctly? Thank You!
When you get html related data result using Ajax like you used $(get)... , your newly generated html from Ajax cannot be used for jQuery code OR in other word jQuery/JS don't recognized your newly added html elements generated from Ajax. There is a way you can achieve your required result. You can send your jQuery/JS code with html codes to Ajax from your file (getData.php) as String.In your getData.php you can echo like this.
echo '<p id="data1" class="data">data1</p>';
echo '<script>';
echo "$(document).on('click', '#data1', function(){alert('DATA1 Clicked');});"
echo '</script>';
die();
Above may be very straight forward answer so there is another way which may be more convicting. You can also used delegation on based on event handler. Examples:
$("#dialog").on("click","p", function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
$("#dialog").on("click","#data1", function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
$(document).on('click', '#data1', function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
One of them should be able to solve the problem.
I have a simple HTML table with a dropdown filter, i want to export this table in PDF, and when i use the filter that changes the pdf too. If someone can help me that will be good :)
Data table: https://jsfiddle.net/hk8mvyda/
<SCRIPT language="Javascript">
function filterText()
{
var rex = new RegExp($('#Position').val());
if(rex =="/All/"){clearFiltre()}else{
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFiltre()
{
$('.Position').val('');
$('.content').show();
}
</script>
PS: Sorry for my english
The filter uses javascript. If you want to be able to render the html to a PDF it will need to be something PHP can access. Since javascript does the change on the clients browser, PHP can not access it unless you use a Http request to get the html.
Use file_get_contents(url) to query the url and allow for a url variable to auto select the content of the dropdown. This way PHP can obtain the rendered HTML after the javascript has done what it needs to do .
http://php.net/manual/en/function.file-get-contents.php
Check this both jquery plugin example it maybehelpful to you
https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/
https://www.phpflow.com/php/export-html-table-data-to-excel-csv-png-and-pdf-using-jquery-plugin/
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.