js .closest

rubyonrails-talk
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
  end
end

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 (Ruby on Rails Development & Consulting Company)

3

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:

@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

4

Hello Lauree.

Tried this:

  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
  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