CODEWITHSUNDEEP
jqueryjquery-uidatepicker
palAlaa
palAlaa

Reputation: 9858

Event occur but script doesn't execute until the event occurs twice

I want the set the calender to input field when drop down list has specific selected value. The problem I face is that the event occurs but the script doesn't executed until the click occurs more than one time, I try click and focus but the same result!

here is my code

 <select name="selectKey" id="selectKey">
   <option value="1" >mail no</option>
   <option value="2" > mail type</option>
   <option value="3"  selected="selected"> mail date</option>
   <option value="4" >title</option>
</select>

<input type="text" name="srchTxt" id="srchTxt" value="">

​ and here is the js

$(document).ready(function() {



 $('input[name=srchTxt]').bind('focus', function(event) {
    // event.stopPropagation();

    if ($("select[name='selectKey']").children(':selected').val() == 3) {  
        console.log('ysssssssssssssss');
        $('input[name=srchTxt]').datepicker({
            //   showWeek: true,
            firstDay: 1,
            dateFormat: 'dd/mm/yy'
        })
    }
   });
});​

here's a demo http://jsfiddle.net/VAvwG/

Upvotes: 1

Views: 64

Answers (2)

Ram
Ram

Reputation: 144689

That's because the first time that you focus on input the datepicker is not added to it. Why not using change event?

$(document).ready(function() {
    $('#selectKey').on('change', function(event) {
        if (this.value == 3) {
            $('#srchTxt').datepicker({
                firstDay: 1,
                dateFormat: 'dd/mm/yy'
            })
        }
    }).change()
});

http://jsfiddle.net/VAvwG/5/

Upvotes: 1

Vitalii Maslianok
Vitalii Maslianok

Reputation: 1631

just add .datepicker('show') to the end

$(document).ready(function() {
    $('input[name=srchTxt]').bind('focus', function(event) {
        if ($("select[name='selectKey']").val() == 3) {  
            $('input[name=srchTxt]').datepicker({
                firstDay: 1,
                dateFormat: 'dd/mm/yy'
            }).datepicker('show')
        }
    });
});

http://jsfiddle.net/VAvwG/3/

Upvotes: 2

Related Questions