We Keep Coding

Getting values from HTML Content Editable, passing those values to Javascript and use AJAX to send to PHP file [duplicate]

This question already has answers here:
How to save and retrieve contenteditable data
(2 answers)
Closed 1 year ago.
I have different content editable in my html file. I have a couple of labels, and a couple of tables with content editable as well.
I want to send the info to a database after user focus out, no buttons to trigger the action.
This is part of my html:
<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
<input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
<tr>
<td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>
I'm new to programming, and I'm trying to figure the best way to get the contenteditable information, and send it to my database. I know I have to use Javascript, Ajax, and send it to a PHP file based on the information I've researched. The PHP part is not a problem for me, but I need a little help with the Javascript and AJAX parts because everything I tried so far has not retrieved any results.
Thank you.

A simple example of how to do this might be to assign a blur event listener bound to all elements that have the contenteditable attribute set and use fetch api to send the AJAX request using a FormData object to your backend PHP script.
const getparent=(e)=>{
let n=e.target;
while(n.tagName.toLowerCase()!='span' && n.className!='record'){
if(n.tagName=='BODY')return false;
n=n.parentNode;
}
return n;
}
document.querySelectorAll('[contenteditable="true"]').forEach(el=>{
el.addEventListener('blur',function(e){
let span=getparent(e);
if( !span )return;
let fd=new FormData();
fd.set('userid', span.querySelector('[name="userId"]').value );
fd.set('text', this.textContent );
fd.set('id', this.id );
fetch( 'https://www.example.com', { method:'post', body:fd, mode:'cors' })
.then( r=>r.text() )
.then( text=>{
console.log( 'Do something with returned response: %s',text )
})
})
})
.record{
display:block;
margin:1rem;
border:1px solid red;
padding:1rem;
}
<span class='record'>
<label id="label-1" contenteditable="true">Hello World</label>
<table>
<input type="hidden" name="userId" value="123456789">
<tr>
<td id="row-1" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" contenteditable="true">A message from the Bottom</div>
</span>
<span class='record'>
<label id="label-2" contenteditable="true">World Hello</label>
<table>
<input type="hidden" name="userId" value="987654321">
<tr>
<td id="row-2" name="secondRow" contenteditable="true">This is second row</td>
</tr>
</table>
<div class="footer" contenteditable="true">A bottom from the Message</div>
</span>

It's not an "out of the box" answer, but a skeleton : you can listen for an element lost the focus, ie the user is no more typing in it.
let edit = document.getElementById("firstRow");
edit.addEventListener("blur", function(e) {
console.log("You can send to php");
// please have a look here for ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX
});
<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
<input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
<tr>
<td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>

How can I get input elements using inputmask to not revert changes to the previous value when using them within a table sorted with tablesorter?

I have been spending a fair amount of time working on an issue with input elements, which are using inputmask, within a table sorted using tablesorter.
When the user enters an input in the masked field after the updateRows event has been triggered and then changes focus, the masked field will revert the content to the previously entered value.
I have poured through the documentation of both plugins to figure a workaround, but I have not found a suitable solution. I realize that there are other ways to work around this issue, however I have ajax code (for autosaving each row separately) that would require a rewrite that I do not wish to do if it could be avoided.
Any help would be appreciated.
Example: https://jsfiddle.net/5bqyod6j/1/
Code:
<table id='table'>
<thead>
<tr>
<th class='sorter-inputs'>Col 1</th>
<th class='sorter-inputs'>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="control"><input type="text" class='money' value='25' form='f-1'></div>
</td>
<td>
<div class="control"><input type="text" value='test2' form='f-1'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='12' form='f-2'></div>
</td>
<td>
<div class="control"><input type="text" value='another 2' form='f-2'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='89' form='f-3'></div>
</td>
<td>
<div class="control"><input type="text" value='val-2' form='f-3'></div>
</td>
</tr>
</tbody>
<!-- These are part of the ajax functionality -->
<form action="" id="f-1"></form>
<form action="" id="f-2"></form>
<form action="" id="f-3"></form>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter#2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter#2.31.3/dist/js/parsers/parser-input-select.min.js" integrity="sha256-ugEATjydQqCNpuca1CGyiLVdN9N6uuouP2CkIL7Dr1k=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask#5.0.6/dist/jquery.inputmask.js" integrity="sha256-E9pFDiHlfB3afd46AyTqvmjcSv7VREgs5Y5e8TBECU0=" crossorigin="anonymous"></script>
<script>
$('#table').tablesorter()
$('.money').inputmask('currency', {
autoUnmask: true,
groupSeparator: ',',
allowMinus: true,
digits: 2,
placeholder: '_',
inputMode: 'decimal'
})
$('input[type=text]').on('change', function() {
$('#table').trigger('updateRows')
})
</script>

