How can I remove the HTML from showing in collection_select such as the <\/option>\n, <\/select>, <\/div>');

This is the HTML output before javascript kicks in:

<select name="duel[duelers_attributes][1][challenge_id]" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

This is the HTML output after javascript kicks in:

<select name="duel[duelers_attributes][1][challenge_id]"
  id="duel_duelers_attributes_1_challenge_id">
  $("#dropdown-no-2").html(
    "\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option>
        <option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;"
  )</option></select>

Somehow things seem to get progressively worse with more options??

_dueler_fields.html.erb

<%= f.select :user_id, options_for_select(@challengers.collect { |challenger| [challenger.id] }) %>

<%= f.select :challenge_id, options_for_select(@challenger_challenges.collect { |challenged| [challenged.full_challenge, challenged.id] }) %> ,

# The problem occurs only AFTER the javascript kicks in and replaces the above line with collection_select(:dueler...
<script>
$('#duel_duelers_attributes_1_user_id').change(function () {
    var user_id = $(this).find(":selected").val();
    var address = "<%= user_challenges_path %>/".concat(user_id);
    $.get(address, function(data) {
        $("#duel_duelers_attributes_1_challenge_id").html(data);
    });
});
</script>

routes

  get 'duels/user_challenges/:id', :to => 'duels#user_challenges', as: 'user_challenges'
  get 'duels/user_challenges/:id/:user_id', :to => 'duels#user_challenges', as: 'select'

user_challenges.js.erb

$('#dropdown-no-2').html('<%= j render partial: "user_challenges" %>') 

_user_challenges.html.erb

<%= collection_select(:dueler, :challenge_id, @challenges, :id, :full_challenge, include_blank: true, id: 'dropdown-no-2') %>

AJAX console output

$('#dropdown-no-2').html('<select name=\"dueler[challenge_id]\" id=\"dueler_challenge_id\"><option value=\"\"><\/option>\n<option value=\"24\">Run by Feb 20, 2017<\/option>\n<option value=\"25\">Bungee Jump by Feb 20, 2017<\/option>\n<option value=\"26\">See Drive-thru Movie by Feb 20, 2017<\/option>\n<option value=\"27\">Journal on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"28\">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"29\">Climb Mount Everst by May 20, 2017<\/option><\/select>')

ADDITIONAL ELABORATION

The larger goal is that upon the current_user selecting a :user_id that the selected user's challenges should appear in the collection_select.

challenges_controller

def show
  @challengers = User.where(id: current_user.following_ids)
  if (params[:challenger_id]).present?
    @challenger = User.find(params[:challenger_id])
  else
    @challenger = User.find(10)
  end
  @challenger_challenges = @challenger.challenges
  @duel = Duel.new
  @duel.duelers << Dueler.new
end

duels_controller

def user_challenges
  @user = User.find(params[:user_id])
  @challenges = @user.challenges.order(:created_at)
end

def new
  @duel = Duel.new
end

duelers_controller

def new
  @dueler = dueler.new
end

duel.rb

class Duel < ActiveRecord::Base
  belongs_to :user
  belongs_to :challenge
  has_many :duelers
  accepts_nested_attributes_for :duelers, :reject_if => :all_blank, :allow_destroy => true #correct
end

How can I remove the HTML from showing in collection_select such as the <\/option>\n, <\/select>, <\/div>');

This is the HTML output before javascript kicks in:

<select name="duel[duelers_attributes][1][challenge_id]" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

This is the HTML output after javascript kicks in:

<select name="duel[duelers_attributes][1][challenge_id]"
  id="duel_duelers_attributes_1_challenge_id">
  $("#dropdown-no-2").html(
    "\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option>
        <option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;"
  )</option></select>

Somehow things seem to get progressively worse with more options??

_dueler_fields.html.erb

<%= f.select :user_id, options_for_select(@challengers.collect { |challenger| [challenger.id] }) %>

<%= f.select :challenge_id, options_for_select(@challenger_challenges.collect { |challenged| [challenged.full_challenge, challenged.id] }) %> ,

# The problem occurs only AFTER the javascript kicks in and replaces the above line with collection_select(:dueler...
<script>
$('#duel_duelers_attributes_1_user_id').change(function () {
    var user_id = $(this).find(":selected").val();
    var address = "<%= user_challenges_path %>/".concat(user_id);
    $.get(address, function(data) {
        $("#duel_duelers_attributes_1_challenge_id").html(data);
    });
});
</script>

routes

  get 'duels/user_challenges/:id', :to => 'duels#user_challenges', as: 'user_challenges'
  get 'duels/user_challenges/:id/:user_id', :to => 'duels#user_challenges', as: 'select'

user_challenges.js.erb

$('#dropdown-no-2').html('<%= j render partial: "user_challenges" %>') 

_user_challenges.html.erb

<%= collection_select(:dueler, :challenge_id, @challenges, :id, :full_challenge, include_blank: true, id: 'dropdown-no-2') %>

AJAX console output

$('#dropdown-no-2').html('<select name=\"dueler[challenge_id]\" id=\"dueler_challenge_id\"><option value=\"\"><\/option>\n<option value=\"24\">Run by Feb 20, 2017<\/option>\n<option value=\"25\">Bungee Jump by Feb 20, 2017<\/option>\n<option value=\"26\">See Drive-thru Movie by Feb 20, 2017<\/option>\n<option value=\"27\">Journal on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"28\">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"29\">Climb Mount Everst by May 20, 2017<\/option><\/select>')

