Select all images on Pinterest for moving to another board

Question

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:

1. Login to your Pinterest account on a laptop or desktop computer.
2. Choose one of your boards or build a test board from scratch (so you don't loose any of your current pins).
3. 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.
4. In your browser launch your developer tools console (Firefox/Chrome: F12).
5. Add the below script to your JavaScript console in your browser.
6. Run the script. If it "worked" you should see all of the checkboxes are now red.
7. 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:

1. 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

2. 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.

3. 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.

Demonstration

If you want to do reverse engineering of pinterest.com you're going to have to work a little harder, stepping through all that happens when you click a checkbox. It might be much more then adding a class. Also, your code uses a global variable instead of a parameter (or better yet, no parameter at all). – Sideman

@Amit: Thanks for your reply. I didn't know I was doing "reverse engineering", but that is helpful because it gives me another term I can use to search Google with next time. Yes, I chose not to pass parameters and use a global to have the least stuff to troubleshoot, although best-practice is to pass parameter. Can you explain all that happens when I click a checkbox? It wasn't that intuitive for me, so any help in that regards is appreciated. – Demonstration

Answer 1

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.

Rosenkranz