How to render an html.erb partial using AJAX

Question

I am new to programming and I don't know how to go about this logic:

I have a collection select in my events\\new.html.erb view, where a customer can select another customer:

#events\new.html.erb
<%= f.collection_select :id,
                                    Customer.where(business_id: current_customer.business_id),
                                    :id,
                                    :full_name,
                                    { prompt: 'Select' },
                                    { id: "colleageselect", onChange: "renderColCal(this)" } %>


            <div id = colleaguecal>

            </div>

When the user clicks a name, it triggers a client-side JavaScript function that creates a variable colleagueID which I need to use in Ruby server-side in order to retrieve the selected customer from the database

#application.js

function renderColCal(select){

    var colleagueID = select.value ;


    document.getElementById("colleaguecal").innerHTML = "Your colleague's calendar:";

    $.ajax({
            url: 'calendars_controller/calendarChange',
            data: (
                'colleagueID=' + $('select').val()
            )
        }
    )
}

The variable is picked up in Calendars#calendarChange:

def calendarChange
    colleagueID = params[:colleagueID]
    @colleague = Customer.where(id: :colleagueID)

    @colcalendar = @colleague.calendar
    @events = @colleague.calendar.events #sets the variables I need to use for the customer's calendar (_calendarChange.html.erb) that needs to be rendered within events\html.erb

  end

How can I make it so that when the collection_select selection is changed, my calendars\\_calendarChange is rendered within my events\\html.erb , using the @events variable defined in calendars#calendarChange?

Thanks!

EDIT:

To make it clear what I want to accomplish:

I want the customer to be able to select another customer in collection_select, and see ON THE SAME PAGE, the selected customer's calendar. This calendar requires @events in order to be unique to the selected customer. (each customer has their own calendar and set of events)

Answer 1

If I understood what you are trying to accomplish:

In ruby / rails world as a convention we use snake case naming for our methods and variable. So here calendarChange will become calendar_change .

When your function renderColCal gets called it will hit the calender_change method.

You need here to create a calendars/calendar_change.js.erb that will deliver javascript functionality as a response.

calendars/calendar_change.js.erb

// put here whatever javascript you want
// You could also use ruby code by wrapping it with erb tags
// Here an example:
$("#wrapper").html("<%= escape_javascript(render @events ) %>")

More infos here .