How to disable a Javascript Function when a different one is Enabled?

Question

I have this function:

$(document).ready(function(){   
    function Fos(buttonSel, inputSel, someValue, cssProperty) {
        $(buttonSel).click(function(){   
            var value = $(inputSel).attr("value");
            $("div.editable").click(function (e) { 

                e.stopPropagation();

                showUser(value, someValue, this.id)
                var css_obj={};
                css_obj[cssProperty]=value;
                $(this).css(css_obj);  
            });        
        });        
    }

Here are three places where function is written:

Fos('#border_button', '#border-radius', 2, '-webkit-border-radius');
Fos('#background_color_button', '#background-color', 1, 'background-color');
Fos('#opacity_button', '#opacity', 3, 'opacity');

<input type="text" id="border-radius" value="20px">
<div id="border_button">BORDER RADIUS</div>
<input type="text" id="background-color" value="red">
<div id="background_color_button">Background</div>
<input type="text" id="opacity" value=".5">
<div id="opacity_button">Opacity</div>

<div id="2" class="defaultclass editable" style="<?php getStyle('2') ?>">
    something
</div>

When you click the DIV with the ID= "border_button", or "background_color_button", or "opacity_button" it waits for you to click any DIV with class="editable", ...$("div.editable").click(function (e) {... it executes the function with those parameters.

I just need a fix that will only allow ONE function with the parameters to be enabled at one time.

Currently, when you click on all three divs with ID = "border_button", or "background_color_button", or "opacity_button" AND THEN on a div with class="editable", it executes the function with ALL THREE sets of parameters.

This is bad. I can't figure it out.

The inputs' value is run in the function after the div with id= "something_button" is clicked. — TaylorMac
– TaylorMac, Commented Apr 22, 2011 at 18:30
here is the HTML for a div you can click on: <div id="2" class="defaultclass editable" style=" <?php getStyle('2') ?> ">something</div> — TaylorMac
– TaylorMac, Commented Apr 22, 2011 at 18:30
Could you please also post the code where your Fos function is called from? You can actually edit your original post -- codes appear formatted there. — Barun
– Barun, Commented Apr 22, 2011 at 18:31
If you could edit this question and add in the complete html markup that would be helpful. — hunter
– hunter, Commented Apr 22, 2011 at 18:48

Diodeus - James MacFarlane · Accepted Answer · 2011-04-22 18:35:37Z

1

You can't "disable" a function, but you can set a variable that will force it to exit right away:

 var stopMe = true

 function myFunction() {

   if(stopMe) {

      return;

   } 

  ...

 }

answered Apr 22, 2011 at 18:35

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

1 Comment

TaylorMac Over a year ago

How would I integrate this in to my function? I want only one of the sets of parameters to run the function at one time. Currently, when you click their enabling "divs" they all await a click to a div with class="editable". thank you

hunter · Accepted Answer · 2011-04-22 19:06:38Z

0

You seem to be binding and rebinding the same functions over and over, which is probably why you have that e.stopEventPropagation in there. Try assigning the events once and then managing the current state (which button is active) and going from there:

var $currentInput = null;

$("#border_button,#background_color_button,#opacity_button").click(function() {
    if ($currentInput == null) {
        $currentInput = $(this).prev();
    }
});

$("div.editable").click(function(e) {
    if ($currentInput == null)
        return;

    $(this).css(GetCssProperties());
    showUser($currentInput.val(), /* where does someValue come from? */, this.id)
    $currentInput = null;
});

function GetCssProperties() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();

    if ($currentInput.attr("id") == "border-radius") return {
        "-webkit-border-radius": value
    }
    if ($currentInput.attr("id") == "background-color") return {
        "background-color": value
    }
    if ($currentInput.attr("id") == "opacity") return {
        "opacity": value
    }
}

working example here: http://jsfiddle.net/HUJ5A/

edited Apr 22, 2011 at 19:06

answered Apr 22, 2011 at 18:45

hunter

63.7k19 gold badges115 silver badges115 bronze badges

9 Comments

TaylorMac Over a year ago

Great! But how would I integrate this: showUser(value, someValue, this.id) if I have no parameters?

hunter Over a year ago

were you generating these Foo calls dynamically? where does the someValue value come from?

TaylorMac Over a year ago

Fos('#opacity_button', '#opacity', 3, 'opacity');

TaylorMac Over a year ago

someValue is the parameter #3 in the funciton

TaylorMac Over a year ago

the showUser function is just a function that runs some ajax to send the parameters (value, someValue, this.id) to a PHP page to be stored in a mySQL database.

|

Marc Bouvier · Accepted Answer · 2011-04-22 18:36:59Z

0

Run the function for tag with a specific class. And a the end of the function remove this class from the tag.

jQuery(".myclass").click(function(){
/* do something */ 
jQuery(this).removeClass('myclass');

});

answered Apr 22, 2011 at 18:36

Marc Bouvier

7021 gold badge11 silver badges27 bronze badges

2 Comments

TaylorMac Over a year ago

But if the class is removed then this method will only work once correct? I want to be able to click multiple divs with class="editable", If I remove the class I will only be able to click one div with class="editable"

Marc Bouvier Over a year ago

Using jQuery(this).removeClass('editable') in the callback the class will be removed only for the clicked div. If I wanted to remove the editable class everywhere I would have typed jQuery('.editable').removeClass('editable')

Josiah Ruddell · Accepted Answer · 2011-04-22 18:41:40Z

0

Can't tell everything from your question. But this part $("div.editable").click(function (e) { will bind multiple click events to div.editable each time the user clicks Foo arugments[0] or buttonSel.

answered Apr 22, 2011 at 18:41

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

Josiah Ruddell Over a year ago

@user720785 - Yes, but I would think you are trying to do something more like $(this).next('div.editable').click or prev relative to the current element.

Barun · Accepted Answer · 2011-04-22 18:47:04Z

0

This could be a pssible solution:

Have a global variable (or HTML hidden input) say, lastDivClicked, to store the id of the recently clicked div
Update lastDivClicked everytime one of those three divs are clicked upon

Change your function to this:

function Fos(inputSel, someValue, cssProperty) {

  var buttonSel = $('#lastDivClicked').val();
  $(buttonSel).click(function(){ ... }

}

answered Apr 22, 2011 at 18:47

Barun

2,67234 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to disable a Javascript Function when a different one is Enabled?

5 Answers 5

1 Comment

9 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

9 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related