I have one buton on my jsp and clicking that button user will see jquery dialog box as popup,which is having several checkboxes.
That popup will also have two button save and cancel.
I would like to restore state of checkbox.for better understading please follow below steps
user clicks on showpop button on the jsp page
user will now see jquery popup having several checkbox
user checks first and second checkbox from the popup and click on save button that result in closing popup
user again click on show popup button ,uncheck first check box and click on cancel button that also result in closing popup
and now from main jsp if user again clicks on show popup buton i would like to see two checkbox checked but its showing one checkbox checked.
any help would be much appreciated
you can use a variable to store the indices of the checked boxes on the page such as:
var checkedIndices = [];
when you click save or cancel, you can run some code similar to this:
function SaveBoxes() {
checkedIndices = [];
$("input[type=checkbox]").each(function(index, checkbox) {
if ($(checkbox).is(":checked"))
checkedIndices.push($(checkbox).index());
});
}
function CancelBoxes() {
$("input[type=checkbox]").removeAttr("checked");
for (i = 0; i < checkedIndices.length; i++)
$("input[type=checkbox]:eq(" + checkedIndices[i] + ")").attr("checked", "checked");
}
Related
I have 2 radio buttons on an ASP.NET WebForm page. I have a modal popup that is to be shown only when going from one of the radio buttons to the other, but not the other way. In other words, here are my choices:
if radio button 1 is clicked then the modal popup is shown.
If radio button 1 is currently selected and radio button 2 is clicked then the modal popup should NOT be shown.
I have a javascript function that toggles the show and hide but I briefly see the popup when #2 logic is performed. Here is the js function:
$(function () {
$('#<%=RadioButtonListServiceLevel.ClientID%>').click(function () {
var CustomerCountry = $('#<%=HiddenFieldCustomerCountry.ClientID%>').val();
var ServiceLevelSelected = $("#<%=RadioButtonListServiceLevel.ClientID%> input:checked").val();
if ((CustomerCountry != "US" && CustomerCountry != "CA") && ServiceLevelSelected == "24") {
$('#InternationalServiceLevelModal').modal('show');
} else {
$('#InternationalServiceLevelModal').modal('hide');
}
});
});
Any idea why the popup modal dialog would briefly show when the action described in #2 is performed?
Thanks
I was just playing around a bit using an 'alert' and when I used the 'click' event, like you have, the alert fired twice: as soon as i clicked - before the button visibly changed value, then again after the button visibly changed value.
I changed 'click' to 'change' and the alert only fired once. Could be the fix?
// changed 'click' to 'change'
$('#<%=RadioButtonListServiceLevel.ClientID%>').change(function () {
i was trying to reset my form when a close button was clicked.
this is my script.
$('.modal').on('hidden.bs.modal', function () {
console.log($(this).find('#form6')[0].reset());
})
when i console this it returns undefined. but when i remove [0].reset() the console returns a length:1, 0:form#form6, prevObject:r.fn.init[div#modalForm.modal.fade] but when i use
$('#form6')[0].reset() on form submit it works.. dont know why it doesn't work on button close..
i have a modal form which when i click a function is called that will append a certain data to my select tag. but when i close the modal and reopen it the data that was prev called stayed on my select tag then the function again was called so what happen was the data from my select tag duplicates.
so i was trying to reset the form when my modal was close.
I almost got my function to work but I'm missing some ingredient.
I have 3 boxes with their own toggle open close button.
I have an Open All / Close All button that detects the number of open boxes, and switches its text label from 'Open All' to 'Close All' when all 3 boxes are open.
It works fine, except if you start out by clicking on the (red) Open All button after loading the page — and then manually close each individual box — and toggle them open again. Then the red Open / Close all button doesn't detect the opened boxes, and its text label doesn't switch from Open All to Close All.
I know it's unlikely that anyone would use the system this way, but I just want to understand why it stops detecting the number of open boxes.
http://codepen.io/StrengthandFreedom/pen/Yyemqa
// Open/close all boxes
$('.show-hide').on('click', function(){
event.preventDefault();
$('.box').siblings().toggleClass('is-visible',
$('.box').length != $('.box.is-visible').length);
$('.open-all').toggleClass('hide-text');
$('.close-all').toggleClass('show-text');
});
// Toggle boxes individually
$('.toggle-button').on('click', function(){
$(this).next('.box').toggleClass('is-visible');
// Count number of open (visible) boxes
var numOfVisible = $('.is-visible').length;
// if open boxes equal 3, switch button label
if (numOfVisible === 3) {
$('.open-all').addClass('hide-text');
$('.close-all').addClass('show-text');
}
// otherwise do the opposite
else {
$('.open-all').removeClass('hide-text');
$('.close-all').removeClass('show-text');
}
});
Can someone point me in the right direction? :-)
I think you just need to use
var numOfVisible = $('.box.is-visible').length;
instead of
var numOfVisible = $('.is-visible').length;
DEMO
Here is my solution:
http://codepen.io/anon/pen/epMJRz
This is the change on jquery code i made to make it work:
$('.show-hide').on('click', function(event){
event.preventDefault();
$('.toggle-button').trigger('click');
});
Had to refork it to resolve a bug now its perfect
So, I'm trying to hit the button after a form is filled in.
I have this currently:
document.getElementById("checkout_shipping_address_country").dispatchEvent(event);
document.getElementById("checkout_shipping_address_phone").value = userInfo.tel;
if ($("#checkout_shipping_address_province").length != 0) {
document.getElementById("checkout_shipping_address_province").value = userInfo.state;
$("input[name='commit']")[0].click();
}
It is an ajax form so it reloads after every click, in this case it seems like it's repeating the click, how can I only have it run once?
You can disable the button with jquery by adding,
$('#button_id').attr("disabled", true);
to enable the button again you can use
$('#button_id').removeAttr("disabled");
In
<script>
$all_hier_radio.on("change", function() {
// Grab an input radio checked handler
// Hide the radio options
$all_hier_div.hide();
$all_hier_radio.hide();
// Create a button to be added to another div like this:
$hierarq_but = $("<button/>", {
text: $hier_div_checked_id.text(),
type: "button",
id: "btn_hier",
});
// Append the button to another div
Whe a user selects one of the options, the list gets no visible, so it's fine.
But, I'd like that when a user clicks that button, the previously hidden radio option list could be displayed again
$("button#btn_hier").bind("click", resetHierarquia());
</script>
And in another file,
function resetHierarquia() {
console.log("RRRRRREEEESSSSEETT");
//$(this).preventDefault();
//$(this).stopPropagation();
$all_hier_div.show();
$all_hier_radio.show();
}
But I dont' get the desired effect. Please take into consideration that I'm delving into javascript for the first time...
The problem is this line:
$("button#btn_hier").bind("click", resetHierarquia());
It should be like this:
$("button#btn_hier").bind("click", resetHierarquia);
It's because you don't want to call the function resetHierarquia but pass it in parameter to the event listener.