Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25
  1. #16
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    For example, from your most recent code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
        .editable {
            background-color: #FF9;
            cursor: pointer;
        }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        setClickable();
    });
    
    function setClickable() {
        $("#editInPlace").click(function () {
            var tarea = "<div><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
            var btns = "<div><input type='button' value='save' class='saveButton' /> " +
                "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
            var revert = $(this).html();
            
            $(this).after(tarea + btns).remove();
            
            $(".saveButton").click(function () {
                saveChanges(this, false);
            });
            $(".cancelButton").click(function () {
                saveChanges(this, revert);
            });
        }).mouseover(function () {
            $(this).addClass("editable");
        }).mouseout(function () {
            $(this).removeClass("editable");
        });
    }
    
    function saveChanges(obj, cancel) {
        if(!cancel) {
            var t = $(obj).parent().siblings(0).val();
            $.post("test2.php", {content: t}, function(txt) {
                alert(txt);
            });
        } else {
            var t = cancel;
        }
        $(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
        setClickable();
    }
    </script>
    </head>
    
    <body>
    
    <!--<?php
    include('db.php');
    
    $query  = "SELECT * FROM videos ORDER By vid DESC";
    $result = mysql_query($query);
    
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
    echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
    }
    ?>-->
    <div class="editInPlace">Some text here</div>
    <div class="editInPlace">Some text here 2nd</div>
    <div class="editInPlace">Some text here 3rd</div>
    </body>
    </html>
    I've added sample divs at the bottom to make it easier for someone to test.

    What is the purpose of remove()? You seem to be inserting an element then removing it..?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  2. #17
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The following is a bit closer I suspect:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
        .editable {
            background-color: #FF9;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        setClickable();
    });
    
    function setClickable() {
        $(".editInPlace").click(function () {
            var tarea = "<div class='holder'><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
            var btns = "<div><input type='button' value='save' class='saveButton' /> " +
                "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
            var revert = $(this).html();
            
            $(this).replaceWith(tarea + btns);
            
            $(".saveButton").click(function () {
                saveChanges(this, false);
            });
            $(".cancelButton").click(function () {
                saveChanges(this, revert);
            });
        }).mouseover(function () {
            $(this).addClass("editable");
        }).mouseout(function () {
            $(this).removeClass("editable");
        });
    }
    
    function saveChanges(obj, cancel) {
        if(!cancel) {
            var t = $(obj).parent().siblings(0).val();
            $.post("test2.php", {content: t}, function(txt) {
                alert(txt);
            });
        } else {
            var t = cancel;
        }
        //$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
        $(obj).closest('.holder').replaceWith('<div id="editInPlace">' + t + '</div>');
        setClickable();
    }
    </script>
    </head>
    
    <body>
    
    <!--<?php
    include('db.php');
    
    $query  = "SELECT * FROM videos ORDER By vid DESC";
    $result = mysql_query($query);
    
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
    echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
    }
    ?>-->
    <div class="editInPlace">Some text here</div>
    <div class="editInPlace">Some text here 2nd</div>
    <div class="editInPlace">Some text here 3rd</div>
    </body>
    </html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  3. #18
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You need to use live() or, since jQuery 1.7, on() to attach events to elements - existing or newly inserted.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  4. #19
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
        .editable {
            background-color: #FF9;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        setClickable();
    });
    
    function setClickable() {
        $(".editInPlace").on("click", function () {
            var tarea = "<div class='holder'><textarea rows='10' cols='60'>" + $(this).html() +
                "</textarea>";
            var btns = "<div><input type='button' value='save' class='saveButton' /> " +
                "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
            var revert = $(this).html();
            
            $(this).replaceWith(tarea + btns);
            
            $(".saveButton").on("click", function () {
                saveChanges(this, false);
            });
            $(".cancelButton").on("click", function () {
                saveChanges(this, revert);
            });
        }).on("mouseover", function () {
            $(this).addClass("editable");
        }).on("mouseout", function () {
            $(this).removeClass("editable");
        });
    }
    
    function saveChanges(obj, cancel) {
        if(!cancel) {
            var t = $(obj).parent().siblings(0).val();
            $.post("test2.php", {content: t}, function(txt) {
                alert(txt);
            });
        } else {
            var t = cancel;
        }
        //$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
        $(obj).closest('.holder').replaceWith('<div class="editInPlace">' + t + '</div>');
        setClickable();
    }
    </script>
    </head>
    
    <body>
    
    <!--<?php
    include('db.php');
    
    $query  = "SELECT * FROM videos ORDER By vid DESC";
    $result = mysql_query($query);
    
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
    echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
    }
    ?>-->
    <div class="editInPlace">Some text here</div>
    <div class="editInPlace">Some text here 2nd</div>
    <div class="editInPlace">Some text here 3rd</div>
    </body>
    </html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  5. #20
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by AndrewGSW View Post
    If you indent your code properly (so that it can be read) and (please!) don't use variable names of textarea and button (show a little imagination!) I or someone else are more likely to assist .

    I intentionally taker out my indents when positing on here to avoid scrolling issues.

    As far as variables for textareas. I'm just learning js stuff. I took a free piece of code and started playing with it.

    Code:
    <div class="editInPlace">Some text here
    </div> <div class="editInPlace">Some text here 2nd</div> 
    <div class="editInPlace">Some text here 3rd</div>
    That would mean you would have to edit each field individually. I want to edit multiple fields simultaneously.
    Last edited by stevenmw; 12-28-2012 at 12:42 AM.
    Thanks!

  6. #21
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I intentionally taker out my indents when positing on here to avoid scrolling issues
    Do what?!
    I want to edit multiple fields simultaneously.
    I don't follow. Good luck, Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  7. #22
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by AndrewGSW View Post
    I don't follow.
    Why not read the entire thread? You appear to have reproduced the original functionality that stevenmw came here trying to modify

    It is prettier, though...

  8. #23
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by xelawho View Post
    Why not read the entire thread? You appear to have reproduced the original functionality that stevenmw came here trying to modify

    It is prettier, though...
    The original functionality only enabled editing of the first item.

    The original post stated "The idea is to make each entry editable" which is why I don't follow "I want to edit multiple fields simultaneously". But you are right; reading more closely I see that he might display several fields for each database row and want to edit any/all of these fields in one go.
    Last edited by AndrewGSW; 12-28-2012 at 02:16 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  9. #24
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    once he started using class names it worked the same as yours.

    I think he is pulling in various fields per entry (in my example title and number) and wants each of those fields to be editable separately. If you run the code from post #10 in Chrome or FF you'll see what I mean.

  10. #25
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... sigh...

    it was one superfluous closing div tag that was making IE freak out...

    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <style type="text/css">
    .editable {
    background-color: #FF9;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div class="editInPlace"><span num="tit1">the title</span>&nbsp<span num="num1">the number</span></div>
    <div class="editInPlace"><span num="tit2">the second title</span>&nbsp<span num="num2">the second number</span>&nbsp<span num="num3">the second piece of info</span></div>
    <script>
    $(document).ready(function()
    {
    setClickable();
    });
    
    function setClickable() {
    $(".editInPlace").click(function(){
    var textarea = "<div>"
    $(this).children('span').each(function () {
        textarea+="<input name='" + $(this).attr("num") + "' value='" + $(this).text()+ "'/>";
    });
    textarea+="</div>"
    var button = "<div><input type='button' value='save' class='saveButton' /> OR <input type='button' value='cancel' class='cancelButton' /></div>";
    var revert = $(this).html();
    $(this).replaceWith(textarea + button);
    $(".saveButton").click(function(){
    saveChanges(this, false);
    });
    $(".cancelButton").click(function(){
    saveChanges(this, revert);
    });
    
    }).mouseover(function() {
    $(this).addClass("editable");
    }).mouseout(function() {
    $(this).removeClass("editable");
    });
    }
    
    function saveChanges(obj, cancel) {
    if(!cancel) {
    var t={};
    var s=""
    $(obj).parent().prev().find("input").each(function(ind) {
        t[ind]={vl:$(this).val(),
    			nm:$(this).attr('name')
    	}
    });
    /*$.post("test2.php", {content: t}, function(txt) {
    alert(txt);
    }); */
    $(obj).parent().prev().html("");
    $.each(t, function(index) { 
    s+="<span num="+t[index].nm+">"+t[index].vl+"</span>&nbsp";
    });
    $(obj).parent().prev().append(s)
    } else {
    $(obj).parent().prev().html(cancel);
    }
    $(obj).parent().prev().attr("class","editInPlace");
    $(obj).parent().remove()
    setClickable();
    }
    </script>
    </body>
    </html>
    Last edited by xelawho; 12-28-2012 at 03:34 AM. Reason: allowing for varying number of spans in the parent div


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •