CODEWITHSUNDEEP
javascriptjquery
Mohamed Hussain
Mohamed Hussain

Reputation: 7703

Sharing a Common Variable Between Event Handlers in JQuery

I am having the following index.html, There i am having two sections section 1 and section 2 as shown in the screenshot

enter image description here

Index.html

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!--START: Adding of javaScript library -->
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    <!--END:   Adding of javaScript library-->
    <script>
    jQuery(document).ready(function() {
        jQuery('.mySectionOne').updateCommonVar({commonVar:1});
        jQuery('.mySectionTwo').updateCommonVar({commonVar:1});
    }); 
    </script>

</head>

<body>
<p>Section 1:</p>
    <div class="mySectionOne">
        <button class="add">add</button>        
        <button class="sub">sub</button>        
        <button class="show">show</button>  
        <p>The value of Common var in section one is:<span class="showVal"></span><p>
    </div>

<p>Section 2:</p>   
    <div class="mySectionTwo">
        <button class="add">add</button>        
        <button class="sub">sub</button>        
        <button class="show">show</button>  
        <p>The value of Common var in section two is:<span class="showVal"></span><p>
    </div>      
</body>

In Index.html, i am using my own custom jQuery Plugin "updateCommonVar", the definition for plugin is present in myscript.js

myscript.js

(function( $ ) {
    $.fn.updateCommonVar = function (options) {
        var defaults= {
            commonVar:0,
        }
        var ParameterObject=  $.extend({}, defaults, options);
         this.each(function() {
                $(this).find("button.add").bind("click", {commonVar:ParameterObject.commonVar},fnAddOne);
                $(this).find("button.sub").bind("click", {commonVar:ParameterObject.commonVar},fnSubOne);
                $(this).find("button.show").bind("click",{commonVar:ParameterObject.commonVar},fnShow);
         });
         return this;  
    };

    function fnAddOne(e){
        e.data.commonVar++;     
    }
    function fnSubOne(e){
        e.data.commonVar--;
    }
    function fnShow(e){
        $(this).parent().find('.showVal').html(e.data.commonVar);
    }


})( jQuery );

I am passing value of a variable commonVar as "1" from index.html for both the section, i bind the event handler for each button add sub and show in plugin definition, here what i want is

on clicking the add button: the variable i passed commonVar to be incremented by 1. on clicking the sub button: the variable i passed commonVar to be deccremented by 1. on clicking the add button: the variable i passed commonVar is to be shown in the span tag with the class "showVal".

First I clicked the add button and then i clicked the show button, but still i got value of commonVar as 1 not the expected value 2. I am not sure about passing the common variable between the event handlers. Please help me in this. Thanks in advance for any help.

I am expecting the same behavior for the section2 but still i got what i got for section1 note: section 2 is independent of section 1.

Fiddle for the same:http://jsfiddle.net/shmdhussain/PXYAh/1/

Upvotes: 4

Views: 2177

Answers (1)

Rooster
Rooster

Reputation: 10077

You need to pass the entire object to your click handling functions, I did it as a param called ref as its a reference to the object.

JSFIDDLE

(function( $ ) {
    $.fn.updateCommonVar = function (options) {
        var defaults= {
            commonVar:0,
        }
        var ParameterObject=  $.extend({}, defaults, options);
         this.each(function() {
             $(this).find("button.add").bind("click", {ref:ParameterObject},fnAddOne);
             $(this).find("button.sub").bind("click", {ref:ParameterObject},fnSubOne);
             $(this).find("button.show").bind("click",{ref:ParameterObject},fnShow);
         });
         return this;  
    };

    function fnAddOne(e){
        console.log(e.data);
        e.data.ref.commonVar++;     
    }
    function fnSubOne(e){
        e.data.ref.commonVar--;
    }
    function fnShow(e){
                $(this).parent().find('.showVal').html(e.data.ref.commonVar);
    }


})( jQuery );
jQuery(document).ready(function() {
    jQuery('.mySectionOne').updateCommonVar({commonVar:1});
    jQuery('.mySectionTwo').updateCommonVar({commonVar:1});
});

Upvotes: 2

Related Questions