Question

In settings of jqPuzzle i can pass the success function that will be called when person completes the puzzle. The problem is that i have several puzzles on my page and i would like to make a action with the puzzle that is currently completed but result has only seconds and number of moves. How to get the puzzle that was currently completed?

Here is the demo of what i talk about: http://polishwords.com.pl/dev/puzzle/exa.php

The important part is:

function initializePuzzle()
{
    var settings = {
      cols: 3,
      rows: 3,
      success: { 
          callback: function(results) {  
              //results.moves and results.seconds, but how to get the puzzle that was completed?
              alert(results.moves);
              var puzzleThatWasCompleted = ???;
          } 
      } 
    };

    $('.puzzle').jqPuzzle(settings);  //Changing all images of class puzzle to puzzles
}

Answer 1

If you can pass a success function to any one instance puzzle, then you could pass a different “version” of the function to each instance of the puzzle, and for each version to contain identifier(s) which indicate which particular instance it relates to. That’s the dumb approach.

The smart approach is to define the success callback inside another function, thereby forming a “closure”. This allows the success callback to be identical in each case but to have access to outer variable(s) identifying the instance.

Your code is already ripe for this approach and very little needs to change.

In the following modification of your code, a string or number is passed to initializePuzzle(). The formal variable puzzleID is trapped in a closure, and remains availble to the success callback when it fires.

You also need to specify each puzzle’s container more precisely. The class selector .puzzle will potentially address multiple elements, but worse it will be the same every time initializePuzzle() is called. Therefore you need to pass a unique id to the function each time it is called.

function initializePuzzle(puzzleID, containerSelector) {
    var settings = {
        cols: 3,
        rows: 3,
        success: {
            callback: function(results) {
                alert('PUZZLE ' + puzzleID + ': ' + results.moves);
            }
        }
    };
    $(containerSelector).jqPuzzle(settings); 
}

Now all you need to do is to call initializePuzzle() something like this :

initializePuzzle('A', '#puzzle1');
initializePuzzle('B', '#puzzle2');
initializePuzzle('C', '#puzzle3');

DEMO