Combining 2 jquery scripts to work together

Question

I have these 2 scripts and the problem is that function check is called only if #hotel state is changed. How can I make function check run and in the case of #hotel doesn't change.

var hotelMap = { hotel_a: 15, hotel_b: 5, hotel_c: 10 }; //Edw mporeis na allazeis to release period gia kathe ksenodoxeio
$(function() {
   $('#hotel').change(function() {
     var selectVal = $('#hotel :selected').val();
     $("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
   });
        var dates = $('#from, #to').datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            dateFormat: 'yy-m-d',
            minDate: 15,//Episis edw prepei na mpainei to release period tou prwtou stoixeiou sth lista
            numberOfMonths: 3,
            onSelect: function(selectedDate) {
                var option = this.id == "from" ? "minDate" : "maxDate";
                var instance = $(this).data("datepicker");
                var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });

$(document).ready(check);
            function check(){
                $('#from, #to, #hotel').bind('change', update);
                $('#wait').show();
            }
            function update(){
                var from=$('#from').attr('value');
                var to=$('#to').attr('value');
                var hotel=$('#hotel').attr('value');
                $.get('get_availability.php', {from: from, to:to, hotel:hotel}, show);
            }
            function show(avail){
                $('#wait').hide();
                $('#availability').html(avail);
            }

Answer 1

Move the functions in the second file out of the document ready (at the window level). At the moment they are only scoped to the document ready event.

Then you can call the functions from anywhere (although you may want to put them in a closure). It doesn't matter in which order the files are loaded as the functions are evaluated first.

For performance reasons its best to try put this code into one file though. If this is possible, then you can put the functions together with the code in one document.ready. This is probably the best solution.

Answer 2

You could use jQuery's trigger event. So somewhere in your code, you could add this:

$('#hotel').trigger('change');

---

Edit:

I updated your demo... I added a new trigger event called "update" inside the change function and inside the datepicker function. Then I changed your check() function to bind to the update and blur events (blur works better in the date picker window for some reason).

Here is the code I ended up with:

var hotelMap = { hotel_a: 15, hotel_b: 6, hotel_c: 10 };
$(function() {
 $('#hotel').change(function() {
  // assign the value to a variable, so you can test to see if it is working
  var selectVal = $('#hotel :selected').val();
  $("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
  $(this).trigger('update');
 });

 var dates = $('#from, #to').datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  dateFormat: 'yy-m-d',
  minDate: 10,
  numberOfMonths: 1,
  onSelect: function(selectedDate) {
             var option = this.id == "from" ? "minDate" : "maxDate";
             var instance = $(this).data("datepicker");
             var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
             dates.not(this).datepicker("option", option, date);
             $(this).trigger('update');
            }
 });
});

$(function(){
 $('#from, #to, #hotel').bind('update blur', function(){  
  var from=$('#from').attr('value');
  var to=$('#to').attr('value');
  var hotel=$('#hotel').attr('value');
  $('#availability').html(hotel + ' : ' + from + ' -> ' + to);
 });
})