We Keep Coding

How I can append "PHP echo" code in html <div>

I am developing a chat between 2 users. I store the messages in a MySQL database and on chat box page I call AJAX each 2 seconds to get new messages.
All works fine with plain text messages but now I need to allow users to send also files.
I append the new messages using:
$("#chat_container").append(`
<div class="message-bubble ${clasa} ">
<div class="message-bubble-inner">
<div class="message-text">${output_response.Result[i].out_Message}</div>
</div>
<div class="clearfix"></div>
</div>
`);
My chat_container is:
<div id = "chat_container" class="message-content-inner">
</div>
${output_response.Result[i].out_Message} is the plain text that I store in mysql databased. For files I am uploading them to server using a php script that returns me the path and then i store the path as a message in database like:
<a href='upload/1619779744.jpg'>Picture</a>
Because of this the user will see that the message is actually a link and when he clicks on it he goes to
https://server/upload/1619779744.jpg and he downloads the picture which is good.
The problem is that I want to add some security to the site and not show direct path to files in link.
For this I implemented this class https://github.com/sujeetkrsingh/Secure-Download-Url
It works good in a separated file using:
<div class="message-text">AWS11 Logo</div>
This will return to user the link https://server.com/download.php?f=2f4df28349d56457b897f2ed3966799735564add3bef41c0 which hides the actual path of the file.
The problem is that if I store in database AWS11 Logo instead of <a href='upload/1619779744.jpg'>Picture</a> the link of the file is
https://server/%3C?php%20echo%20$encrypturl-%3EgetDownloadLink(%27upload/1619779744.jpg%27);%20?%3E which is wrong.
So the question is how I can append HTML + PHP code using jquery append function?
In my chat file I included the class in the beginning of file using <?php require_once("EncryptUrl.php"); $encrypturl=new EncryptUrl(); ?> and I renamed the file from .html to .php

Jquery $.post html to external php and print the html as pdf. Need to find optimal solution

I get mysql data.
Create - echo the mysql data as html.
If visitor wants to print the data as pdf (i mean to create pdf file and save on computer), i with jquery take the data and send to external php file. In the external php file, using http://www.tcpdf.org solution i want to create pdf file (on fly, only as variable; i do not want to save the file on my server) so that user can save it.
User remains on the same url, just after user clicks button, i offer the user to save rendered pdf. I do not want to change url or add html content to the url (like print_pdf.php?html_content).
At the moment i use code like below.
<div id="to_print_as_pdf">
<div>Some content from mysql</div>
<table>Another content from mysql</table>
</div>
<button type="button">Click to print as pdf</button>
<span id="result_print_pdf"></span>
Jquery to send the data
<script>
$("button").click(function(){
$.post('_prepare_to_print_pdf.php',
{ content_to_print: $('#to_print_as_pdf').html() },
function(result_print_pdf) {
$('#result_print_pdf').html(result_print_pdf).css('color', 'black');
});
});
</script>
File _prepare_to_print_pdf.php
$_SESSION['content_to_print'] = trim($_POST['content_to_print']);
<script>
window.location.href = "https://www.example.com/_print_pdf.php";
</script>
File _print_pdf.php
//Use http://www.tcpdf.org solution
$html = $_SESSION['content_to_print'];
$pdf->writeHTMLCell(0, 0, '', '', $html, 0, 1, 0, true, '', true);
$pdf->Output('example_001.pdf', 'I');
How to do the same without _prepare_to_print_pdf.php? Above solution waste server resources (creating session).
I tried with $.post to send html content directly to _print_pdf.php, but in such case instead of prompting to to save pdf file, i see "garbage" characters...
Solution at the moment
May be will help to someone
$('#for_hidden_form_for_print_pdf').append('<form action="_print_pdf.php" method="post" target="_blank" id="hidden_form_for_print_pdf">' +
'<textarea id="content_to_print" name="content_to_print">html content to send </textarea>' +
'<div><button style="display: none;" id="btn_to_print_pdf">Print pdf</button></div></form>');
$('#btn_to_print_pdf').trigger('click');
$( "#hidden_form_for_print_pdf" ).remove();
So when visitor clicks button/icon, i take necessary html data, insert into textarea id="content_to_print". Then trigger click for btn_to_print_pdf, then remove appended form. So i send to external php file, necessary html code. In php file i process the html code, create content for pdf file and print.

