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

How to reload page in MVC dynamically

Can someone help me? I want to change my page when some status change. I don't want to see that refresh sign above.
<script type="text/javascript" language="javascript">
var idleInterval = setInterval("reloadPage()", 5000);
function reloadPage() {
location.reload();
}
</script>
<h2>Verlichting</h2>
<div class="Verlichting">
<div class="Border">
Verlichting Garage 1
</div>
<div class="ButtonVerlichting">
#if (Model.Verlichting1 == true)
{
<button class="On">Aan</button>
}
else if (Model.Verlichting1 == false)
{
<button class="Off">Uit</button>
}
</div>
<div class="Border">
Verlichting Garage 2
</div>
<div class="ButtonVerlichting">
#if (Model.Verlichting2 == true)
{
<button class="On">Aan</button>
}
else if (Model.Verlichting2 == false)
{
<button class="Off">Uit</button>
}
</div>
<div class="Border">
Verlichting Garage Grind
</div>
<div class="ButtonVerlichting">
#if (Model.VerlichtingGrind == true)
{
<button class="On">Aan</button>
}
else if (Model.VerlichtingGrind == false)
{
<button class="Off">Uit</button>
}
</div>
</div>
<div class="clear">
</div>
When one of the Models bool change.
My page need to change when some State change. The buttons control some lights.
Now I refresh te page every 5 seconds. But i want when one state change it change?
I work normally with C# MVC but not with javascript of something else.

You cannot refresh the View server side or "dynamically" with your current code.
HTTP is stateless.
HTTP works like this: a client (web browser in your case, like Chrome) has requested a resource from your server (/mywebsite/myview) because you entered a web address/URL/URI into your web browser location bar. That web address is a "mapping" to your server. An HTTP GET request is sent from your browser to your server and your server is running ASP.NET, IIS processes the request and passes the request to your ASP.NET MVC app. Your controller/view route entry matches and your ASP.NET app View code is served back to the web browser in the form of an HTTP response.
Your web browser parses the Response, containing CSS/HTML and Javascript and renders the view/page.
Your browser is now disconnected from the server. Your browser is not going to talk to your server again unless you take an action like pressing a button or entering a different URL into the location bar. On the other side, your server has no current way to talk to the client browser, your server is disconnected from your client/web browser.
This is a standard HTTP request/response.
You are looking for a push notification feature in your software. Since you are using ASP.NET and are not familiar with Javascript, SignalR would be the best way to keep a connection open between the web browser and your server via Web Sockets with a long polling fallback. SignalR is very easy to use and get setup.
Long polling is what you are currently doing, you are checking every 5 seconds for a change. You can continue to this but instead of getting all the HTML/CSS and Javascript again with a reload. Simply check some other Controller/API endpoint for a state change and then reload the whole page only when that state change occurs. This is actually a reasonably scalable solution from the sounds of your current needs.

I am trying to create a JSP Page with frames

I am trying to create a JSP page which will contain multiple section. Each section will contain data fetched from data base using servlet. I tried using frame and have put frame src ="servlet" and in servlet data is being fetched and forward that to jsp which I want to be displayed inside the frame?? Anyone having some idea for this.

I often want to achieve similar things and do so by setting attributes on the HttpServletRequest object.
Servlet:
User user = userBean.getUser(231);
Job job = user.getJob();
request.setAttribute("user",user);
request.setAttribute("job",job);
request.getRequestDispatcher( url ).forward(request, response);
JSP Page
<div id="section1">
${user.name}
${user.age}
</div>
<div id="section2">
${job.title}
${job.wage}
</div>
Notes
Frame is an old HTML Element and not compatible with HTML5
I've used divs in my example, but you could use HTML5 Section to provide more smeantic meaning.
Hope I've understood your problem and this helps.
Good luck
Adam

Use ajax to send image file to python (flask)

I have an image on my website being updated every 5 seconds (using PubNub and a Raspberry Pi. I use JavaScript to update the image source). This works fine. My problem is I am trying to use Ajax to send the source file to python (flask) and store that file in a MySQL database. Then I want to display the file name on the website. I am new to java script/ ajax.
Here is my java script:
<script type=text/javascript>
$(function() {
$('img#imageid').bind( function() {
$.getJSON('/_button', {
proglang: document.getElementById('imageid').src,
}, function(data) {
$("#buttonState").text(data.result);
});
});
});
</script>
The img#imageid is the id of the current image and the #buttonstate is where i would like to have the image file name displayed
Here is my html:
<img id="imageid" src="http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920-800x450.jpg">
<form>
<p>The button is <span id="buttonState"></span></p>
<br>
</form>
I do not want to use GET or POST. I would like to to automatically send to the python file every time the image source changes.
Here is my Flask view:
#app.route("/_button")
def _button():
try:
lang = request.args.get('proglang')
c.execute ("""UPDATE pictures SET file_name=%s WHERE user_id=%s""",
(str(lang), str(session['user_id'])))
return jsonify(buttonState=lang)
except Exception as e:
return render_template("500.html", error = str(e))

jQuery Google Maps Store Locator not loading external script data in JSON

I am new to JS, and learning fast! I am trying to feed jQuery Store Locator with JSON data to map. I have loaded the very example onto my page and it works perfectly. But in the example, the data is loaded from a JSON formatted file on the server:
jQuery('#map-container').storeLocator({'dataType': 'json', 'dataLocation': 'location.json'});
I am using D3 on my site and it has a great and simple way to pull JSON data into an object (which I am using to populate charts elsewhere on the site). I am trying to use this to pull in the JSON data into the Store Locator:
var map_data_url = "/my-php/data.php?var=GOOGMAP&pid=PNR010101";
d3.json(map_data_url, function (error, data) {
jQuery('#map-container').storeLocator({'dataType': 'json', 'dataLocation': data});
});
but this is not working and showing me no errors in inspect. When I execute the script on its own the JSON is returned to the browser OK. Example:
[{"id":"INS0000000003","name":"Corona, Linda","lat":"-27.46818730","lng":"153.03021970","address":"71 Eagle Street","city":"Brisbane","sate":"QLD","postcode":"4001","phone":"07 4343 9696","mobile":"0412 563 235"},{"id":"INS0000000006","name":"Flare, Steve","lat":"-33.25491100","lng":"151.51529500","address":"69 The Corso","city":"Gorokan","sate":"NSW","postcode":"2263","phone":"02 9898 1221","mobile":"0404 569 536"}]
My HTML:
<div id="map-container" style="width:100%;">
<div id="loc-list">
<ul id="list"></ul>
</div>
<div id="map" style="border: width=100%;"></div>
</div>
What am I doing wrong? Do I have to write the JSON to a file prior to reading it into the Store Locator?