2

I am trying to control certain input fields when they are used. The disabling all other fields is working. The re-enabling is not working for some reason. The entire function is not working all together. Here is the function that is not working:

$(".undo").mousedown(function(){
   alert("load");
    });

I dont get any errors in my console for this function. I have tried other variations to make sure it's just that specific function with that specific attribute referenced. If i were to run that function as $(document).mousedown... instead of $(".undo"), it will work.

here's my entire script:

<script type="text/javascript">

 //This part works
 $(document).ready(function() {


    $(".FirstGoalButton,.SecondGoalButton,.ThirdGoalButton").hide();

    var tclass
    $(":input").focusin(function(){
    tclass = "." + $(this).attr('class');
    var fieldval = $(this).val();

     $(".FirstGoal,.SecondGoal,.ThirdGoal").change(function(){
          $(tclass+"Button").show();

           $(":input").prop('disabled', true);
         $(tclass).prop('disabled', false);

          });

          });


});

$(document).ready(function() {

        //output to console works
         console.log("this Works");

        //This part doesn't work
         $(".undo").mousedown(function(){
           alert("load");
            });

          //output to console works as well
          console.log("end of function");
        });

And here is how the button is shown on the page:

  <button class="undo" type="button" disabled="">Undo </button>

----------UPDATE-----

THIS WORKS:

$(document).ready(function() {
   $(".FirstGoalButton,.SecondGoalButton,.ThirdGoalButton").hide();

   $(":input").click(function(){
   tclass = "." + $(this).attr('class');
   fieldval = $(this).val();

    });

     $(".FirstGoal,.SecondGoal,.ThirdGoal").change(function(){
     var button = tclass + "Button"
     $(button).show();


          });

     $(".undo").mousedown(function(){
       alert("load");
        });


});

Once $(":input").prop('disabled',true); is added then it disables the function bellow

  • Have you tried noConflict function? Or just use jQuery instead of $? And why do you have two ready functions on the page? Read here: salesforce.stackexchange.com/questions/7884/… – Sergej Utko Sep 5 '13 at 19:14
  • @mast0r - I have not tried noConflict. I wanted to just separate that function to isolate them. That is the only part of the VF page that doesn't work. I am going to do a little more testing. – AlphaBravo Sep 5 '13 at 19:45
  • 2
    Using $ nearly always causes issues in Visualforce pages. Using noConflict should be the first thing you do when you start using jQuery in a VF page! – Matt Lacey Sep 6 '13 at 1:26
1

Fixed it.

@LaceySnr♦ & - @mast0r Thanks for the Noconflict suggestion. helped.

Just had to not use all inputs on the disable prop function. It kept locking up the ENTIRE page instead of just the input fields.

Code:

$.noConflict();
var tclass;
var fieldval;
var button;
var classes = ['.FirstGoal','.SecondGoal','.ThirdGoal'];
jQuery(document).ready(function($) {
   $(".FirstGoalButton,.SecondGoalButton,.ThirdGoalButton").hide();

   $(":input").click(function(){
   console.log("--Original Parameters--");
   tclass = "." + $(this).attr('class');
   console.log("tclasse = "+tclass);

   fieldval = $(this).val();
   console.log("fieldval = "+fieldval);

   button = tclass + "Button";
   console.log("button = "+button);

    });

   $(".undo").mousedown(function(){
   console.log("---Roll Back Function---");
   //roll back to original value
   $(tclass).val(fieldval);
   //release all goals
   $(".FirstGoal,.SecondGoal,.ThirdGoal").prop('disabled', false);
   //rehide buttons
   $(button).hide();

   //re-define classes array and release tactics
   classes = ['.FirstGoal','.SecondGoal','.ThirdGoal'];
   console.log("Rolled back? -- Classes = " + classes);
   $(".Tactic1,.Tactic2,.Tactic3").prop('disabled', false);

     });

    $(".FirstGoal,.SecondGoal,.ThirdGoal").change(function(){
    console.log("----Change Function---");
    console.log("classes before splice  "+classes);
    var num = classes.indexOf(tclass);
    //strip tclass from array
    console.log("number away before splice  " + num);
    classes.splice(num,1);
    console.log("classes array after splice  " + classes);

    $(button).show();
    $(classes[0]).prop('disabled', true);
    $(classes[1]).prop('disabled', true);
    $(".Tactic1,.Tactic2,.Tactic3").prop('disabled', true);

          });

});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.