create usercontrol using javascript or winJS or angularJS for Windows8

I am developing a windows 8.1 application using html5/javascript. Need to create usercontrols like we create in native windows application.
Reason:Single page has code of multiple pages/modules, so for code cleanup and better understanding.
How to create usercontrols or is there any other way to do the same?

Yes there is possibility to do the same. WinJS has fragments that you can load and unload, in same manner as usercontrols in windows forms. Also pages behave in same way, if you are using the Windows JavaScript template application "navigator.js"-file.
Here is image from MSDN site how navigator.js switches pages into default.html
Example:
In the main HTML file define button which loads the fragment for testing purpose and div with id where the fragment will be loaded:
<div class="box">
<button class="win-button action" id="basicFragmentLoadButton">Load the fragment</button><br />
<div id="basicFragmentLoadDiv"></div>
<br />
<div id="status"></div>
</div>
In Javascript file utilize WinJS.UI.Fragments namespace "renderCopy" function to render the content of the html file you want to use as usercontrol:
// Assign element into variable
var basicFragmentLoadDiv = document.querySelector("#basicFragmentLoadDiv");
function resetOutput() {
basicFragmentLoadDiv.innerHTML = "";
}
function basicFragmentLoad() {
resetOutput();
WinJS.UI.Fragments.renderCopy("/pages/fragments/content/BasicFragmentLoad.html", basicFragmentLoadDiv)
.done(
function () {
log("successfully loaded fragment", "sample", "status");
},
function (error) {
log("error loading fragment: " + error, "sample", "error");
}
);
/pages/fragments/content/BasicFragmentLoad.html includes simply HTML elements that will be rendered into the main HTML file. You can find more in the fragments section in try.buildwinjs.com

How to echo encoded url image through <img src>

Let's say I have a url of an image link location that doesn't have an extension (.jpg) but when I go to the url it shows me that the corresponding link is an image? How would echo this url in php?
For example the recaptcha image from recaptcha.net it encodes the string with a public key. When I make an html file and use it outputs the image on the page, but when I try to echo the same attributes in php it just outputs a blank image and doesn't display the google captcha image. I am trying to create a forum login page for vbulletin but in this case it should use the captcha implementation since I don't want to sign up for crawling with bots on the my page by google. Can anyone tell me how I can go about doing this?
So basically after the request is made to obtain the key from the image which is assigned to $key the echo request doesn't output the image:
$key = the data inside the GET parameter 'c' everytime the captcha is requested.
echo "<img src='www.google.com/recaptcha/api/image?c=".$key."'/>";

You can use a image regardless of the file extension. It's the MIME type that matters.
The reason why the following won't work is because of no specified protocol.
<img src="goo.gl/XWyGjO"/>
Working:
<img src="//goo.gl/XWyGjO"/>
<img src="http://goo.gl/XWyGjO"/>
<img src="https://goo.gl/XWyGjO"/>
// = inherit the current protocol.

Get a local file from plugin to javascript

I have developped a brower plugin that Acquire a picture from a Scanner or a Camera and save the picture in the file system of the user.
The output is the filepath to the picture.
I want to preview the picture in the Broswer, using javascript...
How can I get the picture without user interaction ?
( part of a Web App only compatible with Google Chrome)

If you have the filepath returned by your browser plugin and you have identified the event when you have to display the image then you can call ShowImage(filepath) function on that event.
<script type="text/javascript">
function ShowImage(filePath) {
$("#preview").append("<img alt='img' src='" + filePath + "'");
}
</script>
Your HTML should contain the div:
<div id="preview"></div>

If you have the contents of the image already you can load them in directly, by base64 encoding it and providing an URL as follows:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />