CODEWITHSUNDEEP
jquerywordpress
Jeremy
Jeremy

Reputation: 337

How to limit the amount of options selected to 3 on multiselect in wordpress

This is the code I am using in Wordpress latest version using jQuery 1.8.3

I want to limit the options to 3. Any ideas?

        <script type="text/javascript">
    jQuery(function($){
       $('ul.image_picker_selector li').click(function() {
        $(this).toggleClass('selected');

        if ($('.selected').length > 3) {
            $(this).toggleClass('selected');
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        }
    });
    })
        </script>


    <ul class="thumbnails image_picker_selector">
<li class="selected">
<div class="thumbnail selected">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-1.jpg">
</div>
</li>
<li class=""><div class="thumbnail selected">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-2.jpg">
</div>
</li>
<li class="">
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-3.jpg">
</div>
</li>
<li class="">
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-4.jpg">
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-5.jpg">
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-6.jpg">
</div>
</li>
</ul>

EDIT - This is the webpage that I am having problems with, if its any help. My knoweledge of jQuery is pretty poor unfortunately.

http://style-card.co.uk/id/register/

EDIT 2 - Have updated the code I am using.

Upvotes: 0

Views: 1929

Answers (5)

RVera
RVera

Reputation: 216

Thanks to mori57 I've added this functionality to the newest version of the script

https://github.com/rvera/image-picker/pull/6

Upvotes: 0

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

Ok. Click is now the event you /could/ use, but you still need to use .on(). The plugin you use makes changes to the DOM, and .click() is fragile... it does not work with dynamically added elements. Try something like this:

jQuery(function($){
   $(document).on('click', 'ul.image_picker_selector li', function() {
    $(this).toggleClass('selected');

    if ($('.selected').length > 3) {
        $(this).toggleClass('selected');
        alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
    }
});
})

The main problem here, however, is that it may not stop the selection. What you might want to try instead is looking for 'mousedown'. If you intercept mousedown, you can catch the selection before it's made, in theory, and cancel the selection if you're already at a count of three. In this case, you might want to do something like this:

jQuery(function($){
   $(document).on('mousedown', 'ul.image_picker_selector li', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    // get the number of items already selected:
    var ctSelected = $(this).siblings('.selected').length;

    if (ctSelected === 3) {
        alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
    } else {
        $(this).toggleClass('selected');
    }
});
})

Unfortunately, I don't have time to jsFiddle this for an example, but hopefully this gives you an idea of an approach that might help you.

[UPDATED] I had some free time today, and thought I'd twiddle around with the plugin code. See my jsFiddle example of how to use it: http://jsfiddle.net/mori57/L5EMy/ ... you can download the updated plugin from https://github.com/jbatchelor/image-picker

Basically, add a data-limit to your select tag:

<select class="image_picker" data-limit="3" ...etc>

Then, in the code where you set up the image-picker, but before you instantiate the image-picker itself:

var limitReached = function(){
    alert("Hit the limit! Please deselect an image if you want to choose another!");
};

$(".image_picker").imagepicker({
    limit_reached: limitReached
});

This means you should be able to get rid of all the other stuff (trying to capture and react to the mousedown event).

Upvotes: 1

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

If you're getting this error,

Uncaught TypeError: Property '$' of object [object Object] is not a function

Than you must have a problem jQuery.js file. Check whether jQuery is loaded by typing jQuery or $ on console.

$(function () {
    $('.image-picker option').click(function () {
        if ($(this).is(":selected")) {
            $(this).toggleClass('selected');
            if ($(this).siblings("option:selected").andSelf().length > 3) {
                $(this).toggleClass('selected');
                alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
                $(this).removeAttr("selected");
            }
        }
    });
});

DEMO

Upvotes: 0

colestrode
colestrode

Reputation: 10658

There are a couple of issue with your code. First, see this question about how to limit the number of selections.

Second, you are attaching your event listener before the image-picker is available. Either move the script block below your select OR (and this is the best practice) wrap your statement in ready statement: 

$(document).ready(function() {
    $('.image-picker').click(function() {
        ...
    });
});

The error messages you are seeing could be cause by a couple of things:

Are you sure jQuery has loaded when you are executing your script?

Are you using jQuery.noConflict?

Upvotes: 1

Laurent S.
Laurent S.

Reputation: 6946

would this work ?

$('.image-picker').click(function() {
        if ($('.selected').length < 3) {
            $(this).toggleClass('selected');
        else
            alert('You have already selected 3 items!\nYou can undo a selection.');
        }
    });

Upvotes: 0

Related Questions