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.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery help + WTF?

    Hey guys

    Here's the scenario:

    Starts out as this in the HTML:

    <td>
    <div class="info">This is a test</div>
    </td>


    I'm using jQuery to try and do some inline editing. So I use this code I made:

    $(".info").click(function() {
    var original = $(this).html();

    var textarea = '<div><textarea name="comments" cols="60" rows="3">' + $(this).html() + '</textarea>';
    var button = '<input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div>';

    $(this).after(textarea+button).remove();

    $('.cancelButton').click(function() {
    $(this).parent().parent().html('<div class="info">' + original + '</div>');
    $(this).parent().remove();
    });


    });


    Now, everything works good. The only problem is that after I have clicked the cancel button and the code returns to it's original state (aka see first code I posted above), clicking it again DOES NOT DO ANYTHING.

    It's as if the javascript is not noticing the click actions on the 'info' class anymore after doing it once.

    Here's a gif I made to show the problem:



    And what the code looks like after I click the cancel button and nothing happens:



    Help??

    Thanks guys,
    Elliott

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hi Elliott,

    Good day!

    From a first glance, it's caused by the original variable being in the local scope of the click function listener you created.

    The quickest solution is to remove highlighted:
    Code:
    $(".info").click(function() {
    var original = $(this).html();
    ...and somewhere on top of everything, set original as a global variable by:
    Code:
    var original;
    Lastly, I'm surprised $('.cancelButton').click( works. I should have suggested to use live() method instead.

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    Hi Elliott,

    Good day!

    From a first glance, it's caused by the original variable being in the local scope of the click function listener you created.

    The quickest solution is to remove highlighted:
    Code:
    $(".info").click(function() {
    var original = $(this).html();
    ...and somewhere on top of everything, set original as a global variable by:
    Code:
    var original;
    Lastly, I'm surprised $('.cancelButton').click( works. I should have suggested to use live() method instead.

    Hope that helps.
    Thanks for the reply.

    Your solution did not work, however. I still have the same problem.

    What should I be doing with the live() function?

    Elliott

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    This worked:
    PHP Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <div class="info">This is a test</div>

    I'm using jQuery to try and do some inline editing. So I use this code I made:
    <script>
    var original;
    $(document).ready(function() {
        $(".info").click(function() {
        original = $(this).html();

        var textarea = '<div><textarea name="comments" cols="60" rows="3">' + $(this).html() + '</textarea>';
        var button = '<input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div>';

        $(this).after(textarea+button).remove();
        });
        
        $('.cancelButton').live('click',function() {
        $(this).parent().parent().html('<div class="info">' + original + '</div>');
        $(this).parent().remove();
        });
    });
    </script> 
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No that code you just posted doesn't work...unless I'm doing something wrong. Even putting that into a new document produces the same results I was having before.

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    What browser are you using? Tested on IE/CHROME/FF/Opera and it works as designed.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tested this just as you described in Chrome/FF...still same thing. What works for you exactly?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>
    var original;

    $(document).ready(function() {
    $(".info").click(function() {
    original = $(this).html();

    var textarea = '<div><textarea name="comments" cols="60" rows="3">' + $(this).html() + '</textarea>';
    var button = '<input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div>';

    $(this).after(textarea+button).remove();
    });

    $('.cancelButton').live('click',function() {
    $(this).parent().parent().html('<div class="info">' + original + '</div>');
    $(this).parent().remove();
    });
    });
    </script>

    <style type="text/css">
    </style>
    </head>

    <body>

    <div class="info">This is a test</div>

    </body>

    </html>

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Maybe we're not on the same page. Can you please describe what's happening with the code that isn't what you desire and what exactly do you want?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I explained it in my first post.

    The only problem is that after I have clicked the cancel button and the code returns to it's original state (aka see first code I posted above), clicking it again DOES NOT DO ANYTHING.

    It's as if the javascript is not noticing the click actions on the 'info' class anymore after doing it once.

    Here's a gif I made to show the problem:

    I'm suppose to be able to click it over and over again to continue doing edits.

  • #10
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you could do this easier ways but here you go:

    Code:
    $(".info").live('click',function() {
    var original = $(this).html();
    
    var textarea = '<div><textarea name="comments" cols="60" rows="3">' + $(this).html() + '</textarea>';
    var button = '<input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div>';
    
    $(this).after(textarea+button).remove();
    
    $('.cancelButton').live('click',function() {
    $(this).parent().parent().html('<div class="info">' + original + '</div>');
    $(this).parent().remove();
    });
    
    
    });

  • #11
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What easier ways would that be exactly?

    And your code doesn't work either.

  • #12
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I tested it in 3 browsers, it it doesn't work for you then you are most definitely doing something wrong.

  • #13
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright so now it works for some reason maybe I was doing something wrong before! DOH!

    Thanks.

    Now after I have the textbox and buttons appear, how can I make the script get the text that's currently in the text box when the 'Save' button is clicked? I did something like this just to test it:

    $('.saveButton').live('click',function() {
    alert($('textarea').text());
    });


    And this is what happens:



    It seems to be taking the original text that was in the text box and not what is it in there now.
    Last edited by Starholdest; 10-02-2011 at 11:50 PM.

  • #14
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    no clue where the data came from but with a textarea you'll want to use .val() not .text()
    i think you want something like this:

    Code:
    $('.saveButton').live('click',function() {
    var textareaval = $(this).parent().find('textarea').val()
    $(this).parent().parent().html('<div class="info">' + textareaval + '</div>').show();
    $(this).parent().remove();
    });
    Last edited by DanInMa; 10-03-2011 at 12:48 AM. Reason: added show


  •  

    Posting Permissions

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