0

Currently, I'm loading the divs into .test1, 2, and 3, as below:

jQuery(function($){
    $(".test1").load("/?page=owner_testimonials&gridID=1 #showGrid1Content");
    $(".test2").load("/?page=owner_testimonials&gridID=2 #showGrid2Content");
    $(".test3").load("/?page=owner_testimonials&gridID=3 #showGrid3Content");});

Right now, I am loading 3 testimonials into the three slots '.test1', '.test2', '.test3', but you can see that the testimonials are not randomly chosen, they are simply pulled in order: the content from testimonial 1 (showGrid1Content) is loaded from within the page where that testimonial comes from (/?page=owner_testimonials&gridID=1).

Instead, I want to load one of the following:

'/?page=owner_testimonials&gridID=1 #showGrid1Content'

'/?page=owner_testimonials&gridID=2 #showGrid2Content'

'/?page=owner_testimonials&gridID=3 #showGrid3Content'

'/?page=owner_testimonials&gridID=4 #showGrid4Content'

'/?page=owner_testimonials&gridID=5 #showGrid5Content'

Randomly into .test1, .test2, and .test3, but I don't want any two of them to be the same (ex. I don't want .test1 to have gridID4 and .test3 to have gridID4 as well).

How do I do this using either jQuery or Javascript?

alloy
  • 756
  • 1
  • 13
  • 23
  • Put them in an array, choose a random index, remove that index, repeat. – Gary Mar 15 '14 at 02:41
  • Put your ID values in an array and use one of the plentiful random number pickers around. Testing for concurrency will be a bit challenging. – isherwood Mar 15 '14 at 02:41
  • generate the list of numbers first then load the pages http://stackoverflow.com/questions/16728297/random-non-repeating-number-generation-in-javascript-between-two-limits – Popnoodles Mar 15 '14 at 02:41

2 Answers2

0

Create an array with all the testimonals you want and then use Math.floor(Math.random()*testimonalArray.length).

Thats the index of your testimonal.

Remove it with testimonalArray.splice(index, 1);

Sample:

var testimonalArray = [
   '/?page=owner_testimonials&gridID=1 #showGrid1Content',
   '/?page=owner_testimonials&gridID=2 #showGrid2Content',
   '/?page=owner_testimonials&gridID=3 #showGrid3Content',
   '/?page=owner_testimonials&gridID=4 #showGrid4Content',
   '/?page=owner_testimonials&gridID=5 #showGrid5Content'
];

function randomize() {
    var idx = Math.floor(Math.random()*testimonalArray.length);
    var testimonal = testimonalArray[idx];
    testimonalArray.splice(idx, 1);
    return testimonal;
}

var elements = ['.test1', '.test2', '.test3'];
for(var i = 0; i < 3; i++) {
    $(elements[i]).load(randomize());
}
hawaii
  • 328
  • 4
  • 12
0

I can't vote up hawaii's answer, because I don't have 15 reputation yet, but I can link to a jsfiddle that does the same thing.

http://jsfiddle.net/bbankes/eB5T5/

var options = [1, 2, 3, 4, 5];
var numberOfTestimonials = 3;

for (var i=1; i<=numberOfTestimonials; i++) {
    var randomIndex = getRandomIndex(options);

    $('#result').append(options[randomIndex]);
    options.splice(randomIndex, 1);
}

function getRandomIndex(options) {
    return Math.floor(Math.random() * options.length);    
}

Note that no two numbers are ever displayed twice.

Ben
  • 713
  • 4
  • 12