jQuery help + WTF?

Starholdest · 10-01-2011, 04:41 AM

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

rangana · 10-01-2011, 05:03 AM

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.

Starholdest · 10-01-2011, 05:08 AM

Quote:

Originally Posted by rangana

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

rangana · 10-01-2011, 05:14 AM

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>

Starholdest · 10-01-2011, 05:19 AM

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.

rangana · 10-01-2011, 05:31 AM

What browser are you using? Tested on IE/CHROME/FF/Opera and it works as designed.

Starholdest · 10-01-2011, 12:42 PM

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>

rangana · 10-01-2011, 11:43 PM

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?

Starholdest · 10-02-2011, 05:36 AM

Well I explained it in my first post.

Quote:

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.

DanInMa · 10-02-2011, 08:21 AM

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();
});


});

Starholdest · 10-02-2011, 08:33 PM

What easier ways would that be exactly?

And your code doesn't work either.

DanInMa · 10-02-2011, 10:35 PM

I tested it in 3 browsers, it it doesn't work for you then you are most definitely doing something wrong.

Starholdest · 10-02-2011, 11:47 PM

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.

DanInMa · 10-03-2011, 12:21 AM

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();
});