We Keep Coding

How to use the value of <div id =last_relay1></div> for create a loop condition in PHP?

I have a JS file that goes to my database and return the value,
The only values that can exist are 0 and 1.
After this I go to an PHP file I invoke this value however I want create a if condition loop to analyze the value of this div for display an image depending of the value.
For example:
if (<div id="last_relay1"></div> = 0) then display IMAGE A
else
if (<div id="last_relay1"></div> = 1) then display IMAGE B
My difficulty is to use the value of as a PHP variable.
//Script to load the value of the current relay
$(document).ready(function(){
setInterval(function(){
$("#last_relay1").load('last_update.php #RELAY1_STATUS_last_update')
}, 1000);
});
//little code to display the value of LAST_RELAY1 for database.
//the values returned possibles are 0 and 1
<div id="last_relay1"></div>

You can use a callback function with .load() to check the text of the DIV after it has been loaded. Use .text() to get the contents of the DIV.
$("#last_relay1").load('last_update.php #RELAY1_STATUS_last_update', function() {
if ($this).text().trim() == "0") {
$("#image").prop("src", "imageA.png");
} else {
$("#image").prop("src", "imageB.png");
}
});

I think what you are looking to do is to send data from the web page (generated by JavaScript) to PHP to decide which image to serve.
The way you framed the question won't help you find a solution (http://xyproblem.info/).
Instead, you will need to either:
preload both image A and image b, and display the one you want in javascript by unhiding it.
Dynamically load the image using PHP by making an XHR request that returns the correct image.

I solved it. I follow the tip provided by Barmar.
I used the following code...
var value = $("#last_relay1").load('last_update.php #RELAY1_STATUS_last_update', function() {
var value_to_test = value.text();
if(value_to_test == 1){
$("#last_relay1").empty();
$('<img src="img/ON.png">').appendTo("#last_relay1"); }
else {
$('<img src="img/OFF.png">').appendTo("#last_relay1");
}
});

Go to an anchor point in a template with code in Angular 4

