How to replace non-existing images with a default one in css? - javascript

I have a table of 10 rows which has an image of a user in first column:
<table>
<tr><td><img src='images/35067.png'/></td></tr>
<tr><td><img src='images/35089.png'/></td></tr>
.... <!-- more rows -->
</table>
the image file name is generated by the [id] of its data record within mysql.
some users have no image assigned to them and the file dose not exists in the [images/] path.
i would like to replace the invalid images with a default existing image like
src='images/default.png'
i have some conditions that the action must be done on the client side, not on server-side and it could be done aether with CSS or java-script.

This would work
<img src='images/35067.png' onerror='this.src="images/default.png"'/>

Related

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

Refresh for only one section (not the whole page)

I would like to refresh only one section of the website. It is only one value that I get from Siemens PLC. I receive actual current value, which I want to update on my website.
HTML looks like this:
<table class="tablePowerCurrent">
<tr>
<td>
<p class="Current">:="Var".Point_1.CurrentNow: A</p>
</td>
<td>
<p class="Power">:="Var".Point_1.Power: kWh</p>
</td>
</tr>
</table>
Right now I'm doing it with iframes. The table here is placed inside another html, which I use with the iframe in my main html. The iframe has meta refresh.
But now I would like to use script or something similar, to refresh the value.
The easiest solution is to place a JS script that will call the Siemens PLC server and get
setInterval(function()
{
// Update the Current value
$('.Current').load("https://siemens.com/api/call");
// Update the Power value
$('.Power').load("https://siemens.com/api/call")
}, 100000) // Repeat the refresh every 10sec
Remember that the API call must return a string or a single value because the code will replace the div value in the HTML with the response that will get by that API call (data). Jquery is required

Accessing Js variable in php on the same page just with a difference of div tag in URL

I have a page say abc.php which displays a list of image names in a table.
When u click on any image name, the page loads an overlay at abc.php#openModal. This new page displays a list of related sensor values which are dependent upon the image name.
How do i get the image name when u click on the link to open the overlay ??
Sample Code:
<html>
<body>
<table>
<tr><td>Image name</td></tr>
<tr><td><a href='#openModal'>Image1</a></td></tr>
</table>
<div id="openModal">
<table>
<tr><td>Sensor value</td></tr>
<?php
$sql="SELECT sensor_value FROM table WHERE imageid='$id'";
$result=mysqli_query($conn,$sql);
if($result){
$row=$result->fetch_assoc();
echo "<tr><td>".$row['sensor_value']."</td></tr>";
}
?>
</table>
You cannot access JS variables from PHP code just because PHP is executed on server and JS - on client. In other words, PHP code ends execution earlier than JS code starts.
In you case you should on click call your JS function, which makes async query to server and displays call result in your modal window.

How to update css style from one page to another in JavaScript

I have two pages: index.php and app.php
on first page (index.php) are placed elements for which I want to change css style value like font size. so on first page is located: .options-parameters-inputelement.
on the second page (app.php) is my options panel with inputs where i can input font size value for the desired element. in this case input is textarea #heretype
please see the code:
<div id="one">
<div class="options-parameters-input">
This is testing
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td>Type font size</td>
<td><textarea id="heretype"></textarea></td>
</tr>
</table>
$("#heretype").on("keyup",both);
function both(){
$(".options-parameters-input").css("fontSize", this.value + "px");
}
jsfiddle example: http://jsfiddle.net/gxTuG/106/
My problem is how to transfer new css style value from one page (app.php) to another (index.php) ? because inputs are located in app.php page while desired elements are in index.php.
I hope you can help me
Thank you
You can achieve two ways:
Server side:
You can stored the value in database(permanent). Then next page you can apply in css.
Client side:
You can stored the value in query parameter, cookie or local storage(temporary). Then next page you can apply in css.
As James Monger said, this isn't directly possible. However you can save the changes via PHP (to session or to database). Then when the user opens index.php a different <style>...</style> will be generated based on the saved setting. The setting can be saved by using a form or an ajax call (more complicated).
You can also write to a cookie directly from JavaScript and read it on another page
You can't update css of one page using javascript code from another page. Although what you could do is have an identifier to be shared between the pages. That could be lets say a url param saying index.php?fontsize=10 and app.php?fontsize=10.
Then you can get the value of the param fontsize in your code on either pages and set it to the desired value and pass it around using javaScript.
You can have a default value for the fontsize at starting of the app or have a check saying if param fontsize exists or not in your javaScript code.
Follow this answer of mine.
Alternatively you can make use of localStorage -> Window.localStorage() or cookies -> Document.cookie().
I would suggest going by either the URL param method or setting a localStorage object fontSize and update it whenever needed if you don't want to go with server side code and push the value of fontsize in db.

refresh only one div

I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!
Code block 1 (head):
<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????
;}, 2000); } </script>
Code block 2 (div 1):
<input type='button' value='UPDATE' class="btn" onclick="auto()"/>
Code block 3 (div 2):
<tbody id="doRefresh">
<c:forEach var="sensor" items="${listSensors}" varStatus="status">
<tr class="listData">
<td>${sensor.fileName}</td>
<td>${sensor.date}</td>
<td>${sensor.time}</td>
<td>${sensor.channel1}</td>
<td>${sensor.channel2}</td>
<td>${sensor.channel3}</td>
<td>${sensor.channel4}</td>
<td>${sensor.channel5}</td>
<td>${sensor.channel6}</td>
<td>${sensor.channel7}</td>
<td>${sensor.channel8}</td>
</tr>
</c:forEach>
</tbody>
I have been to the following pages for inspiration (and more):
1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript
Thank you
Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().
Method replaces all the html within the selector with new html from server by simply passing in a url.
/* within interval function */
$('#doRefresh').load('path/to/server/script', function(){
/* new html has been inserted, can run any html related code here*/
});
Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>
Reference: load() Docs

Categories