open a dialog after select the dates using JQuery UI selectable

Question

I have designed a calendar.I have to open a dialog after selecting the dates.I used a filter option to select the dates. It is working fine. But the issue is dialog is opened for the inactive dates too. I want to open only for the available dates. Any suggestions? the sample is in the link

jQuery("#calendar").selectable({
            filter: ".available",
            stop: function() {
            jQuery( ".ui-selected", this ).each(function() { 
            result.push( this.id); 
            });
            var width = 250;
            var height = 270;
            jQuery('#dialog').dialog({
                    modal: true,
                    height:height,
                    width:width,
                    resizable: false,
                    draggable: false,
                    dialogClass: "flora" 
                });
            jQuery('.flora.ui-dialog').css({ position:"absolute",top:"596px"});

            }
        });

enter image description here

Please re-frame the question. Where are you facing the problem? What is selectable? Your custom code? A publicly available jQuery plugin? Your code seems to be showing the modal when stop() is called. Who is calling it? If you are filtering to only show available dates, how is the user able to select non available dates? Could you provide a simplified example on jsfiddle.net — Amith George
– Amith George, Commented Jul 4, 2012 at 5:37
The sample is jsfiddle.net/8Sd53/3 It display the popup only by clicking the unavailable date.I want to show dialog after selecting the dates only. for example July 01 is unavailable — muthu
– muthu, Commented Jul 4, 2012 at 6:22

Amith George · Accepted Answer · 2012-07-04 07:11:24Z

1

Try this. It works on my machine.

http://jsfiddle.net/8Sd53/3/

The change I have made is to use the cancel option.

It will prevent the selection to start if you click on an element that matches the selector passed to the cancel option.

jQuery("#calendar").selectable({
    filter: ".available",
    cancel: ".disabled",  // this is the important piece        
    stop: function() {
    // remaining code
    }

answered Jul 4, 2012 at 7:11

Amith George

5,9112 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

open a dialog after select the dates using JQuery UI selectable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related