Question

I have a script on JSfiddle that works: It lets users select a date and from a dropdown menu and if they choose ‘custom’ it displays some calendar options. Otherwise it remains hidden. But on my browser when I try to run the same script and I choose ‘custom’ that calendar is not displayed. This is the like to the JSfiddle: http://jsfiddle.net/MgcDU/330/

This is the code fragment running on the browser:

$('#time').on('change', function(){
    if($(this).val() == 'custom'){
        $('#interval_selector').show();
        }
    else{
        $('#interval_selector').hide();
         }
 });

    $(function(){
        window.prettyPrint && prettyPrint();

        var startDate = new Date(2012,1,20);
        var endDate = new Date(2012,1,25);
        $('#dp4').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                } else {
                    $('#alert').hide();
                    startDate = new Date(ev.date);
                    $('#startDate').text($('#dp4').data('date'));
                }
                $('#dp4').datepicker('hide');
            });
        $('#dp5').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() < startDate.valueOf()){
                    $('#alert').show().find('strong').text('The end date can not be less then the start date');
                } else {
                    $('#alert').hide();
                    endDate = new Date(ev.date);
                    $('#endDate').text($('#dp5').data('date'));
                }
                $('#dp5').datepicker('hide');
            });
    });

</script>

<div class="page-header">
   <h2 id="changer">Enter the Event you would like to follow:</h2>
 </div>


<style>
 #interval_selector{
  display:none;
  background:none;
   margin:10px;
 }
</style>

<div class="row">
<div class="span11">  
<form id ="eventForm">
     <select name="period" id="time">
        <option value="beginning" selected="selected">Process all Tweets from start</option>
        <option value="RealTime tweeting">Process all Tweets in real-time</option>
        <option value="the last 24 hours">Last 24 hours</option>
        <option value="the previous week">Previous week</option>
        <option value="custom">Custom</option> 
     </select>

    <input type="submit" id="open" onclick="heading()" value="Start Visualization" />

    <input type="button" onclick="closeMap()" value="Stop Request"/>

    <div id="interval_selector">
        <table class="table">
            <thead>
                <tr>
                    <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th>
                    <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"> Change</a></th>
                </tr>
               </thead>
               <tbody>
                <tr>
                    <td id="startDate "> 2012-02-20</td>
                    <td id="endDate "> 2012-02-25</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form> 
</div>  


<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>  

I’ve based the datepicker on based on Stafan Petre’s eyecon.ro/bootstrap-datepicker example.

I can’t see what I’m doing wrong.

Thanks

Answer 1

jsfiddle runs on window load by default. wrap your code in $(document).ready(function(){...}) to get a similar effect. (i’m looking at the first block of code in your snippet)

$(function(){ // <--- THIS LINE WAS MOVED
    $('#time').on('change', function(){
        if($(this).val() == 'custom'){
            $('#interval_selector').show();
            }
        else{
            $('#interval_selector').hide();
             }
     });
     window.prettyPrint && prettyPrint();