Edit contenteditable element and POST content to server

202
May 18, 2018, at 06:30 AM

I have a table of nodes. When I click on a particulare node, a modal window pops up containing the following div:

<div id="endDiv" style="display: none">
    <ol class="rounded-list">
        <li><label>NAME:<span id="name"></span></label></li>
        <li><label>LOCATION:<span id="location"></span></label></li>
        <button id="btn" onclick="updateButton()">UPDATE INFO</button>
    </ol>
</div>

The JS function with the GET method is the following:

function getEndpoints(nodeid) {
$.get( ".../node/" +nodeid, function( node ) {
    var key = ["location", "name"];
    var endpoints = node.endpoints[0];
        for(var k = 0; k < key.length; k++){
            $("#" + key[k]).text(endpoints[key[k]]);
           //here I set 'contenteditable' attribute to the elements from div
            $("#name").attr('contenteditable', 'true');
            $("#location").attr('contenteditable', 'true');
        }

What i want is to edit 'NAME' and 'LOCATION' fields and then use the 'UPDATE INFO' button to submit it to the server. I've tried using POST method as following:

function setName(nodeid) {
$.post("..../info/act/set?params=" + nodeid,{
    name: $("#name").contents(),
})
console.log(name)}
function updateButton(){
$("#btn").click(function(){
    setName(1);//i gave 1 as parameter (in order to update the node with id: 1)
})}

I also tried to parse the data but without succes:

$("#name").keypress(function(event){
        var enter = event.which == 13, //store ENTER key
        el = event.target,
        input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA',
        data = {};
        if (input == enter) {
                data[el.getAttribute('data-name')] = el.innerHTML;
                log(JSON.stringify(data));
                el.blur();
                event.preventDefault();
                updateButton();//call the update function after parsing
        }
    });

What I'm doing wrong here? Any suggestions?

Rent Charter Buses Company
READ ALSO
How to create dynamic DOM element in angular?

How to create dynamic DOM element in angular?

I'm stuck at how to create a dom element in angular and pass it to jsPlumb which I am using to draw charts

230
Print a DIV Based on its ID

Print a DIV Based on its ID

I can print specific content in a page using @media print through CSS and it works great

133
My Closure Won&#39;t Work

My Closure Won't Work

I'm trying to prevent polluting the global space with a bunch of variables, and since I can't use let yet, I have to make closuresSo I have this basic webpage with a bootstrap accordion, each card hiding different examples

141
Indentify tab with aria-selected=true and change tab background color in jquery

Indentify tab with aria-selected=true and change tab background color in jquery

We have a glossary page that lets you select from over a hundred different tabs with different glossary terms and the definition will appear in the definition div tag depending on which tab you selectThat's all well and good, but the tab itself has no identifier...

214