Inline Edit of the table content

JavaScript
1

Hello Gurus,

I created html and javascript for inline editing. I want this do be dynamic and come from the table. I intend to use ajax to push the data from the mysql database. the question is, How can i make the cell that has been clicked to be edited in php. If I put two DIV, the first one is the one edited.

See below code

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function login(showhide, id, data) {

                if (showhide == "show") {
                    document.getElementById(id).style.visibility = "visible";
                    document.getElementById("Eshow").style.visibility = "hidden";
                } else if (showhide == "hide") {
                    document.getElementById(id).style.visibility = "hidden";
                    document.getElementById("Eshow").style.visibility = "visible";
                    document.getElementById("Eshow").innerHTML = data;
                }
            }
        </script>
        <style>
            #cEdit, #Eshow {
                border: none;
                padding: 0;
                margin: 0;
                background: none;
            }

            #Eshow:hover {
                border: 1px solid #FF0000;
            }
            #cEdit {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div>Click Text to edit</div>
        <div style="top: 407px; left: 246px; display: block;">
            <div id="Eshow" onclick='login("show", "cEdit","")' style="width: 400px; height: 24px;">Lottie</div> 
            <div id="cEdit" > <textarea rows="1" style="width: 450px; height: 24px;" onmouseout='login("hide", "cEdit", this.value)'>Lottie</textarea>
            </div>
        </div>
    </body>
</html>
2

Not sure I understand the question. Could you rephrase it?

3

I believe that he’s wanting to take the client-side edit, and push those changes through PHP to update the mysql database.

It sounds like quite the security nightmare.

4

Possible. The following confused me:

Let’s wait for the OP to return. I don’t think it has to be a security nightmare if handled correctly, but what is it with all these PHP questions in the JS forum? : )

5

Thanks for the Reply.
The data will be pulled from the database and displayed on the client. I want to client be able to edit and the changed the in the DB. I have no problem sending the request to the db. The Issue at hand is how to handle multiple entries displays on the client side the way phpmyadmin handles it.

6

In the demo you provided you have a div. When you click on this div a second div is displayed containing a text area. When you mouse out from the text area, both the text area and second div are hidden again. The HTML of the first div is set to whatever the value of the text area is.

What should happen next?
Do you mean that when you mouse out of the text area, you want the value of the text area to be sent to a server?

7

Pullo,

Sending the data to DB is not a problem and the two DIV alternate on being visible.

I need similar behavior for multiple dynamic DIV that will be create from data from the DB. how should i handle that?

8

So, you need the same behaviour as is demonstrated in the demo, for multiple divs on the same page,
Did I get that right?

9

This is correct Pullo thanks

10

Ok, here you go:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Whatevs</title>
    <style>
      .cEdit, .Eshow {
        border: none;
        padding: 0;
        margin: 0;
        background: none;
      }

      .Eshow:hover {
        border: 1px solid .FF0000;
      }

      .cEdit {
        visibility: hidden;
      }

      .cEdit textarea{
        width: 450px;
        height: 24px;
      }

    </style>
  </head>
  <body>
    <p>Click Text to edit</p>

    <div>
      <div class="Eshow">Lottie</div>
      <div class="cEdit">
        <textarea rows="1">Lottie</textarea>
      </div>
    </div>

    <div>
      <div class="Eshow">Hottie</div>
      <div class="cEdit">
        <textarea rows="1">Hottie</textarea>
      </div>
    </div>

    <div>
      <div class="Eshow">Sottie</div>
      <div class="cEdit">
        <textarea rows="1">Sottie</textarea>
      </div>
    </div>

    <div>
      <div class="Eshow">Tottie</div>
      <div class="cEdit">
        <textarea rows="1">Tottie</textarea>
      </div>
    </div>

    <script>
      function get_firstchild(el){
        var first = el.firstChild;
        while (first.nodeType!=1){
          first = first.nextSibling;
        }
        return first;
      }

      var contentDivs = document.querySelectorAll(".Eshow");
      for(var i=0;i<contentDivs.length;i++){
        contentDivs[i].addEventListener('click', function(){
          this.nextElementSibling.style.visibility = "visible";
          this.style.visibility = "hidden";
        }, false);
      }

      var textAreaDivs = document.querySelectorAll(".cEdit");
      for(var i=0;i<textAreaDivs.length;i++){
        textAreaDivs[i].addEventListener('mouseout', function(){
          this.previousElementSibling.style.visibility = "visible";
          this.previousElementSibling.innerHTML = get_firstchild(this).value;
          this.style.visibility = "hidden";
        }, false);
      }
    </script>
  </body>
</html>

It’s essentially the same script, just using class names and moving the inline CSS / inline JS to the correct places.

You could probably make this a lot prettier, by introducing some kind of generic toggle function, but I’ll leave that to you …

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.