I have 2 pages using jQuery Mobile framework.
One is called types.html, where I have a list of checkboxes.
The other is called products.html, where I whant to show the products regarding the types selected in the page types.html.
So, my question is: how can I pass these checked values to next page?
Thanks in advance.
[UPDATED]
This is the solution, as #Ved suggested. It worked! :)
var chk_types = [];
$('.chk_types:checked').each(function() {
chk_types.push($(this).attr("value"));
});
localStorage.setItem("chk_types",chk_types);
$('#form').submit();
On types.html store all selected value store in array variable
localStorage.setItem("checkboxvalue", array_variable);
On products.html on pageshow even OR document.ready event
localStorage.getItem("checkboxvalue");
Related
I have been working all day to try and get the selected values on one set of checkboxes on my Django form and copy the selected ones only to an identical checkbox on my form. If a user clicks on a checkbox in form.author defined below, I want the same identical checkbox to automatically be checked on form.favorite_author defined below.
I've tried a JQuery approach as documented here...Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY but no luck so far. I've recently begun exploring an avenue with the Modelmultiplechoicefield and the checkboxselectmultiple parameters within the form itself. From what I can tell, when I am using JQuery and trying to check a box on the form, the value is coming back as undefined which is most likely why it is not propagating the checkbox selection to the other checkbox.
Here is my form....
class ManagerUpdateNewAssociateForm(forms.ModelForm):
class Meta:
model = Library
self.fields['author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
self.fields['favorite_author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
My HTML...
<div class="spacer83">
{{ form.author }}
</div>
<div class="spacer83">
{{ form.favorite_author }}
</div>
When I tried to trace JQuery, it told me the checkbox selections are undefined. I did read a bit about how Modelmultiplechoicefield, since it uses a queryset it doesn't show the selections, but I can't figure out how to get it to.
Thanks in advance for any thoughts.
In combination with the other issue included in this one, I went back to the JQuery route and explored further. From what I can tell, I was not able to use the class for the input because of the way the HTML for Django forms is generated in this use case. I ultimately was able to leverage the input name and then used the code below to interrogate the checkboxes accordingly:
$(document).ready(function() {
$("[name=author]").change(function() {
let selectedValA = $(this).val();
let isAChecked = $(this).prop("checked");
$(`[name=favorite_author][value="${selectedValA}"]`).prop("checked", isAChecked);
});
});
});
I'm having some trouble understanding how to turn my addClass into a cookie. I have a multi-select box that currently filters a list of products by adding an active class and then only showing products with the specified tags. If you make a selection and then click one of the products to view the product and then go back you have to reselect the previously selected options again. Below is the code used to make the selection.
tabsBlock.children('.tab').click(function() {
var tabContentClass = $(this).attr('id') + '-content';
tabsBlock.children('.active').removeClass('active');
tabsContentBlock.children('.active').removeClass('active').hide();
$(this).addClass('active');
if (tabContentClass.length) {
tabsContentBlock.children('#' + tabContentClass).addClass('active').show();
}
getTags();
});
All help is appreciated!
For a case like you describe I would would use hidden inputs. See this example:
Put checkbox values into hidden input with jQuery
Reason being, it sounds like you only need to store the values for this particular case. Storing in a cookie will require you to manage when the cookie expires which can be messy and cause undesired behaviors.
I don't know much about localStorage (as mentioned in the comment) -- that may be a viable option as well.
Thanks everyone for the help. I ended up using Astaroth's suggestion of using local storage.
$(".tag-group-label").click(function(){
localStorage.setItem('tagGroupLabelState', 'open');
});
$(document).ready(function(){
if(localStorage.getItem('tagGroupLabelState') == 'open') {
$('.tag-group-label').addClass('open').next('.tag-container').slideToggle(400, function(){
reCalcStickyElement();
});
}
});
I have a while loop in my php page which sets a different id for every button and form through a counter variable. Every button has to open a different form (they each have different default information preselected, this is for a prescription renewal ability). I can get this to work by having in my javascript a click function for every id which calls a show on the right form. But, obviously this is not scalable, and so it cannot adapt to the amount of prescriptions I have. Looking through the web, I saw people using classes and the id starts with solutions to this problem. However, when I use this solution, the buttons open all the forms... not the desired behavior. Currently my javascript function is the following:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
Like mentioned above, the function does get called by all different IDs button. That code however opens all the forms every time one of the buttons get click. IDs are actually of the form add-renew-form0, add-renew-form1, add-renew-form2... (same pattern for add-renew-link). Forms and links with the same number at the end are meant to be linked. Does anybody know how I can achieve this? Thanks a lot!!
You can't have multiple DOM elements with the same ID. What you can do here is to assign classes for the elements:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
And then use .each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
You can check out the JSFiddle here.
You're close. The $('[id^="add-renew-form"]').show(); is going to match ALL ELEMENTS that start w/ "add-renew-form" as the id, so that's why you're experiencing all forms being shown when clicking any link/button.
You can use a regex to pull the number from the end of the id to find a match on the associated form as below:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/\d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
This jsbin has a full working example.
http://jsbin.com/xicuwi/1/edit
Try, using the .each() method:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});
I am trying to use jQuery to show section if a user selects a certain checkbox in a sharepoint form. I have had success doing this with a button and with a simple checkbox with one value to show all from this blog post http://akanoongo.blogspot.com/2008/04/how-to-hide-fields-in-sharepoint-list.html, but am struggling with if they select multiple values.
<script type="text/javascript" src="/SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("nobr:contains('Desk Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Calendar Refills')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Spiral Bound')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Wall Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Misc. Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Franklin Covey')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Comments')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Retention Policy')").parent('h3').parent('td').parent('tr').hide();
});
</script>
It would appear the value needs to be an if statement for contains VALUE not a click function. I am not sure what to do with this though.
$("input[title$='ShowFields']").click(function()
Basically if they select Wall Calendars it should show jsut wall calendar but if they do Wall and desk, it should toggle them both.
Any guidance would be fantastic. Thank you!
EDIT: I change my answer based on your comment below
To do what you want I'll use the library I created that is called SharepointPlus (please load jQuery and SharepointPlus in your page). Then the JavaScript code would be something like:
// hide all the rows by default
$SP().formfields("Desk Calendars,Calendar Refills,Spiral Bound,Wall Calendars,Misc. Calendars,Franklin Covey,Comments,Retention Policy").row().hide();
// add a trigger for when you click a checkbox
$SP().formfields("Calendar Type").elem().on('click', function(event) {
// the value of the checkbox is found with the "title" attribute from the parent
// if it's checked, then we show the row, if it's not then we hide it
$SP().formfields($(this).parent().attr("title")).row().toggle(this.checked)
})
I need to collect the values of the checked radio buttons on page load (they are checked on page load) and add them and not only when the user clicks a radio button.
Here's the javascript:
$(function ()
{
updateDivResult();
$('input:radio').live('click',updateDivResult);
$('#1').click();
})
function updateDivResult(){
if ($("input:radio:checked"))
{
price = parseFloat($(this).val());
$('#price').html(roundNumber(price,2));
}
};
roundNumber() is a function defined by me.
Now it only updates the #price div when the user clicks a radio button.
Also, there are a few groups of radio buttons - how do I only add the value of one radio button from the group to the total price?
Thank you for assistance.
I think you need to loop through the checked values rather than just getting the val() of that selector because it seems like there could be more than one checked.
function updateDivResult(){
var price = 0;
$(":radio:checked").each(function(){
price += parseFloat($(this).val());
});
$('#price').html(roundNumber(price,2));
};
Can you provide more details?
I can see you are using jQuery.
You could use
$(document).ready(function() {...});
to run some methods when the document is read.
Moreover you could put a specific class to your html elements and use the "each" function to traverse them.
e.g.
$('.your_el').each(function() {...});
In that case the handler will be executed on each object with the class "your_el".
Hope this help, even if the problem is not so clear to me.
Che