javascript global variable UNSET

Question

For my project i need a editable text ,so i decided to use some plugins but i am also new to jQuery and decided to create my own editable label [inline edit] .

Here is my code :

When user clicks an element with class editable

$(".editable").live("click",function(){

//alert($(this).text());
//CurrentOBJhtml = $(this).text();
if (typeof CurrentOBJhtml == 'undefined' || CurrentOBJhtml =="" )
{
    CurrentOBJhtml = $(this).text();
}


nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+CurrentOBJhtml+"'  />";
var c = nextHtml;
$(this).html(c);
$(this).children().focus();//$(this).focus();

return false;


});

When user leaves the hoverable

$(".hoverable").live("focusout",function(){

var Hovertext = $.trim($(this).val());
if (Hovertext == null || Hovertext=="")
{
$(this).parent().text(CurrentOBJhtml);

}
else
{
$(this).parent().text(Hovertext);
}
return false;

});

The Problem is when i start edit first element it works well ,but if there is two element with class editable the second one also getting the value of first one ?

Please check the following example :

<label class='editable'>userMania1</label>
<label class='editable'>userDirection1</label>

i can edit the first label ,but when i click the second one i am getting the value of first one so the second one will be <label class='editable'>userMania1</label> which is incorrect.

Please note that i am little bit new to this technology and trying to learn with my current project,how can i solve this problem?

Thank you.

Well, CurrentOBJhtml is global. You should create a variable local to your plugin function (if you have created a proper jQuery plugin, which might not be the case given the code you've posted). Alternatively you can use .data(): api.jquery.com/data — Felix Kling
– Felix Kling, Commented Dec 28, 2011 at 10:06
@FelixKling No i dont know how to create a jQuery plugin,is there anyway to solve this ? thank you . — Red
– Red, Commented Dec 28, 2011 at 10:09
Sorry, somehow I read that you wanted to create your own plugin ;) If you want to, have a look at docs.jquery.com/Plugins/Authoring. Otherwise, as I already said, use .data() to store the value per element instead of a global variable. — Felix Kling
– Felix Kling, Commented Dec 28, 2011 at 10:11
@Siku-Siku.Com Hai,i am little bit new to this and doing it with the syntax experience from c#.. — Red
– Red, Commented Dec 28, 2011 at 10:38

Felix Kling · Accepted Answer · 2011-12-28 11:06:02Z

1

Using global variables makes it difficult to reuse part of your code. In jQuery, you can use .data() ^[docs] to associate arbitrary data with a DOM element.

Here is a cleaned up version of your code:

(function() {
    var $input = $('<input style="border:1px solid red;" type="text" />');
    $input.focusout(function(event) {
        event.stopPropagation();
        event.preventDefault();

        var value = $.trim($(this).val()) || $(this).parent().data('orig_text');
        $(this).parent().text(value);
    });


    $(".editable").live("click",function(event){
        if (event.target === this) {
            event.stopPropagation();
            event.preventDefault();

            var text = $(this).text();

            $(this)
             .data('orig_text', text)
             .empty()
             .append($input.clone(true).val(text))
             .children('input').focus();
        }
    });

}());

DEMO

Also note, since jQuery 1.7, you should use .on() ^[docs] instead of .live() and bind the event handlers directly to the elements if they already exist.

edited Dec 28, 2011 at 11:06

answered Dec 28, 2011 at 10:20

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Red Over a year ago

Thank you for the explanation ,but i need the focusout event back which is little bit better,also when i use this i am getting a blank text area ,i need the current value on that text area..

Felix Kling Over a year ago

Don't know why I had click first, but of course you can use whatever you want, you just have to adjust the code ;) Fixed it anyways.

Red Over a year ago

Now when i click the element it getting blank...no input[type='text'] area coming ..

Yazan Malkawi · Accepted Answer · 2011-12-28 10:12:48Z

1

thats due to the following line

nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+CurrentOBJhtml+"'  />";

You are assigning the value to CurrentOBJhtml which is set while editing the first one the correct way to do it is:

nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+$(this).text();+"'  />";

Or you can set CurrentOBJhtml to null at the end of the onfocusout function

answered Dec 28, 2011 at 10:12

Yazan Malkawi

4864 silver badges10 bronze badges

Comments

alrusdi · Accepted Answer · 2011-12-28 10:16:47Z

0

avoid to use global variables but if you desided to use them - use carefully

$(".hoverable").live("blur",function(){
    var Hovertext = $.trim($(this).val());
    if (Hovertext == null || Hovertext=="")
    {
        $(this).parent().text(CurrentOBJhtml);
    }
    else
    {
        $(this).parent().text(Hovertext);
    }
    CurrentOBJhtml = "" //<------ NOTE THIS
    return false;
});

answered Dec 28, 2011 at 10:16

alrusdi

1,2931 gold badge7 silver badges9 bronze badges

Comments

Red · Accepted Answer · 2011-12-29 04:53:50Z

0

I just solve it :)

I know this is not the exact way to achieve this & it is dirty.

But for me it works well

I added the following to the click function

if ($(this).children().html() == null)
 {
    //alert('I am editable');
    CurrentOBJhtml = $(this).text();
 }

NOTE : Please use Felix's solution ,it is very neat and better one.

edited Dec 29, 2011 at 4:53

answered Dec 28, 2011 at 11:05

Red

6,41813 gold badges67 silver badges113 bronze badges

Collectives™ on Stack Overflow

javascript global variable UNSET

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related