Develop Reference

Setting default option and disabling alert

I've been trying for some time now to get this to work. I don't have much experience with jquery or javascript. I want to set a default option that is selected from the drop down options when the button is pressed. I hope this will also prevent the alert(not sure if that's correct) from appearing. I have add the following code to the "code injection" part of squarespace, which seems to work fine. (Edited, I have removed the code as recommend)
I'm using the Brine template. Here's a link to the website https://www.metastudio35.com/private-photography-services/event-collection the password is "Google360".
<squarespace:script src="plugin.js" combo="true"?>
<squarespace:script src="site.js" combo="true"?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I then added the code below in the page I needed to redirect the button. Which also works, but without the "$("#Additional Photos").val("0");" and "$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )" lines.
<script>
$(document).ready(function(){
$("#Additional Photos").val("0");
$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )
$(".sqs-add-to-cart-button").click(function(){
window.location = '/booking/';
});
});
</script>
This is a screenshot of the dialog box I want to remove/disable.
dialog box pop up screenshot
If someone could point me in the right direction or tell me what I'm doing wrong it would be greatly apprenticed.
Thank you for your help.

I checked your website and it seems like jQuery is not used by your template, and instead of including jQuery just for this simple function, I've written the below code in vanilla JS instead.
function setValue() {
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
}
window.onload = setValue;
If you're interested in figuring out why your code wasn't working, here's the explanation :
$('#Additional Photos').val("0")
This line of code is setting the element that has an ID of "Additional Photos" with a value of "0".
Your "Additional Photos" select box does not have an ID of "Additional Photos", instead - it has a randomly generated ID that re-generates each time the page is refreshed.
So the reason that your code isn't working is because you're simply targeting the wrong element :)
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
Due to the fact that the ID of the select box is not constant, we are targeting the select box by the 'data-variant-option-name' attribute instead. I figured out this constant attribute simply by inspecting the selectbox on the ChromDev tools.
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
The other thing to consider is the fact that your template is using YUI to handle the select box. This means that we need to manually trigger the 'change' event in order for the UI to update. As you can see from the code above, the first line is setting the value of the select box, while the second is telling YUI to simulate the 'change' event, and thus - updating the UI.
Hope this helps !

Django Modelmultiplechoicefield Checkboxselectmultiple Problem Getting Selected Checkbox

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);
});
});
});

Adding rows dynamically using jQuery

I have a form containing a select field id="projects" which upon being changed shows a hidden select field 'task' dynamically populating the tasks for the selected project by querying the dB. User can then enter hours which are updated on proj_id,task_id combination from the selects. Following code shows the 'task' select when 'Projects' is changed.
$('.tasks').hide();
$('#projects').change(function(){
$('.tasks').show();
$('.tasks').append("<option>1</option><option>New Task</option>");
});
I then added the functionality of clicking a button that replicates the form, each row contains 1.select 'project' 2. hidden select 'task' shown on project select 3. hidden textbox activated when New Task option is selected 4. hour input boxes for the whole week.
$('#add').click(function () {
$('#row').clone().appendTo('#dynform');
});
The functionality needed is that each user be able to add rows and choose different project-task combinations to log hours against them.
The problem here is that when I change the first rows projects all the added rows get affected too, I am not able to seperate them out. I am new to dynamically changing things in a web-page. Please help me out.
Working Fiddle of the whole thing - http://jsfiddle.net/PuWMK/1/

You may try this
$('.tasks').hide();
$('#dynform').on('change' , '#projects', function(){
$(this).next('.tasks').show()
.append("<option>1</option><option>New Task</option>")
});
$('#add').click(function () {
$('#row').clone().appendTo('#dynform');
});
$('.tasks').change(function(){
$('#new').css('visibility','visible');
});
DEMO.

jQuery checkbox script as facebook invite friends window

I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,

How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.

EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.

How to make Collapsible comment box like Stackoverflow

I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list
However I am trying to implement a UI similar to the way stack overflow works
specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.
How do I accomplish this using Jquery?
Note: looking also for the markup example another words a working sample. Thanks
And yes if you could show Async postback that would be nice too

To load the content you can just hook up a click event to populate a div using the load method.
For example in the view you could have something like:-
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id="commentContainer" style="display:none;">
Loading...
</div>
while the javascript to hook everything up would be:-
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});

The quick approach (for just showing / hiding the comment area) would resemble something like this:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.
Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.
Do you need to do an asynchronous postback?