Questions › Issues with find() when inserting html dynamically using jquery

I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:

<div class="row" id="newRow">
    <div class="col-md-12 column">
        <button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
    </div>
</div>

And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:

...

$(this).parent().next().children().find('.column').assignId();

...

Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).

As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:

$(document).on('click', 'button.addElement', function (e) {
    e.preventDefault();

    $('#add-element').modal('show').draggable();

    var col = $('button.addElement').parent();

    // debugging in the browser verifies that the colId
    // successfully stores the id attribute for the column
    var colId = col.attr('id');

    addElements(colId);
});

...

function addElements(colId) {
    $('#insert-paragraph').on('click', function () {
        var html_content = '<div class="box" data-type="paragraph">...</div>';
        $("#newRow").find("#"+colId).html(html_content)

        $('#add-element').modal('hide');
    });   
}

It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.

Any help is very much appreciated.

Thanks!

UPDATE:

@juvian suggested writing a few of the variables' values to the console:

console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html()); 

I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:

Values prior to running addElements:

console.log(colId);                               = 8153-1076-641d-3840
console.log($("#newRow")).length;                 = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>

Values after the insert-paragraph button is pressed:

console.log(colId);                               = 8153-1076-641d-3840
console.log($("#newRow")).length;                 = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>

Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:

<div id="newRow" class="row clearfix">
    <div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
        <button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
            <i class="fa fa-plus fa-3x add-item"></i>
        </button>
     </div>
</div>

2 Answers :
juvian answered

.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)

You are just missing adding the id selector at the beginning to do an id match:

.find("#"+colId)
wrigley06 replied
Hi juvian, thanks for the reply! Unfortunately, that was my first thought too. I think you're right that ("#"+colId) should at least be formatted like that (and will update in my original post), but even with that formatting change, the addElement button remains and it still does not insert the html_content.;
juvian replied
@wrigley06 does console.log(colId) give a correct output? Trying it without modal options and click event works fine: jsfiddle.net/1dg628zb;
wrigley06 replied
Hi @juvian, when I log the colId the output is the ID: 0b0c-7ffc-d732-2bb9. I don't know why this would cause an issue, but is there any possibility that there's an issue executing the html insert from an event triggered inside the modal? I ask for two reasons. 1) The code you linked to works, and the only thing that's different is mine gets executed inside a second event handler and 2) When I was debugging, it seemed like $('#insert-paragraph').on('click', function () {...} was executing before I clicked on the button. Perhaps the issue is there?;
juvian replied
@wrigley06 Try a console.log($("#newRow")).length to make sure it still exists, then a console.log($("#newRow").find("#"+colId).length) and then a console.log($("#newRow").find("#"+colId).html());
wrigley06 replied
I was able to log the values you asked me to. I've appended the results to my original post for the additional space. As you'll see it looks like everything is working as I would expect it to, yet I click the 'paragraph' button in my modal, it closes and the same 'add element' button that is supposed to be replaced, stays where it is.;
Koustav Ray answered

I guess The parent of button is a div here which has no id. var col = $('button.addElement').parent(); thus var colId is getting no value.give that div an id and it should be fine.

wrigley06 replied
Hi Koustav. Thanks for the response. var col refers to the div that holds the button. In this case that's <div id="320a-20e5-f07f-afc4" class="col-md-12 column ui-sortable"> (that id is auto-assigned with my assignId() function). var colId is meant to store the id attribute of var col and does so successfully (verified with Firebug).;
Koustav Ray replied
You are welcome. in that case as pointed out by juvian just prepend the '#' to colId and it should be fine,,;