I have an Angular 4 application in which I need to add the following functionality:
There is a component with a list of objects. When the user double clicks on one of them, the app retrieves from a DB a list of objects and it should scroll to where the object appears.
I'd like to know how I could move to the desired position in the data once that it has been displayed in the browser. Right now, I have the following code:
let objElement = document.querySelector("#object_"+searchItem._objectID);
if (objElement){
objElement.scrollIntoView();
console.log("****** SCROLLING TO OBJECT");
}
The problem is that, the first time that I load the data from the DB, it seems that 'document.querySelector' returns null, as if the HTML wasn't 100% constructed yet, so it doesn't scroll to the position. If I try to locate the element again, it scrolls perfectly (as it doesn't reload the data from the DB).
Is there a "more Angular" way of doing this? I'm trying to find an example like this in the Angular Router documentation but I can't find anything...
EDIT:
To make things clearer, this is the pseudo-code that I run when the user selects an object:
if(selectedObject IS IN currentLoadedObjects) {
scrollTo(selectedObject); // This function runs the code above
}
else { // The object is in a different list, so retrieve it from the DB
ObjectService.getObjectListFromDB(selectedObject)
.subscribe((returnedList) => {
displayObjectList(returnedList); // Basically, this function parses the returned data, which is displayed in the template using an *ngFor loop
scrollTo(selectedObject);
});
}
As you can see, I try to scroll to the object inside the 'subscribe' method, once that I have the data from the database and after I've parsed it. The object list is pretty big, so it takes 1-2 seconds to be displayed in the browser.
Thanks!

Update elements only if element has changed

I am working on a project that is being built around SignalR then JavaScript appending the data to elements.
$("#" + div).html(html);
The problem I am having is that I am calling the server every 2 seconds
$.connection.hub.start().done(function () {
chat.server.send("0", 1);
setInterval(function () {
chat.server.send("0", 1);
}, 2000);
});
This means it's then updating every div, every time the server returns the data, I have been looking for a way to get JavaScript to handle only updating elements if the data returned has changed, there were two ways I was going to go about doing this.
Get the HTML content from the div and do a comparison, however that was flawed because different browsers return different HTML, so that's a no
The second way was to store the content in a global variable and when it runs again, compare the global against the current, if it's different update
However I am looking at possibly something built into JavaScript which could handle this for me, currently I am using .html but when looking into this more, I found out that it first does .empty() and re-appended the data and I'm looking for something that'll only update if it's different.
-- EDIT --
How the project is currently setup is that I have a class containing different properties of what needs to be displayed, e.g.
public class MyClass {
public List<DivOneContent> Content1;
public List<DivTwoContent> Content2;
}
On the server side I have it fetch the content and populate the class
public void Send(string tab, string subTab = null)
{
MyClass data = PrepareModel(tab, subTab);
Clients.Client(Context.ConnectionId).broadcastObject(data);
}
When this is this is turned back to the client side, I have JavaScript functions which take one of the properties and appends that as needed
// First param is the content and the second one is the div ID
devious.htmlStringBuilder.buildContentOne(data.Content1, "Content1");
In the function I just loop and build a string and append such string to the div using .html

javascript/jQuery is automatically updating data in div after data is retrieved

I am building a Ruby on Rails application where I am performing an Ajax request to retrieve some data, perform calculations on it, and place it on the page. The page is going to be performing these calculations every 30 seconds or so on new data from the database, so this means I need to keep the original data from the Ajax request intact. When I'm retrieving the original data, I'm placing it in a div using jQuery like so:
$('#info').data('original', data);
and then taking that data object and running said calculations on it. After the calculations are complete, I place it in a separate data attribute in the same div like so:
$('#info').data('modified', data);
The data in the 'modified' attribute goes to the page, and when the time has come, it pulls the new data from the database, the original data from the div, gets passed to a method for calculating, and then is placed back in the 'modified' attribute for being displayed on the page:
function calculate(data) {
// doing some stuff here
$('#info').data('modified', data);
}
var data = $('#info').data('original');
calculate(data);
All of this is working just fine, however when the very first calculation is being ran, it seems that the 'original' attribute in the div is being overwritten with the data that has been calculated, even though I'm not explicitly telling it to do so. Does anyone have any insight on why this could be happening?

Setting a cookie and then replacing a div with another div

I'm having an issue where i'm trying to use the jQuery plugin by Carhartl : https://github.com/carhartl/jquery-cookie
I thought this would a fairly easy thing to do, but i'm fairly new to jQuery and cookies especially and i'm really struggling now.
What I want to do is:
Set a cookie that registers the visit
Switch one div for another (in this case, change the sticky bar for a different sticky bar with different content)
Keep the new content in place for the returning visitor for x amount of time (if I can specify the exact time, the better)
Current code looks like this:
$(function() {
if(!$.cookie('repeatVisitor')) {
$.cookie("repeatVisitor", "true", { expires: 3 }); //expires in 3 days
setTimeout('showDivTwo();', 3000);
}
})
function showDivTwo() {
$('#sticky-bar').fadeOut();
$('#sticky-private').fadeIn();
}
I would really appreciate some help, i'm in desperate need!

Your cookie plugin usage looks correct; so does all of your code. I think it may be a logic issue.
Your code will never show the private div after the first time.
You can make this adjustment, but note that if you do, you will ALWAYS see the private div.
What seems to be missing is a specific action that the user needs to take to trigger the cookie, not just the cookie's lack of existence:
$(function() {
if(!$.cookie('repeatVisitor')) {
// if the user is not a repeat visitor, set the cookie
$.cookie("repeatVisitor", "true", { expires: 3 }); //expires in 3 days
}
if ($.cookie('repeatVisitor')) {
// if the cookie exists, show the custom div
setTimeout('showDivTwo();', 3000);
}
})
function showDivTwo() {
$('#sticky-bar').fadeOut();
$('#sticky-private').fadeIn();
}