jquery click(function) onload

Question

I need help to consolidate/minify the code below. Originally I had a dropdown which controls div's visibility based on value. It works onClick but since it's a database page, it doesn't work onLoad so I had to add a 2nd logic. Any suggestions/input is greatly appreciated.

$(document).ready(function () {
  var $caseStatus = $(this).find("#auth_status").val();
  //alert ($caseStatus);
  if ($caseStatus === "1") {
    $(".pendingClass").show();
    $(".authClass").hide();
  }
  else if ($caseStatus === "2") {
    $(".pendingClass").hide();
    $(".authClass").show();
  }
  else {
    $(".pendingClass").hide();
    $(".authClass").hide();
  }

  // Show/Hide Divs for Authorization Status
  $("#auth_status").click(function () {
    if ($(this).val() === "0") {
      $(".pendingClass").hide();
      $(".authClass").hide();
    }
    else if ($(this).val() === "1") {
      $(".pendingClass").show();
      $(".authClass").hide();
    }
    else if ($(this).val() === "2") {
      $(".pendingClass").hide();
      $(".authClass").show();
    }
  });
});

Nick Craver · Accepted Answer · 2010-10-25 17:24:06Z

2

You could reduce your code a bit by simplifying your if/else structure(since anything besides "1" is the same show/hide result and also just call the handler you're binding when the page first loads, like this:

$(function () {
  $("#auth_status").click(function () {
    var val = $(this).val();
    $(".pendingClass").toggle(val === "1");
    $(".authClass").toggle(val === "2");
  }).click();
});

edited Oct 25, 2010 at 17:24

answered Oct 25, 2010 at 17:17

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

8 Comments

Tomalak Over a year ago

+1 That's more elegant than my version. But the $caseStatus should be named caseStatus, actually. ;-) And the $(this).val() === "1"; assumption is too simplified, since there are three cases.

Nick Craver Over a year ago

@Tomalak - Better? :) I'm not sure what 1 translates to for statuses, but it should be named that status really, to be as clear as possible.

Nick Craver Over a year ago

@Tomalak - Woops, I read that 0 and 2 were the same, you're right those show/hides are different, updated with the correction.

Tomalak Over a year ago

@Nick Craver: That's it. The thought to express it as click(function …).click() occurred to me a little too late, and now I don't want to change my answer to avoid looking like a copy cat. ;-)

Nick Craver Over a year ago

@Tomalak - fair enough, +1 from me though :)

|

Tomalak · Accepted Answer · 2010-10-25 17:32:00Z

1

$(function () {
  function toggleElements() {
    var caseStatus = $("#auth_status").val();
    $(".pendingClass").toggle(caseStatus === "1");
    $(".authClass").toggle(caseStatus === "2");
  };

  toggleElements();                         // initial call (on page load)
  $("#auth_status").click(toggleElements);  // manual call (on user click)
});

edited Oct 25, 2010 at 17:32

answered Oct 25, 2010 at 17:18

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Comments

Pointy · Accepted Answer · 2010-10-25 17:18:26Z

0

You could define a couple of objects:

var authCtrl = {
  '0': { show: null, hide: '.pendingClass, .authClass' },
  '1': { show: '.pendingClass', hide: '.authClass' },
  '2': { show: '.authClass', hide: '.pendingClass' }
};

and similarly (backwards) for the other case. Then the handler just grabs the entry based on that field value and hides/shows as directed.

answered Oct 25, 2010 at 17:18

Pointy

415k62 gold badges600 silver badges631 bronze badges

9 Comments

Nick Craver Over a year ago

Isn't this a bit overkill? :)

Pointy Over a year ago

Well it depends. Encoding the behavior as data like this decouples the "rules" from the logic that acts on the rules. A handler written to interpret plain data like that (maybe even more generalized) can potentially be used for many similar structures that differ only in some particulars. I'm trying to teach myself Category Theory so I'm lately in the habit of thinking like this :-)

Tomalak Over a year ago

@Nick: It would enable you to do $(#auth_status").change(function () { $.each(authCtrl[$(this).val()], function(k, v) { $(v)[k](); }); }); :-D (But only when all possible values of #auth_status are in authCtrl…)

Pointy Over a year ago

@Tomalak if the combinatorial problem gets big, then a much better approach would be to adjust the markup to be more cooperative.

Pointy Over a year ago

One approach would be to encode the "states" into the "behavior class" objects, instead of using just "show" and "hide". Since I have no clue how the page actually works, of course, it's hard to come up with the best answer.

|

Collectives™ on Stack Overflow

jquery click(function) onload

3 Answers 3

8 Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related