Js .closest

Rails
#1

I have a script:

$ ->
$(document).on ‘change’, (’.ops_select’), ->
val = $(".ops_select option:selected").val()
$.ajax ‘/projects/update_oncalls/’,
type: ‘GET’
dataType: ‘script’

  data: {ops_group_id: val }

which triggers a “update_concalls.js.coffee” file to replace a the value
in
a select-tag.

$(".oncalls_select").empty().append("<%=
escape_javascript(render(:partial
=> @oncalls)) %>")

As I have multiple instances of “.ops_select” I want to bind it to the
recent selected and update only this.
I have tried to fiddle in the closest function but can’t succed.
Some help would be great.
Thanks

#2

Hello Werner,

You are having select lists on a page with class .ops_select. You have
are replacing the select whole select list or options of select list
using
update_concalls.js.coffee file as followed :

$(".oncalls_select").empty().append("<%=
escape_javascript(render(:partial => @oncalls)) %>")
//Here .oncalls_select I am considering as the container div tag for
select list with class ops_select as you have specified in coffee script
code

Please correct me if I am wrong.

If you want to update the select list whose option was selected recently
then you will have to send some identity of that select list in
parameters
or you only render response from controller in an text format and update
the recently selected list using success function of the $.ajax
function. I
am explaining both of these ways …

  1. Sending some identifier for recently selected select list.
    In this case you will be giving some identifying attribute value to each
    select list and along with the selected value of select list you will
    send
    this identity value. So that in the update_concalls.js.coffee you will
    be
    available with the identity of that select list to which you want to
    update.

For setting identity for each select list you can keep their id
different
like ‘select_list_id1’, ‘select_list_id2’, ‘select_list_id3’…

In your coffee script you will be sending this id with parameters as :

$ ->
$(document).on ‘change’, (’.ops_select’), ->
val = $(".ops_select option:selected").val()
$.ajax ‘/projects/update_oncalls/’,
type: ‘GET’
dataType: ‘script’

  data: {ops_group_id: val, select_list_id: $(this).attr('id') }

Now in your update_concalls.js.coffee file you will be updating the
select
list with the id provided in params[:select_list_id] as followed :

$(’#<%=
params[:select_list_id]%>’).parents(’.oncalls_select:first’).empty().append(’<%=
escape_javascript(render(:partial => @oncalls)) %>’)
//Here .oncalls_select I am considering as the container div tag for
select list with class ops_select as you have specified in coffee script
code

This way you will send the identifier select_list_id for knowing which
was
the latest selected select list.

  1. Updating the select list with success function.

In this case you will get the html response(which you can directly use
for
appending to the container .oncalls_select).
Your $.ajax call will be updated as :

$ ->
$(document).on ‘change’, (’.ops_select’), ->
val = $(".ops_select option:selected").val()
var selected_list = $(this)
$.ajax ‘/projects/update_oncalls/’,
type: ‘GET’
dataType: ‘html’
data: {ops_group_id: val }
success: (response) ->
$(selected_list).parents(’.oncalls_select:first’).empty().append(response)

And in controller you will be providing the html string as :

def updated_oncalls

other code in action

respond_to do |format|
format.html { render :partial => @oncalls }
# Other formats’ responses
endend

This way by using the $(this) in callback function you will get the
recently selected select list which you will be updating.
Thanks,
Lauree
Allerin Technologies http://www.allerin.com
(Ruby on Rails Development & Consulting Company)

#3

Am 08.05.2014 um 06:31 schrieb Lauree Roberts
[email protected]:

Hello Lauree.

Tried this:

  type: 'GET'

respond_to do |format|
format.html { render :partial => @oncalls }
# Other formats’ responses
end
end

but is not updating the second select at all.
Changed to:

$ ->
$(document).on ‘change’, (’.ops_select’), ->
val = $(".ops_select option:selected").val()
selected_list = $(this)

$.ajax '/projects/update_oncalls/',
  type: 'GET'
  dataType: 'html'
  data: {ops_group_id: val }

  success: (response) ->
    $('.oncalls_select').empty().append(response)

works with one instance and also updates two with sam value.
I do get selected_list values like:
project_usergroups_attributes_0_ops_group_id, so this seems to be ok.

It looks like this expression is not fitting:
$(selected_list).parents(’.oncalls_select:first’)

Greetings
Werner

#4

Am 08.05.2014 um 06:31 schrieb Lauree Roberts
[email protected]:

Hello Lauree…
thank you very much for your email which is greatly appreciated…

I will check that out. It looks good and understandable for me.
Although I changed meanwhile to a different solution in terms of the
selects:
according to:
http://www.appelsiini.net/projects/chained

$(document).ready(function(){
$(.oncalls_select’).chained(’.ops_select’);
});

The partial looks like that now:

<%= f.select :ops_group_id, options_for_select((@groups_for_dropdown),
:selected => @project.usergroups.map(&:ops_group_id)), {}, { class:
‘ops_select’ } %>

<%= f.select :oncall_id, options_for_select((@oncalls_for_dropdown),
:selected => @project.usergroups.map(&:oncall_id)), {}, { class:
‘oncalls_select’ } %>

This works fine for one div. Still the basic problem remains…to set
the focus on the closest/parent div.

May be you can give me some idea.

Thanks
Werner