ADDITIONAL ELABORATION

The larger goal is that upon the current_user selecting a :user_id that the selected user's challenges should appear in the collection_select.

challenges_controller

def show
  @challengers = User.where(id: current_user.following_ids)
  if (params[:challenger_id]).present?
    @challenger = User.find(params[:challenger_id])
  else
    @challenger = User.find(10)
  end
  @challenger_challenges = @challenger.challenges
  @duel = Duel.new
  @duel.duelers << Dueler.new
end

duels_controller

def user_challenges
  @user = User.find(params[:user_id])
  @challenges = @user.challenges.order(:created_at)
end

def new
  @duel = Duel.new
end

duelers_controller

def new
  @dueler = dueler.new
end

duel.rb

class Duel < ActiveRecord::Base
  belongs_to :user
  belongs_to :challenge
  has_many :duelers
  accepts_nested_attributes_for :duelers, :reject_if => :all_blank, :allow_destroy => true #correct
end

• javascript
• jquery
• html
• ruby-on-rails
• ruby

Share Improve this question Follow edited Mar 5, 2017 at 19:47 Patru 4,55922 gold badges3535 silver badges4444 bronze badges asked Feb 25, 2017 at 11:08 AnthonyGalli.AnthonyGalli. 2,87655 gold badges3636 silver badges8181 bronze badges 5

• Usually, this shouldn't be there in the first place. i cannot see that the script causes this. Which collection_select has this issue? – KcUS_unico Commented Feb 25, 2017 at 11:44
• collection_select(:dueler @KcUS_unico – AnthonyGalli. Commented Feb 25, 2017 at 11:47
• If I understand your ment properly then the problem will only occur after you trigger the JavaScript for the first time. This makes it highly likely that the problem lies with the JavaScript. Maybe you should post the relevant part of your HTML before and after the first call to your JavaScript. – Patru Commented Feb 27, 2017 at 12:18
• Yea I'm guessing that is the root of the problem too. Just don't know how to fix it. Updated question with output @Patru – AnthonyGalli. Commented Feb 27, 2017 at 12:42
• Puuh Jeez, that "HTML output" really looks screwed. There seem to be increasing levels of double escaping going on. However, that would require some part of the JavaScript code to replace the select by something "approximately" the same. I am afraid I cannot quite see where that happens though, but that may have to do with my lack of knowledge about the intricacies of jQuery. Maybe it would be easier to judge the solution if you tried to tell us what you are trying to achieve? – Patru Commented Mar 5, 2017 at 3:13

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Well, it kinds of look like your html is not being parsed properly. Try using jQuery.parseHTML and then append it to the select input.

$.get(address, function(data) {
       var html = $.parseHTML( data );
       $("#duel_duelers_attributes_1_challenge_id").append(html);
});

Not tested, but give it a bash!!

Can you please try to remove name attribute & test once. Might be [](Square Brackets) are creating some problems.

Try like this

 <select id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

Or

<select name="duel" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

I suggest you to go for a regex replace like this on the html element.

var text=$('#duel_duelers_attributes_1_challenge_id').html();
text=text.replace(/(\\n|<(.)*>|\\"|\"\n.*\))/g,''); 
text=text.replace(/\$[^<]*/,''); 
text=text.replace(/(\n)/g,'').replace(/\\\"/g,'"').replace(/\"\)/,'').replace(/\\\//g,'/'); 
$('#duel_duelers_attributes_1_challenge_id').html(text);

console.log(text);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="duel[duelers_attributes][1][challenge_id]"
  id="duel_duelers_attributes_1_challenge_id">
  $("#dropdown-no-2").html(
    "\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option>
        <option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;"
  )</option></select>

Ok. According to API I think your collection_select is not totally correct: http://apidock./rails/ActionView/Helpers/FormOptionsHelper/collection_select

Try:

<%= collection_select(:dueler, :challenge_id, Challenge.all, :id, :full_challenge %>

The first 'dueler' means that it is for the object / model dueler, than the method or attribute (challenge_id),than Challenge.all for collection OR @challenges if you have that in your controller action. :id is value, :full_challenge is label. If your full_challenge does not include this HTML as a string than it should also not show up.

I hope this helps, may be it is not the correct answer, but I tried to help you out . Let me know,..

Ok, so I tried to wrap my head around this even if it is way too late to do so. I guess you are trying to exchange the options of a select from the change-listener of another one. A reasonably mon task to do, so maybe you should look for a guide on how to achieve it.

However, checking on the jQuery documentation will give you that the .html(...) function will replace the inside HTML of some element(s) identified by your selector. You may check out this JSFiddle and verify your JavaScript-console to figure out that these are only your options, not the select itself.

To me it looks as if you are trying to replace the options of the challenge select through a misguided JavaScript request which will return some JavaScript escaped html! We are still lacking a lot of the code necessary to actually judge this though (namely your controller action). If that might be the case though, then your poor browser will most probably be confused when you are trying to replace the inside of your select with a piece of JavaScript escaped html which again defines a select (or at least tries to do so).

Without further checking any guides and to retain maximal flexibility I would suggest you have your request just return the options you want the challenger to be presented with in some JSON format. This will allow you to replace the options through your request in the change listener. If you insist on providing the html you should make sure to provide only the options and to ensure you undo all necessary escaping before passing it to .html(...).

user_challenges.js.erb: $('#dropdown-no-2').html('<%= render partial: "user_challenges" %>')

or in other words remove the 'j' function which escapes html tags.