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 !

Keeping jQuery addClass when going back in browser

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

Select all images on Pinterest for moving to another board

UPDATE: (2015-10-16) [SOLVED!] -- Fixed with trigger() and by limiting to 50 pins with slice().
Many thanks to Abhas Tandon who offered that by using
$(this).trigger('click');
instead of
$(this).addClass('selected');
it will correctly select the images. I tested with a board consisting of 21 images and it worked perfect! However when trying to move 300+ pins, it failed with this error:
"You can only move 50 Pins at a time."
I then solved that issue by using JavaScript's slice() function to grab only the first 50 images. Tested and it works correctly now. So my limitions are currently that I can only select and move 50 pins at a time, but that's much better than having to pick them one by one by hand!
FINAL WORKING CODE:
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i)// + " = " + v);
$(this).trigger('click');
});
}
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
var checkBoxes = checkBoxes.slice(1, 51);
checkAll();
DESCRIPTION OF ISSUE:
I'm having some trouble with a Pinterest interface (?) script (?) I'm developing. I'm a programmer, mostly self-taught, and I think I'm missing some key component of understanding about AJAX possibly? This is the second time I've tried to write a jQuery script to interface with Pinterest. The first one was an attempt to defeat the infinite scroll feature (AKA "load more" button) in order to have all images displayed on one page, from which I could scrape image links and then download them with a browser plugin to backup my Pinterest boards to my computer. My code all worked except it didn't actually end up downloading any images.
Disappointed, I put that on hold to focus on other things. Eventually I revisited my code and did some digging and it should have worked. My research indicated that the CRITICAL FLAW that may have been preventing my program from doing what I wanted was something to with "Pinterest uses AJAX". While I'm aware of the term "Asynchronous JavaScript with XML" and "XMLHttpRequest", I'm not an expert by any stretch at implementing AJAX.
With my latest code, I wrote a -- you would think it would be -- quick little jQuery script to select all images so that I can move them, delete, copy, etc ... The problem is that though checking all the boxes works (You must be in a board and click on "Move" for instance), when I click the "Move" button a second time which should pop-up a modal letting choose which board to move to, all I get is
Oops!
Select the Pins you want to move.
USING:
Chrome 45.0.2454.101
Windows 8.1 64-bit
HOW TO REPRODUCE ISSUES:
Login to your Pinterest account on a laptop or desktop computer.
Choose one of your boards or build a test board from scratch (so you don't loose any of your current pins).
Click "Move" on the top right. This will make transparent checkboxes appear in the upper right of each image. Note: Pinterest shows their unchecked checkboxes WITH a check mark already in them. The way you know a box has been checked is that it retains the checkmark and the box background turns solid (not transparent anymore) red.
In your browser launch your developer tools console (Firefox/Chrome: F12).
Add the below script to your JavaScript console in your browser.
Run the script. If it "worked" you should see all of the checkboxes are now red.
Click the "More" button again. Now you will get the "Select the Pins you want to move." message, indicating that in actuality, the select all did not work.
NOTE: I'm not concerned about pagination at this point, but if anyone wants to address that I'm open to solutions on that issue as well.
SCRIPT TO SELECT ALL IMAGES:
/*
#Repo: EHW-JavaScript-Pinterest-SelectAllImages.
#Creator: Eric Hepperle (CodeSlayer2010/CodeWizard13)
#Date: 10/15/15
#Version: 1.0
#Purpose: Click "Move" in Pinterest board to move pins.
Once checkboxes are visible, run this in an
F12 browser console to automatically check all
visible image pins. You will have success when
the color of all checkboxes turns red. Then
click "Move" again to finish.
#Notes:
2015.10.15
- Created script.
- Checks all checkboxes, but does not allow moving.
*/
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i)// + " = " + v);
$(this).addClass('selected');
});
}
//$(document).ready(function() {
alert('hi');
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
checkAll();
//});
WHAT I TRIED TO FIX IT ALREADY:
Googled for solution. I found the following articles. That last one seemed like it might be what I needed, but it did not seem to be focused enough on my issue.
StackOverflow | jQuery to add a class to image links without messing up when the link passes variables
Quora | Pinterest User Feedback: Can you provide options to "select multiple pins and pin them into a board" or "to pin an image into multiple boards at a time"?
StackOverflow | Identify & Extract the title/description of an Image (Data Scraping Pinterest)
StackOverflow | Get all images from a board from a Pinterest web address
Originally tried setting each checkbox's "checked" property to "true", but it did not end up checking the boxes (why??). But,then I observed in a browser console that when I clicked to select an image the "selected" class was applied to that image. So, I used addClass() to apply that class to all checkboxes in my code and I was able to get all the checkboxes to select properly then ... or so it seemed.
I tried the code with a call to $(document).ready, but it gave me the error
"Uncaught ReferenceError: checkBoxes is not defined(…)"
It took me forever to format this ... thanks in advance for your help. I'm happy to clarify if anything was unclear. Also, please let me know if this post belongs in a different forum. Thanks.

I tried triggering click event on each element and it worked perfectly for me. Couldn't try it with scroll because I don't have that many images in my board.
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i) // + " = " + v);
$(this).trigger('click');
});
}
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
checkAll();
Let me know if it works for you.

Have a button open the right form JQuery

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

Jquery, calendar: how to get the value?

I am using this calendar: http://javascriptcalendar.org/
to pick a specific day. It works fine. I want when the user selects a day from the calendar to display a message in a div which will also contain this day. However, even though I have tried the Javascript and jQuery events: onclick, onchange, select, keyup I can't make it work. These events work only if after picking the day I press with my keyboard a char.
Can you help me please?

Here's an example from the plugin's website.
g_calendarObject.setOnSelectedDelegate(function(){
var obj = g_calendarObject.getSelectedDay();
alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
});
I'm sure you've probably already seen that though, maybe you can make a jsfiddle and I can probably help a little better then.

try this code
<input type="text" id="dt">
<div id="showdate" style="display:none">
</div>
<script>
$("#dt").change(function() {
$("#showdate").css("display", "block");
var txt=$(this).val();
$('#showdate').text(txt);
});
</script>