dynamically appending elements on dynamically created elements

Question

I have a modal with dynamic content. e.g. I can create an item by typing someting in a textbox and hit enter. After I hit enter I want a notification below the textbox, which itself was dynamically created.

normally I'd just put this in my .js.erb

$("#idOfTextbox").append("some waring")

but as I mentioned the textbox with id: idOfTextbox was created dynamically and because of that this approach doesnt work.

I read plenty about this and I think I roughly understand the problem, normaly you'd do something like this

$(document).on("click", "#idOfTextbox", function(){
  $(this).append("some warning");
};

but I don't really want to bind it to a specific event, I just want to append the message when the controller renders the .js.erb file

I thought mb something like .on("load", might work, but I had no success so far.

I'd really appreciate any help.

check this : http://stackoverflow.com/questions/34518236/simple-jquery-variable-event/34518314#34518314. Your best option is to append the text when idOfTextbox is created dynamically — DinoMyte, Jan 05 '16 at 23:26
well I could has write the messages before and only show/ hide them :D or I try to render append the message on success of the ajax call itself, instead of doing it inside the .js.erb. — Jonny Rimek, Jan 05 '16 at 23:59

score 3 · Answer 1 · answered Jan 05 '16 at 23:29

3

Try this :

$('body').append("<div id='idOfTextbox'></div>");
$(document).find('#idOfTextbox').append("some value");

Example : https://jsfiddle.net/DinoMyte/2rhasve1/2/

answered Jan 05 '16 at 23:29

DinoMyte

8,737
1
19
26

I think this only works because the div is gets appended, but when I render a partial I actually replace it. and in this case it doesn't work. https://jsfiddle.net/2rhasve1/6/ – Jonny Rimek Jan 05 '16 at 23:51
You need to use replaceWith instead of replace. https://jsfiddle.net/DinoMyte/2rhasve1/7/ – DinoMyte Jan 06 '16 at 00:01
yea I just noticed I am already using replaceWith, but I still doesn't work. And pretty sure it only works because it is inside fiddle. I'll go with this solution: http://stackoverflow.com/questions/33059192/jquery-find-dynamically-created-element-without-events. doing it inside the call back seems the best solution. I have always used the .js.erb solution before, but hopefully I'll get it to work. I'm not even rendering a partial in this case, so there schould be no problem. – Jonny Rimek Jan 06 '16 at 00:26

score 0 · Accepted Answer · answered Jan 06 '16 at 00:47

alright the answer was easier than expected.

I just replaced the item inside the success part of the ajax request itself:

this sends the content of #role_name textfeld to the controller and renders replaces the exsisting div with #newrole id with my text

$(function(){
  $("body").on("keyup", function(e){
    if ( e.which == 13 ) {
      role_name = $("#role_name").val();

      $.ajax({
      type: "POST",
      dataType: "script",
      url: '/roles',
      data: {role: {name: role_name} },
      success: function(){
        $("#newrole").replaceWith("creation succesful bitches");
        }
      });
    }
  });
})

if you want to access the response of the controller just call the function like this

success: function(html){

and inside html variable schould be the content of your controller response.

note: I could replaceWith but not append, dunno why...

dynamically appending elements on dynamically created elements

2 Answers2