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 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    JQUERY Edit In Place With PHP While Loop Only Top Result Editable

    I'm playing with a "edit in place" piece of js code I found, and also relying on the jquery library to make it work.

    I've written a php while loop to display the entries of a field from a data base.The idea is to make each entry editable through using js to do the dit on the page without going to another page. The problem is that only one result from the db is editable. Whichever database entry appears at the top of the list is the only one that applies the js to it.

    Why could this be?

    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>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    setClickable();
    });
    
    function setClickable() {
    $("#editInPlace").click(function()
    {
    var textarea = "<div><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
    var button = "<div><input type='button' value='save' class='saveButton' /> OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
    var revert = $(this).html();
    
    $(this).after(textarea + button).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>
    <style type="text/css">
    .editable {
    background-color: #FF9;
    cursor: pointer;
    }
    </style>
    </head>
    
    <body>
    
    <?
    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>";
    }
    ?>
    </body>
    </html>
    Thanks!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    becuase you are using the same id over and over again, you should use a class instead.

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    If I use a class will that fix it, or do I need to call my id field with each edit in place?
    Thanks!

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    if you change the id to a class, it seems to me that you should be able to do
    Code:
    $(".editInPlace").click(function()
    why not try it out?

  • #5
    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 xelawho View Post
    why not try it out?
    Lol that would be the logical thing to do before asking a follow up question right? I had some where to be and thought maybe I'd have an answer when I sat down to try it and I've have a bit more to go on.

    I made it a class and it works.I don't know JS very well. Why does a class allow me to edit each entry and a div only lets me edit a single entry?

    And what in the code is making it so if I click to edit, but then click if I click cancel I am unable to click to edit it again until I refresh the page?

    And as a final question how can I have multiple fields instead of just one when editing?
    Last edited by stevenmw; 12-26-2012 at 01:47 AM.
    Thanks!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    1. Because ID's are meant to be unique, so the code will only look for one - usually the first one that it finds
    2. you have to change the id to class in this line:
    Code:
    $(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
    3. I don't understand your final question - you mean have multiple text fields showing at the same time, or what?

  • #7
    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 xelawho View Post
    if you change the id to a class, it seems to me that you should be able to do
    Code:
    $(".editInPlace").click(function()
    why not try it out?
    Thanks. i didn't know that about ID's and classes. I had changed it earlier as per your first post.

    About my last question. What I mean was to have multiple fields.Right now I've got a textarea that uses the name t to post. I would like to have a couple more inputs with unique names. This is because I a using PHP to update the database. I need to send the ID to my PHP so I would like to have a hidden input the post the id.

    So basically, what i am asking is how do I make it so when you click to edit how can i have multiple fields that each have a different value.

    Right now when you click to edit one textarea shows up with

    Code:
    $row['title']
    inside of it. I'd like to have multiple text fields with a different database field inside. And i would like each text field to have a unique name so I can pass the updated info to my php and update the db.

    I'm not asking about the PHP that is all taken care of. I am asking about the javascript needed to allow multiple text fields and each text field have a different value and unique name.

    Then when you click save it saves the multiple fields. Like a form. Rather than edit everything one by one.

    I need at least two input areas. One for the title and one for the id. But I plan to have four. The ID will be hidden.

    I just don't know how to go about the js part of it.
    Last edited by stevenmw; 12-26-2012 at 03:02 AM.
    Thanks!

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    this is obviously the bit that makes your divs from php:
    Code:
    echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
    so it would make sense to give them some sort of unique attribute as you are creating them

    this is obviously the bit that creates your text area:
    Code:
    var textarea = "<div><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
    so if you wanted to make 2 inputs instead (or four, or whatever) that would be the place to do it.

  • #9
    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 xelawho View Post
    this is obviously the bit that makes your divs from php:
    Code:
    echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
    so it would make sense to give them some sort of unique attribute as you are creating them

    this is obviously the bit that creates your text area:
    Code:
    var textarea = "<div><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
    so if you wanted to make 2 inputs instead (or four, or whatever) that would be the place to do it.
    xela, I don't think you're understanding what I mean. I understand the theory just fine. I don't understand the literal aspect of it. I don't know javascript very well so without and example, or a link to an example of some code it is just circles.

    Code:
    var textarea = "<div><textarea>" + $(this).html() + "</textarea>";
    Yes, it does make sense that since this is where my initial textarea is and that this could / should be where a second one would go.

    But my problem is a bit larger. The first textarea is named 't'. The html doesn't name the field, the javascript does. So how would I use javascript to name the second textarea? If I wanted to could I just give the textareas names in the above variable?

    But then for my second problem I want each textarea to have a different value. For instance one textarea would have $row['title'] in it, and the other would have $row['other'] in it.

    Then I still need to output it in the php / html. Because right now I've got

    Code:
    echo "<div class=\"editInPlace\">" . $row['title'] . "</div>";
    Which is one class. So how do I tell it two textareas, two values? Do you understand where my confusion is? Right now I just surround what I want edited with a class, and it works because it is one piece of information. But this couldn't be the case for two pieces of editable information. I couldn't simply surround two pieces of information with one clas and get the result I want.

    That is what I don't understand. I understand how to make two text areas or inputs appear, but I don't understand the functionality aspect of it. I can easily make two textareas appear, but then I still need them to each have a unique name and I want them to both have to unique values as well.

    Could you give me an example of the javascript to do it, or a link to an example please? I understand where and what things are, but with the lack of js knowledge I'm kind of just guessing. I've googled it several times and can't find a good explanation.
    Last edited by stevenmw; 12-27-2012 at 03:48 AM.
    Thanks!

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    hmm. that was trickier than I thought (complicated by my slim understanding of jQuery). I don't know php at all, so posting the values back to your database is beyond me, but presumably you can echo in unique values to pout in the span "num" attributes. Here's how I think it looks without the php stuff, anyway...

    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><span num="num1">the number</span></div>
    <div class="editInPlace"><span num="tit2">the second title </span><span num="num2">the second number</span></div>
    <script>
    $(document).ready(function()
    {
    setClickable();
    });
    
    function setClickable() {
    $(".editInPlace").click(function()
    {
    var textarea = "<div><input name='" + $(this).find("span").eq(0).attr("num") + "' value='" + $(this).find("span").eq(0).text() 
    + "'/><input  name='" + $(this).find("span").eq(1).attr("num") + "' value='" + $(this).find("span").eq(1).text() + "'/></div>";
    var button = "<div><input type='button' value='save' class='saveButton' /> OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
    var revert = $(this).html();
    $(this).after(textarea + button).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={};
    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>";
    });
    $(obj).parent().prev().append(s)
    } else {
    $(obj).parent().prev().html(cancel);
    }
    $(obj).parent().prev().attr("class","editInPlace");
    $(obj).parent().remove()
    setClickable();
    }
    </script>
    </body>
    </html>

  • #11
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Thanks. That gave me a few ideas. All my php works great. I just don't know js very well. so tying that into it is getting me. Just trying to learn a little about jquery.

    Thanks again.
    Thanks!

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    $(".editInPlace").click(function () {
        // which element with class .editInPlace was clicked?
        var ind = $(this).index();    // 0 being the first one
    });
    I haven't looked in depth at your specific code, but I don't believe you need to invent ids for each div and/or span. The above code shows how you can find which particular element (of the class editInPlace) was clicked. this value (ind) can then be used to construct ids for the spans: id='num' + ind.

    This is preferable to inventing attributes (num); if you wish to do this then the data-* attribute (data-num) is preferable.
    "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

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I would avoid constructs like
    Code:
    $(obj).parent().parent()
    WHEREVER POSSIBLE. If you add another container element you'll have to re-write your code, and it is possible (though less likely these days) that different browsers will give different results. [IE was notorious for inserting spurious, empty elements!]
    Code:
    var gramps = $('#someid').closest('div');
    will return the closest parent element (ancestor) that is a div, or any other selector that you specify, that contains the element with id 'someid'.
    Last edited by AndrewGSW; 12-27-2012 at 07:43 PM.
    "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

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    you're right, AndrewGSW - in fact IE doesn't like it at all (I have a bad habit of not checking my code in IE ). feel free to rewrite

  • #15
    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
    you're right, AndrewGSW - in fact IE doesn't like it at all (I have a bad habit of not checking my code in IE ). feel free to rewrite
    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'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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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