0

I'm trying to pass a value in a global variable with no luck to get it working, even i declared it out of the function scope but still couldn't get it working. My desired variable is "myStart" in the code below:

        var myStart; //declared as a global variable

         $(document).ready(function() {
            $("#circuit").change(function() {                

                 var getget = $.ajax({    //create an ajax request to get_dates.php
                    type: "GET",
                    url: "get_dates.php?q="+document.getElementById('circuit').value,             
                    dataType: "html",   //expect html to be returned                
                    success: function(response){                    

                        myStart = response ;
                    } //success

                });//ajax
            });//curcuit on change
         });//document.ready

Then simply i want to output or print "myStart" this part of code below

            $('#sandbox-container .input-daterange').datepicker({
                format: "dd/mm/yyyy",
                startDate: "-"+myStart,  // it should result as "-30/06/2015" for example
                //endDate: "+15/01/2019",
                startView: 1,
                clearBtn: true,
                calendarWeeks: true,
                autoclose: true,
                todayHighlight: true
            });

I also tried to put it in a hidden input but nothing worked. I am not sure what's wrong with the codes above.

Thanks a lot in advance.

UPDATE: the full script is as below:

    Select One of the Circuits below:<br><br>
    <select id="circuit" name="circuit" style="font-size:20px;" on >
      <option></option>
      <option value="A" style="background-color:#FF0;">Circuit A</option>
      <option value="B" style="background-color:#6FF;">Circuit B</option>
      <option value="C" style="background-color:#FF0000;">Circuit C</option>
      <option value="D" style="background-color:#069;">Circuit D</option>
      <option value="E" style="background-color:#66CCFF;">Circuit E</option>
      <option value="F" style="background-color:#CCC;">Circuit F</option>
      <option value="G" style="background-color:#00CC00;">Circuit G</option>
      <option value="H" style="background-color:#900; color:white;">Circuit H</option>
    </select>


    <br><br>
    <div id="responsecontainer" style="font-weight:bold;"><b>Person info will be listed here.</b></div>


    <div id="sandbox-container">        
        <div class="input-daterange input-group" id="datepicker">
            Select your desired period of booking (3 months minimum) <br /><br />
            <input type="text" class="input-sm form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-sm form-control" name="end" />
        </div>
    </div>



    <script type="text/javascript">
         $(document).ready(function() {
            $("#circuit").change(function() {                
                 $.ajax({    //create an ajax request to get_dates.php
                    type: "GET",
                    url: "get_dates.php?q="+document.getElementById('circuit').value,             
                    dataType: "html",   //expect html to be returned                
                    success: function(response){                    
                         $('#sandbox-container .input-daterange').datepicker({
                                format: "dd/mm/yyyy",
                                startDate: "-"+response,  // it should result as "-30/06/2015" for example
                                //endDate: "+15/01/2019",
                                startView: 1,
                                clearBtn: true,
                                calendarWeeks: true,
                                autoclose: true,
                                todayHighlight: true
                            });
                    } //success

                });//ajax

            });//curcuit on change
         });//document.ready            


    </script>
Mojito
  • 31
  • 1
  • 5
  • 1
    Init datepicker inside success function... – Oleksandr T. Dec 30 '14 at 10:54
  • thx alexander, i have done this and it worked only once, i mean the variable doesn't change with the onchange event of select in HTML. it works like the variable get printed only once and stay fixed without being dynamic with the select onchange. – Mojito Dec 30 '14 at 10:57

1 Answers1

0

var myStart; //declared as a global variable

     $(document).ready(function() {
        $('#circuit').on('change', function() {               

             var getget = $.ajax({    //create an ajax request to get_dates.php
                type: "GET",
                url: "get_dates.php?q="+document.getElementById('circuit').value,             
                dataType: "html",   //expect html to be returned                
                success: function(response){                    

                     $('#sandbox-container .input-daterange').datepicker({
                            format: "dd/mm/yyyy",
                            startDate: "-"+response,  // it should result as "-30/06/2015" for example
                            //endDate: "+15/01/2019",
                            startView: 1,
                            clearBtn: true,
                            calendarWeeks: true,
                            autoclose: true,
                            todayHighlight: true
                        });
                } //success

            });//ajax
        });//curcuit on change
     });//document.ready

Please try this..When you will get success response then directly init datepicker it will resolve your issue.

Prashant M Bhavsar
  • 1,136
  • 9
  • 13