Found the issue. It lies within js/parsers/parser-input-select.js. It appears to attach some handlers at inopportune times to play nice with inputmask. Writing a custom parser or text extractor and updating the table at a better time seems to work well enough.
I have also discovered that even loading said file and not even using the parsers at all will trigger the bug.

How to select closet element in jQuery and fire change event to file input?

I have a table with 2 TDs, its HTML is something like below: Here I want to send ajax request when as soon as file input change.
File is changing when change-image button click.
<tbody>
<tr>
<td class='center'>
<div class='p-img'>
<img class='img-thumbnail' src='269_thumb_1543210907.jpg' width='200' height='100'>
<div class='loader'></div>
</div>
</td>
<td class='center'>
<div class='upload-btn-wrapper'>
<button class='btn btn-minier btn-purple change-image ' data-image_id='1374'>Change Image</button>
<input type='file' name='myfile' />
</div>
</td>
</tr>
<tr>
<td class='center'>
<div class='p-img'>
<img class='img-thumbnail' src='269_thumb_1543211961.jpg' width='200' height='100'>
<div class='loader'></div>
</div>
</td>
<td class='center'>
<div class='upload-btn-wrapper'>
<button class='btn btn-minier btn-purple change-image' data-image_id='1380'>Change Image</button>
<input type='file' name='myfile' />
</div>
</td>
</tr>
</tbody>
Now I want select which button is clicked by user to send ajax request.
Can anybody tell me how detect which button is click and how fire change event to its file input?
This is how I tried it, but not sure how to proceed. Sorry I am new to jquery.
$('#property_images').on('click', '.change-image', function(e){
e.preventDefault();
var changeImg = $(this).closest('tr').children('td').find('.change-image');
var image_id = $(this).data("image_id")
});

Use change event to detect input file change. And get the previous button by .prev() function and with attr() function get the "data-image_id" attribute value.
$('#property_images').on('change', 'input[name="myfile"]', function(e){
debugger;
e.preventDefault();
var image_id = $(this).prev().attr("data-image_id");
console.log(image_id);
var loaderDiv = $(this).closest("tr").find(".loader");
console.log(loaderDiv)
});

For some reason you have a reference to the button that was clicked, but than you search the table row for the button.
The file input that is with the button inside the same TD, so you need to look at the TD, not the TR
$(this).closest("td").find([type='file'])
or just use next()
$(this).next([type='file'])

jQuery sort in div - complicated

