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);
}
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);
}
});
});
});
Use viewstate concept intead of using other cookies logic
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.
Related
I already looked at the other threads but couldn't find anything.
I have one checkbox which hides some table columns by changing it's status but after every refresh it changes to the initial status (checked) and the columns aren't hidden anymore.
Is there any way to keep the status after the refresh? Can I apply local storage in this case and is there a way to do it without jQuery?
Below is some code:
EDIT: added the suggested function for localstorage
<script type="text/javascript">
function hide_show_table(col_name)
{
var checkbox_val=document.getElementById(col_name).value;
if(checkbox_val=="hide")
{
var all_col=document.getElementsByClassName(col_name);
for(var i=0;i<all_col.length;i++)
{
all_col[i].style.display="none";
}
document.getElementById(col_name+"_head").style.display="none";
document.getElementById(col_name).value="show";
}
else
{
var all_col=document.getElementsByClassName(col_name);
for(var i=0;i<all_col.length;i++)
{
all_col[i].style.display="table-cell";
}
document.getElementById(col_name+"_head").style.display="table-cell";
document.getElementById(col_name).value="hide";
}
}
</script>
<script>
window.onload = function() {
const checkbox = document.getElementById('fdt_col');
checkbox.checked = !!localStorage.getItem('checked');
checkbox.addEventListener('change', function(){
localStorage.setItem('checked', this.checked);});
}
</script>
echo"<input type='checkbox' name='fdt_col' value='hide' id='fdt_col'
onchange='hide_show_table(this.id);' checked>some text</input><br/>";
Thank you
I see you're using Vanilla javascript so you can use the localStorage like so:
window.onload = function() {
const checkbox = document.getElementById('fdt_col');
checkbox.checked = !!localStorage.getItem('checked');
checkbox.addEventListener('change', function() {localStorage.setItem('checked', this.checked);});
}
Note about localStorage vs sessionStorage
localStorage will save your items on all tabs while sessionStorage is to be used if you need separation between tabs
I have a checkbox which determines whether to hide or make elements visible. My question: is there a way to also include if the checkbox was originally unchecked on page-load to permanently remove those elements so they can't be recalled, otherwise continue what is currently below? Hope that makes sense.
function myEmail() {
var emailBox = document.getElementById("checkemail");
var emailradios = document.getElementById("emailradios");
var emailOptOutSix = document.getElementById("emailOptOutSix");
var emailOptOutForever = document.getElementById("emailOptOutForever");
if (emailBox.checked == true){
emailradios.style.visibility = "hidden";
emailforever.style.visibility = "hidden";
emailOptOutSix.checked = false;
emailOptOutForever.checked = false;
} else {
emailradios.style.visibility = "visible";
emailforever.style.visibility = "visible";
}
}
Its a little unclear what your asking. If you want to delete the items when the checkbox is unchecked (on page load) then you could do this:
Here is a working version JSFiddle
It should be noted, that getting the cookie using substring is not the best practice. It would be wise to create a function that handles this. An example can be found here. Working with cookies
//gets the cookie for checked/not checked state
var checked = document.cookie;
//On window load
window.onload = function() {
//Get the value of the cookie
var emailBoxChecked = checked.substring(checked.indexOf("=") + 1);
if (emailBoxChecked == "checked"){
//set the state of the checkbox to true
document.getElementById("emailbox").checked = true
//If checked do something
} else {
//set the state of the checkbox to false
document.getElementById("emailbox").checked = false
//remove radio buttons that are contained within the emailRadios div
var parent = document.getElementById("myForm")
var child = document.getElementById("emailRadios")
parent.removeChild(child)
}
};
//Call this function when the checkbox is clicked
var emailChecked = function () {
var emailBoxChecked = document.getElementById("emailbox").checked
if (emailBoxChecked){
// store the state of the checkbox as checked in a cookie
document.cookie = "email=checked";
} else {
// store the state of the checkbox as NOT checked in a cookie
document.cookie = "email=unchecked";
}
}
Structure Concept:-
Basically, i am trying to create the modal window containing input and that modal window currently fires when the input on index page get focused for that I have used data attribute to make a link between them by assigning them same attribute value.
Javascript Concept:-
for the modal window, I have created the modal object. and model object contains a bindModal method which takes one argument and that argument is data attribute value. after taking that value bindModal method will search dom elements containing that particular value and after the search, I iterate over them using each loop.
Problem
So basically I want whenever user starts typing on the model input it should get written automatically in input on the index page.
I will appreciate you all if guys help me out to make my code more optimized and well structured and most important thing is that let me know what mistake I have done in overall work Thanks
JavaScript Code
var modal = function () {
this.toggleModal = function () {
$('#modal').toggleClass('content--inActive').promise().done(function () {
$('#modal__close').on('click',function(){
$('#modal').addClass('content--inActive');
});
});
}
this.bindModal = function (bindVal) {
var bindValue = $(document).find('[data-modal-bind = ' + bindVal + ']');
$.each(bindValue, function (index) {
var bind1 = $(this);
if(index === 1) {
var bind2 = $(this);
$(bind1).change(function (){
$(bind2).val(bind1.val());
});
}
});
}
}
var open = new modal();
$('#input_search').on('click',function(){
open.toggleModal();
open.bindModal('input');
});
Here is one way to do what you want:
var modal = function() {
this.bindModal = function(bindVal) {
var bindValue = $('[data-modal-bind = ' + bindVal + ']');
bindValue.each(function(index) {
$(this).keyup(function() {
var value = $(this).val();
bindValue.each(function(i, e) {
$(this).val(value);
});
});
});
}
}
$('#input_search').on('click', function() {
var open = new modal();
open.bindModal('input');
});
Changes done:
I cached the inputs with same binding values in bindValue variable, and then bound the the keyup event for each of them. On keyup, the value of the current input is get in value, which is then assigned to each input using the inner loop.
This makes the inputs to be in sync while typing. Hope that solves your issue.
Planning to get the specific ID values from the selection on the HTML page (selection here means checked boxes). Here is my code for a button click event(button will fetch the row numbers or ids):
$("a", button).click(function () {
$('#groups').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
console.log($(this));
}
});
});
This returns addtional information on rows + tr tag, however, I just want the ID part of it. Here is sample output I am getting out of above code:
[tr#row-12150.row.oddSelected, context: tr#row-12150.row.oddSelected]
[tr#row-12151.row.evenSelected, context: tr#row-12151.row.evenSelected]
This means I have selected 12150 and 12151 out of the #groups table. How do I just pull the row numbers 12150 and 12151 and not the entire detailed output and I want this to store in an array/(JS array) for multiple row numbers.
You have the row as per the .find('tr'), your should just be able to go:
console.log($(this).attr('id')); //this should show the id in your console.
so your code becomes:
$("a", button).click(function () {
$('#groups').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
console.log($(this).attr('id'));
}
});
});
Then to just get the number you can use:
var number = $(this).attr(id).split('-')[1] //assuming it's always row-<<some number>>
putting it all together:
$("a", button).click(function () {
$('#groups').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
var number = $(this).attr('id').split('-')[1] //assuming it's always row-<<some number>>;
console.log(number);
}
});
});
To store it in an array:
$("a", button).click(function () {
var checkedRows = []; //define empty array.
var count = 0; //keep a counter to use for the array.
$('#groups').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
var number = $(this).attr('id').split('-')[1];
checkedRows[count] = number; //add the number to our array.
count++; //increase the count
}
});
});
Make sure your form and your button have id's first then try this instead:
$('#buttonId').click(function(){
$('#formId input:checked').each(i, e){
console.log($(e).attr('id'));
}
});
I am using Wizard-step for my form in a view, My project is on MVC3.
I have a form that is made on 3 steps which means I have three tags for each step in my form
and two buttons that are following:
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><
<p><input type="button" value="Back id="back-step" name="back-step"></p>
In my first step I have only a bunch of TextBoxes, DropDownlists and TextAreas, second step have alot of client-side functionality, one example is that user can move rows from a table to another one etc.. And I have a Jquery validation that is following:
var customTbl = $('#CustomPickedTable');
var has1 = customTbl.find('td[data-row="1"]').is('*');
var has2 = customTbl.find('td[data-row="2"]').is('*');
var has3 = customTbl.find('td[data-row="3"]').is('*');
var has4 = customTbl.find('td[data-row="4"]').is('*');
if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
jAlerts("Saved", "Info");
} else {
jAlert('You have to move atleast one row from each table', "Varning"); ;
return false
}
On the 3th step its just a review on what was created and my next-step button submits the form, when a user clicks on it.
What I want to be able to do is that when a user is on the 2th step and clicks on next-step button the jquery validation above should run. With my Wizard-step code I cant do that beacuse it uses next-step button selector for everything. Is there any solutions for this?
I have tried to put my Jquery validation code inside
$("#next-step").click(function () {
}
But then my jquery validation code run everytime a user clicks on next button, beacuse my tables are shown in the form but hidden, the validation triggers on first step when a user click on next. So that solution didnt work.
This is my Wizard-step Jquery Code and right now I have my Jquery validation in the bottom which means that when im on 3th step and click on next-step button it will validate and then post. But I dont want it to be like that. I want the validation to happen on the 2th step.
Here is the code:
$(function () {
$(".wizard-step:first").fadeIn(); // show first step
// attach backStep button handler
// hide on first step
$("#back-step").hide().click(function () {
var $step = $(".wizard-step:visible"); // get current step
if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
$step.hide().prev().fadeIn(4500); // show it and hide current step
// disable backstep button?
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
// attach nextStep button handler
$("#next-step").click(function () {
var $step = $(".wizard-step:visible"); // get current step
var validator = $("form").validate(); // obtain validator
var anyError = false;
$step.find("select").each(function () {
if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
$step.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
$("#next-step").click(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
if ($step.next().hasClass("confirm")) { // is it confirmation?
// show confirmation asynchronously
$.post("/wizard/confirm", $("form").serialize(), function (r) {
// inject response in confirmation step
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) { // is there any next step?
$step.hide().next().fadeIn(4500); // show it and hide current step
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step, submit form
var selectedQuestions = $("#SelectedQuestions");
var selectedCustomQuestions = $("#SelectedCustomQuestions");
var currentIds = new Array();
var currentText = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
});
$('#CustomPickedTable td[data-attr-id]').each(function () {
var ClickedText = $(this).html();
currentText.push(ClickedText);
});
selectedCustomQuestions.val(currentText.join("|"));
selectedQuestions.val(currentIds.join(","));
var customTbl = $('#CustomPickedTable');
var has1 = customTbl.find('td[data-row="1"]').is('*');
var has2 = customTbl.find('td[data-row="2"]').is('*');
var has3 = customTbl.find('td[data-row="3"]').is('*');
var has4 = customTbl.find('td[data-row="4"]').is('*');
if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
jAlerts("saved", "Info");
} else {
jAlert('You have to move atleast one row from each table', "Varning"); ;
}
return false;
}
});
My html code looks something like this:
<div class="wizard-step>
//step 1 content
</div>
<div class="wizard-step>
//step 2 content
</div>
<div class="wizard-step>
//step 3 content
</div>
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><
<p><input type="button" value="Back id="back-step" name="back-step"></p>
I think it would be better if you detect at which wizard step you are using jquery .index() function. This way you can do the validation in your next step click handler only if you are on second step moving on to the third step. The code would look something like this :
$("#next-step").click(function () {
var $step = $(".wizard-step:visible"); // get current step
var stepIndex = $(".wizard-step").index($step); //index returns 0 based index so second step would be 1.
var validator = $("form").validate(); // obtain validator
var anyError = false;
$step.find("select").each(function () {
if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
$step.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
if(stepIndex == 1) //if you are on second step then validate your table
{
var customTbl = $('#CustomPickedTable');
var has1 = customTbl.find('td[data-row="1"]').is('*');
var has2 = customTbl.find('td[data-row="2"]').is('*');
var has3 = customTbl.find('td[data-row="3"]').is('*');
var has4 = customTbl.find('td[data-row="4"]').is('*');
if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
jAlerts("Saved", "Info");
} else {
jAlert('You have to move atleast one row from each table', "Varning"); ;
return false
}
}
else if ($step.next().hasClass("confirm")) { // is it confirmation?
// show confirmation asynchronously
$.post("/wizard/confirm", $("form").serialize(), function (r) {
// inject response in confirmation step
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) { // is there any next step?
$step.hide().next().fadeIn(4500); // show it and hide current step
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step, submit form
var selectedQuestions = $("#SelectedQuestions");
var selectedCustomQuestions = $("#SelectedCustomQuestions");
var currentIds = new Array();
var currentText = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
});
$('#CustomPickedTable td[data-attr-id]').each(function () {
var ClickedText = $(this).html();
currentText.push(ClickedText);
});
}
});
I think you could approach this problem by refactoring the code
// validate the inputs in a form
// #param {string|object} jquery selector or jquery object
function validateStep (selector){
var $step = $(selector);
var validator = $("form").validate();
var anyError = false;
$step.find("select").each(function () {
if (!this.disabled && !validator.element(this)) {
anyError = true;
}
$step.find("input").each(function () {
if (!validator.element(this)) {
anyError = true;
}
if (!validator.element(this)) {
anyError = true;
}
return anyError;
}
This way you could validate the second step by calling
// this works because jquery returns an array of objects
// as a result of the css selector we call it with
// the eq() function accepts an index value that returns
// the jquery object at that position
// see. http://api.jquery.com/eq-selector/
validateStep($('.wizard-step').eq(1));
Or the first
validateStep('.wizard-step:first');
Etc
We could incorporate this into your code like this -
$('#next-step').click(function (event){
var $step = $('.wizard-step');
if(validateStep($step.filter(':visible'))){
// go to the next step
if ($step.next().hasClass("wizard-step")) {
$step.hide().next().fadeIn(4500);
$("#back-step").show();
} else {
// submit form
}
}
});
NB: You can read more about jQuery selectors here http://api.jquery.com/category/selectors/