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);
            }

How are you deciding when to run the check() function when the #hotel input hasn't changed? Is it on submit or do you have an update button? — Mottie
These are the two scripts I want to combine. Hotel is a select box which affects the values in two input boxes(to,from) The second script as soon the two input boxes have values I'm passing these values to a php document and a return some html. I want the second script to run indepentetly from the first. Now the second script only runs if state of #hotel changes. Thanks! — Nikos

Mottie Mottie · Accepted Answer · 2010-04-28T17:02:25

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);
 });
})

Combining 2 jquery scripts to work together

2 Answers