I have a div called #usersInRoom which is the placeholder for the inner divs.
Currently i have 2 rows /2 entries in the div.
But my question is, how can i via. jQuery update the entries to sort by "exp"?
Now it shows "Stefanie" first with "6" exp. And Bare Kald Mig Jesper with 14 exp. last.
How can i sort it, so it outputs the entries with highest exp first?
<div id="usersInRoom">
<div class="entry in_room" id="userInRoom-2" style="background-color: rgb(255, 255, 255);">
<table style="width:100%">
<tbody>
<tr>
<td style="width:32px">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c33.33.414.414/s200x200/996882_221295918024677_1913237122_n.jpg" style="height:32px;width:32px">
</td>
<td style="vertical-align:middle"><strong>Stefanie Pedersen</strong>
</td>
<td align="right" style="vertical-align:middle;color:#999"><span id="exp-2">6</span> exp.</td>
</tr>
</tbody>
</table>
</div>
<div class="entry in_room" id="userInRoom-1" style="background-color: rgb(155, 229, 162);">
<table style="width:100%">
<tbody>
<tr>
<td style="width:32px">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc1/c176.49.608.608/s200x200/429356_10151257167066983_1091687280_n.jpg" style="height:32px;width:32px">
</td>
<td style="vertical-align:middle"><strong>Bare Kald Mig Jesper</strong>
</td>
<td align="right" style="vertical-align:middle;color:#999"><span id="exp-1">14</span> exp.</td>
</tr>
</tbody>
</table>
</div>
</div>

If you are showing the values from database ,you can sort using sql ORDER BY 'exp' ASC or DESC in the query in backend to populate reults.then you can get sorted results in the first place.
OR
if you want to sort it on the client side,then try using jueery data tables .
for example
https://datatables.net/release-datatables/examples/basic_init/zero_config.html

You can do this with current code using jquery in this way:
First add a class to the experience span.
<span id="exp-2" class="exp">6</span>
And then the jquery:
arr=$("#usersInRoom").find(".exp");
And now to select the parent div:
$(arr[i]).parents(".entry_in_room")
Sorting could be done by accessing text of the elements.
$(arr[i]).text()
But Ideally, why do you require such nesting? The data could be easily handled within a Table element. There's no no need of separate tables. And if you use a single table, there are many jquery plugins available for that.

How to reveal information when clicking on a button/text?

I have a table with 'see more' written on the side of the title "Trainee Insurance.."
I want people to be able to click see more and then information appears below the title
How do I do this?
Thanks!
James
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
</table>

With JQuery:
Give IDs to your 'See More' button and the content that is to be displayed:
$('#see_more').click( function() { $('#more_content').show(); });

You've got a bad case of 1990s HTML.
Here's the 1990s way to do it:
<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
See More...
JS:
function showThis(id) {
document.getElementById(id).style.display='block'
}
A few tips:
don't use tables for layout. Use HTML + CSS
don't use inline font statement, use CSS
explore jQuery.

There might be other ways -- non-JavaScript ways -- but I have always used JavaScript to do this. Add an onclick handler to the "see more" td and, in that handler, set the more element to have display:inline style, something like this (untested):
<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>,
</tr>
</table>

I would use jQuery to show/hide the block of text whenever "See More...." is clicked.
http://api.jquery.com/show/
Of course, this assumes you're already familiar with jQuery. If you aren't, or you can't/won't use it, a quick Google search turned up http://www.cssnewbie.com/showhide-content-css-javascript/

Use display=none; in style and remove it on onclick event.

You will need to either; Have a hidden DIV that appears when you click 'see more'. Which will need to be Javascript or JQuery. OR Have some PHP to generate another row in the table.

If you want to load data in from a separate file you'll have to use AJAX. If you want to show an element that's already on the page when "See More" is clicked you can use regular javascript. Just add a new row to the table, give it an ID and hide it using inline styles. Then add a link around your "see more" text and give it an onclick handler that shows the hidden row. Like this:
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
<td align="right"><font face="lucidagrande" size="2" color="red">See More...</font></td>
</tr>
<tr id="showme" style="display: none">
<td colspan="2">More info appears here!!!</td>
</tr>
</table>

<script language="javascript">
$(document).ready(function(){
$('#see_more').click(function(){
$("#more_text").show();
});
$("#more_text").hide();
});
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" id="see_more">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
<tr><td id="more_text">This is more text here......</td></tr>
</table>