modal window appear twice on click in rails app

Question

I have this web app at the http://autozeep.com/cars

each car have it's link to send this car details to email of your friend or yours. Click on "Send friend" and you'll see the modal window appears. The thing is that modal is loading 2 times, when I click on link I have 2 windows, one on top of the other, still I can fill the form and send it to mail after this the page is refreshed to cars list and it's all ok, but if I don't want to send the offer to mail and I just close the window you can see that there is one more window there to close, why is that? Please help.

this is how the link looks like to open the modal window:

<%= link_to image_tag('sendtofriend.png'), send_to_friend_car_path(car),  :remote => true, :class=> 'send_to_friend' %>

and application.js

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults



$(document).ready(function() {
  $('.find_on_map').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 600,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.setmain').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 600,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.send_to_friend').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.request_more_details').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

$(document).ready(function() {
  $('.make_offer').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 400,
      modal: true,
      open: function() {
        return $(this).load(url + ' #content');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

Fixed

I changed the <%= javascript_include_tag :defaults %> with <%= javascript_include_tag :all %>

Answer 1

Check out the firebug

When I click on "Send friend" 3 GET REQUESTS are posted out...
Let us have some source code to let you know in detail...

Answer 2

More than likely, you have two javascripts responding to the same click.

If you view source on your page, you can see

<script src="/javascripts/application.js?1324469597" type="text/javascript"></script>
<script src="/javascripts/rails.js?1312451872" type="text/javascript"></script>
<script src="/javascripts/application.js?1324469597" type="text/javascript"></script>

Application.js is included twice. This may not be the exact js file that's causing the problem, but more than likely, if you play around and remove a javascript from your site, you'll have the same functionality without duplicate responses.