CODEWITHSUNDEEP
javascriptjquerycookiescheckbox
user_dev
user_dev

Reputation: 1431

How to save the checkbox state even after the page refresh?

I have multiple checkboxes on my UI which when checked doing some operation. But the moment I refresh the page all the check boxes are unchecked again. How can I use AJS.Cookie (Atlassian Javascript framework) to save the state. Source Code which I have written but it gives the cookie value as undefined.

'#generate-canvas-button' is the id of the button which passes all the checked checkboxes.

// Wait until the page is completely loaded.
AJS.$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }
  });

  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#generate-canvas-button').click(submit);
});

function submit() {
  var checked = [];
  var targetGroupActors = [];
  var bigPictureActors = [];
  var bigPictureImpacts = [];
  var productDetailsActors = [];
  var productDetailsDeliverable = [];

  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking checkbox state.
    if ($(this).is(":checked")) {
      // Saving checkbox name to cookie.
      AJS.Cookie.save(name, true);
    } else {
      // Remove checkbox state from cookie.
      AJS.Cookie.erase(name);
    }

    if ($(this).is(":checked")) {
      impactMapValues = $( this ).prop('id');
      impactMapActor = $( this ).prop('name');
      var value = document.getElementById(impactMapValues).value;

      if (impactMapActor == "actor-checkbox") {
        targetGroupActors.push(value);
      }

      if (impactMapActor == "impact-checkbox") {
          var result = value.split(",");
          actor_value = result[0];
          impact_value = result[1];
          bigPictureActors.push(actor_value);
          bigPictureImpacts.push(impact_value);
      }

      if (impactMapActor == "deliverable-checkbox") {
        var result = value.split(",");
        actor_value = result[0];
        deliverable_value = result[1];
        productDetailsActors.push(actor_value);
        productDetailsDeliverable.push(deliverable_value);
      }

      checked.push(value);
    }
  });

  addTotargetGroup(targetGroupActors);
  addToBigPicture(bigPictureActors,bigPictureImpacts);
  addReleaseTarget(productDetailsActors,productDetailsDeliverable);
}

Upvotes: 3

Views: 3000

Answers (3)

dvdsmpsn
dvdsmpsn

Reputation: 2869

Wrap all your logic in

AJS.toInit(function ($) {
    // You can use $ instead of AJS.$ here
    ...
});

This is Atlassian's equivalent of $(document).ready(...) which allows all the Atlassian code to load before you call yours.

Upvotes: -2

Valentin Podkamennyi
Valentin Podkamennyi

Reputation: 7369

Try this approach:

// Wait until the page is completely loaded.
$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');

    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }

    // Attaching onchange handler.
    $(this).change(function() {
      // Checking checkbox state.
      if ($(this).is(":checked")) {
        // Saving checkbox name to cookie.
        AJS.Cookie.save(name, true);
      } else {
        // Remove checkbox state from cookie.
        AJS.Cookie.erase(name);
      }
    });
  });
});

Upvotes: 5

Anand Saravanan
Anand Saravanan

Reputation: 11

Use viewstate concept intead of using other cookies logic

Upvotes: 0

Related Questions