Hello!
I use : this.parentNode.id in JavaScript to get the id of the parent node.
How can I pass it, and use the value in PHP?
Perhaps you do not understand what those languages are. Here is an explanation, hope it helps.
PHP is SERVER-SIDE only. It runs totally on the server before anything is sent to the browser. All outputs of PHP can be sent to the browser mixed in with HTML, CSS or whatever else you have installed on the server.
JS is CLIENT-SIDE only. It is run totally in the browser. Slightly different versions in different browsers. The browser runs the JS once the page is fully loaded into the browser.
Now with those explained… The PHP code can output items that can be placed into the JS code. Since it is processed before the the page is sent to the browser, you can place data or alter JS code using PHP.
But, JS is in the client-side, the browser. It has no access to PHP directly since it is in your local computer, not on the server. You can use AJAX calls to reload parts of the page. So, there is a way to to call PHP to load a DIV with data from the server. And, you can send data through a HTTP-Post in JS to store data in the server. If this info does not help, perhaps you should explain further what you are attempting to do.
I think before you can actually do whatever you want to do, you should read more about APIs.
Ok, thanks for your answer.
I am getting data from a database and I want the data to show in different div’s.
I am trying by compairing an field in the db and the ID of the div (or the class).
Is there any way to get the div’s id or class to php??
Yes! You can use a PHP query and then show whatever data you want to show.
But, for us to help you, you need to explain further what you want;…
I want to show data from database to different div’s.
No problem getting, selecting or showing the data.
The problem is how to show it in the right div!
How can I select the div’s in php?
Is it possible?
I can get it in JS with parentNode. But is there a way to do it in php?
That’s really more of a HTML issue than a JavaScript…well Kind of.
Here’s an example :
HTML
<main class="content">
<ul class="cards">
</ul>
<div class="flex_container" data-role="controlgroup">
</div>
</main>
I use vanilla JavaScript and Fetch -
Portion of the JavaScript File
/* A function to process the records and display the on the screen */
const process_record = (records) => {
//console.log('records', records);
let entries = document.querySelector('.cards');
records.forEach(record => {
let card = document.createElement('li');
let anchor = document.createElement('a');
anchor.classList.add('anchor');
anchor.setAttribute('href', '#');
let bp_readings = document.createElement('div');
bp_readings.classList.add('bp_readings');
let other_measures = document.createElement('div');
other_measures.classList.add('other_measures');
let date_taken = document.createElement('p');
let t_systolic = document.createElement('p');
let systolic = document.createElement('p');
let t_diastolic = document.createElement('p');
let diastolic = document.createElement('p');
let t_pulse = document.createElement('p');
let pulse = document.createElement('p');
let t_miles_walked = document.createElement('p');
let miles_walked = document.createElement('p');
let t_weight = document.createElement('p');
let weight = document.createElement('p');
let t_sodium = document.createElement('p');
let sodium = document.createElement('p');
card.classList.add('card');
date_taken.classList.add('date_taken');
date_taken.textContent = record.date_taken;
date_taken.setAttribute('contenteditable', 'true');
date_taken.setAttribute('data-id', record.id);
t_systolic.classList.add('t_systolic');
t_systolic.textContent = 'S:';
systolic.classList.add('systolic');
systolic.textContent = record.systolic;
systolic.setAttribute('contenteditable', 'true');
systolic.setAttribute('data-id', record.id);
t_diastolic.classList.add('t_diastolic');
t_diastolic.textContent = 'D:';
diastolic.classList.add('diastolic');
diastolic.textContent = record.diastolic;
diastolic.setAttribute('contenteditable', 'true');
diastolic.setAttribute('data-id', record.id);
t_pulse.classList.add('t_pulse');
t_pulse.textContent = 'P:';
pulse.classList.add('pulse');
pulse.textContent = record.pulse;
pulse.setAttribute('contenteditable', 'true');
pulse.setAttribute('data-id', record.id);
t_miles_walked.classList.add('t_miles_walked');
t_miles_walked.textContent = 'M:';
miles_walked.classList.add('miles');
if (record.miles_walked == 0) {
record.miles_walked = null;
}
miles_walked.setAttribute('contenteditable', 'true');
miles_walked.textContent = record.miles_walked;
miles_walked.setAttribute('data-id', record.id);
t_weight.classList.add('t_weight');
t_weight.textContent = 'W:';
weight.classList.add('weight');
if (record.weight == 0) {
record.weight = null;
}
weight.setAttribute('contenteditable', 'true');
weight.textContent = record.weight;
weight.setAttribute('data-id', record.id);
t_sodium.classList.add('t_sodium');
t_sodium.textContent = 'S:';
sodium.classList.add('sodium');
if (record.sodium == 0) {
record.sodium = null;
}
sodium.setAttribute('contenteditable', 'true');
sodium.textContent = record.sodium;
sodium.setAttribute('data-id', record.id);
entries.appendChild(card);
card.appendChild(anchor);
anchor.appendChild(date_taken);
anchor.appendChild(bp_readings);
bp_readings.appendChild(t_systolic);
bp_readings.appendChild(systolic);
bp_readings.appendChild(t_diastolic);
bp_readings.appendChild(diastolic);
bp_readings.appendChild(t_pulse);
bp_readings.appendChild(pulse);
anchor.appendChild(other_measures);
other_measures.appendChild(t_miles_walked);
other_measures.appendChild(miles_walked);
other_measures.appendChild(t_weight);
other_measures.appendChild(weight);
other_measures.appendChild(t_sodium);
other_measures.appendChild(sodium);
});
}
/* Handle General Errors in Fetch */
const handleErrors = function (response) {
if (!response.ok) {
throw (response.status + ' : ' + response.statusText);
}
return response.json();
};
/* retrieve User Data and Create Links */
const retrieveBPTableUISuccess = function (bp) {
console.log(bp);
process_record(bp);
links();
};
/* If Database Table fails to save data in mysql table */
const retrieveBPTableUIError = function (error) {
console.log("Database Table did not load", error);
};
/* show Data for Blood Pressure */
const createTable = (retrieveUrl, succeed, fail) => {
fetch(retrieveUrl, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data)
})
.then((response) => handleErrors(response))
.then((data) => succeed(data))
.catch((error) => fail(error));
};
/* Retrieve the Data and Display them */
createTable('newRetrieveBP.php', retrieveBPTableUISuccess, retrieveBPTableUIError);
I create the HTML with JavaScript and use CSS as normal just like a normal HTML page:
You can see it action here - Blood Pressure Readings
An my full repository here - https://github.com/Strider64/phototechguru
To answer your question you would use an event listener if I’m understanding it correctly?
Of course you would have to modify to select the correct HTML element or have it done automatically and if that is the case no event listener would be needed just select by a class or id.
const changeText = (e) => {
let cname = e.target.className.valueOf();
console.log('Class Name', cname);
const modified = () => {
e_data.id = parseInt(e.target.getAttribute('data-id'));
//console.log('data', e_data);
updateFile('bp_edit.php', updateUISuccess, updateUIError)
};
switch (cname) {
case 'date_taken':
e_data.id = parseInt(e.target.getAttribute('data-id'));
e_data.date_taken = e.target.valueOf().textContent;
//console.log('data', e_data);
updateFile('bp_edit.php', updateUISuccess, updateUIError)
break;
case 'systolic':
e_data.systolic = e.target.valueOf().textContent;
modified();
break;
case 'diastolic':
e_data.diastolic = e.target.valueOf().textContent;
modified();
break;
case 'pulse':
e_data.pulse = e.target.valueOf().textContent;
modified();
break;
case 'miles':
e_data.miles_walked = e.target.valueOf().textContent;
modified();
break;
case 'weight':
e_data.weight = e.target.valueOf().textContent;
modified();
break;
case 'sodium':
e_data.sodium = e.target.valueOf().textContent;
modified();
break;
default:
console.log('Class Name Not Found!');
}
};
document.addEventListener( 'focusout', changeText, false);
It can be done in jQuery, but I haven’t coded in that library in a long time.