ajax_call.js

$( "#datepicker" ).datepicker({
            onSelect: function(date) {
              var data = {'event[user_id]': '<%= user.id %>', 'event[start_date]': date};
              $.ajax({
                data: data,
                type: 'get',
                url: '/events/get-day',
                success: function(data){
                  // Parse data to see if it returns an event object or if it's empty.
                  var parsed_data = $.parseHTML(data);
                  // If ajax returns the event div...
                  if( $(parsed_data[1]).hasClass("event-div") ){
                    $('.event-detail-wrapper').html(data);
                    // Hide time value if it's default.
                    if( $('.event-detail-wrapper').find("#event_start_date_time").val() == "12:00AM" ) {
                      $('.event-detail-wrapper').find("#event_start_date_time").val("")
                    }
                    if ($('.event-detail-wrapper').find("#event_end_date_time").val() == "12:00AM") {
                      $('.event-detail-wrapper').find("#event_end_date_time").val("")
                    }
                    //Otherwise we give them a link to create an event.
                  } else {
                    $('.event-detail-wrapper').html('<h2 class="wut">There are no events scheduled for this day - would you like to <a href="#" id="register-event" class="go-events">add one</a>?</h2>');

                    $('#register-event').click(function() {
                      $('#starting-date').val(date);
                    });
                  }
                  $('.modal-event-details').show();
                }
              });

data.html

    <div class="event-div">
      <form class="simple_form edit_event" id="edit_event_70" action="/events/update-event/70" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="lyGbJzHa8hFHoifx8+d8blOaBkRTiCIaa78I1VLOnTfTQxZT3PmhtoSFVg9CuzHmUnRhhY5M7NwjQuR5HuZG+w==" />
<div class="event-form-wrapper">
    <div class="float-50 padding-right-10">

      <div class="field-title">Event <strong>Name:</strong></div>
      <div class="form-input-div">
        <div class="form-group string optional event_name"><input class="form-control string optional" placeholder="Name of Event" type="text" value="gotta pay teh billz" name="event[name]" id="event_name" /></div>
      </div><!-- end -->

      <div class="field-title"><strong>Type</strong> of Event</div>
      <div class='event-types'>
        <div class="form-input-div-no-bg padding-top-10">
          <input type="radio" value="game" checked="checked" name="event[type_of_event]" id="event_type_of_event_game" /> Game &nbsp;&nbsp;
          <input type="radio" value="practice" name="event[type_of_event]" id="event_type_of_event_practice" /> Practice &nbsp;&nbsp;
          <input type="radio" value="lesson" name="event[type_of_event]" id="event_type_of_event_lesson" /> Lesson &nbsp;&nbsp;
        </div>
        <div class="form-input-div-no-bg padding-top-10">
          <input type="radio" value="training" name="event[type_of_event]" id="event_type_of_event_training" /> Training &nbsp;&nbsp;
          <input type="radio" value="workout" name="event[type_of_event]" id="event_type_of_event_workout" /> Workout &nbsp;&nbsp;
          <input type="radio" value="other" name="event[type_of_event]" id="event_type_of_event_other" /> Other &nbsp;&nbsp;
        </div>
      </div>
      <div class='calendar-field'>
        <p style='display: inline;'>Please select a <strong>Start Date:</strong></p>
        <div class="form-input-div half-size">
          <div class="form-group string optional event_start_date_date"><input class="form-control string optional pick-a-date" id="starting-date" type="text" value="02/18/17" name="event[start_date_date]" /></div>
        </div><!-- end -->
      </div>
      <div class='calendar-field'>
        <p style='display: inline;'>Please Select an <strong>End Date:</strong></p>
        <div class="form-input-div half-size">
          <div class="form-group string optional event_end_date_date"><input class="form-control string optional pick-a-date" id="ending-date" type="text" value="02/18/17" name="event[end_date_date]" /></div>
        </div>
      </div>
      <div class='calendar-field'>
        <p style='display: inline;'>Please Select <strong>Start Time:</strong></p>
        <div class='form-input-div half-size'>
          <div class="form-group string optional event_start_date_time"><input class="form-control string optional" type="text" value="12:00AM" name="event[start_date_time]" id="event_start_date_time" /></div>
        </div>
      </div>
      <div class='calendar-field'>
        <p style='display: inline;'>Please Select <strong>End Time:</strong></p>
        <div class='form-input-div half-size'>
          <div class="form-group string optional event_end_date_time"><input class="form-control string optional" type="text" value="12:00AM" name="event[end_date_time]" id="event_end_date_time" /></div>
        </div>
      </div>

      <div style="clear:both"></div>

      <iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=,+&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>

    </div>
    <div class="float-50">

      <div class="field-title">Location of <strong>Event:</strong></div>
      <div class="form-input-div">
        <input placeholder="Location Name" class="address event-address" type="text" value="" name="event[location_name]" id="event_location_name" />
      </div><!-- end -->
      <div class="form-input-div">
        <input placeholder="Street Address" class="address event-address" type="text" value="" name="event[address]" id="event_address" />
      </div><!-- end -->
      <div class="form-input-div">
        <input placeholder="City" class="city event-city" style="padding-left: 0px;" type="text" value="" name="event[city]" id="event_city" />
        <select name="event[state]" id="event_state"><option selected="selected" value="00">Select</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PR">PR</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option></select>
        <input placeholder="Zip" class="zip event-zip" style="width: 50px;" type="text" value="" name="event[zip]" id="event_zip" />
      </div><!-- end -->

      <div class="field-title">Event <strong>Details:</strong></div>
      <div class="form-input-div">
        <textarea placeholder="Add Details (Uniform Info, Fees, Arrival Time, etc.)" style="max-height: 66px;" name="event[details]" id="event_details">
</textarea>
      </div><!-- end -->

      <table width="100%" cellpadding="0" cellspacing="0">
        <tr class='alert-row'>
          <td colspan='1'>
            <div>
              Send <strong>Alert:</strong>
              <input type="radio" value="1" name="event[send_alert]" id="event_send_alert_1" /> Yes

              <input type="radio" value="0" name="event[send_alert]" id="event_send_alert_0" /> No

            </div>
          </td>
          <td>
            <div class='alert-type'>
              Via:
              <input name="event[send_text]" type="hidden" value="0" /><input type="checkbox" value="1" name="event[send_text]" id="event_send_text" /> Text

              <input name="event[send_email]" type="hidden" value="0" /><input type="checkbox" value="1" name="event[send_email]" id="event_send_email" /> Email
            </div>
          </td>
        </tr>
        <tr>
          <td class='alert-fields'>
            Phone <input placeholder="000-000-0000" class="alert-phone-field" type="text" value="" name="event[phone]" id="event_phone" />

            Email <input placeholder="[email protected]" class="alert-email-field" type="text" value="" name="event[email]" id="event_email" />
          </td>
        </tr>
        <tr>
          <td class='alert-before'>
            Days Before Event
            <input placeholder="1" class="alert_notice" type="text" value="" name="event[alert_days]" id="event_alert_days" />
          </td>
          <td>
              <a data-confirm="Are you sure?" class="blue-link" rel="nofollow" data-method="delete" href="/events/70">Delete</a>
          </td>
        </tr>
          <tr>
            <td colspan="2">
              <button class="btn btn-event-save btn-black event_btn">SAVE EVENT</button>
                <input type="hidden" name="event[id]" value="70" />
                <input type="hidden" name="event[user_id]" value="45" />
              <input type="hidden" name="redirect_to" value="/my-activity" />
            </td>
          </tr>
      </table>
    </div>
</div>
</form>
      <div style="clear:both;"></div>
    </div>

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-grey',
    radioClass: 'iradio_square-grey',
    increaseArea: '0%' // optional
  });
});
</script>