Cannot set property 'innerHTML' of undefined

Question

I've been trying to implement a modal on my site that dynamically loads the content using an ajax call.

I stumbled across this question, which showed this demo, which would suit my needs perfectly after a little modification.

The demo works perfectly on JSFiddle, but inside my dev environment is spitting out the error:

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

Tracing it back to my script it is saying that htmlData is undefined, but it is defined right above it?

Script that runs the call:

<script>
(function() {
    var infoModal = $('#myModal');
    $('.modal-toggle').on('click', function(){
        $.ajax({
            type: "GET",
            url: '/api/menu-item/'+$(this).data('id'),
            dataType: 'json',
            error: function(data){
                fakeResponse = {"id":4,"menu_category_id":446,"name":"kunzereichert","description":"Dolores impedit ut doloribus et a et aut.","price":"999.99","created_at":"2015-04-10 05:55:23","updated_at":"2015-04-10 05:55:23"}
;
                var htmlData = '<ul><li>';
                htmlData += fakeResponse.name;
                htmlData += '</li></ul>';
                infoModal.find('#modal-body')[0].innerHTML = htmlData;
            }
        });
    });
})(jQuery);
</script>

I'm not very fluent with javascript, so would appreciate any help with why I am getting this error. I am just trying to test loading some information from a JSON response to then display inside the modal.

If there is a better way to do this then I am open to suggestions to!

Edit: this is the HTML code for my page

@extends('sbadmin')

@section('content')

<div class="col-lg-10 col-lg-offset-1">

    <h1><i class="fa fa-users"></i> Staff</h1>

    <div class="table-responsive">
        <table class="table table-bordered table-striped">

            <thead>
                <tr>
                    <th>Name</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                @foreach ($staff as $employee)
                <tr>
                    <td>{{ $employee->first_name }} {{ $employee->last_name }}</td>
                    <td><button type="button" class="modal-toggle" data-toggle="modal" data-target="#myModal" data-id="{{ $employee->id }}">Disable</button><a href="{{ url('staff/regularhours/' . $employee->id) }}" class="btn btn-primary">Staff Details</a>  <a href="{{ url('staff/regularhours/' . $employee->id) }}" class="btn btn-success">Regular Hours</a></td>
                </tr>
                @endforeach
            </tbody>

        </table>
    </div>
    {!! $staff->render() !!}

</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<script>
(function() {
    var infoModal = $('#myModal');
    $('.modal-toggle').on('click', function(){
        $.ajax({
            type: "GET",
            url: '/api/menu-item/'+$(this).data('id'),
            dataType: 'json',
            error: function(data){
                fakeResponse = {"id":4,"menu_category_id":446,"name":"kunzereichert","description":"Dolores impedit ut doloribus et a et aut.","price":"999.99","created_at":"2015-04-10 05:55:23","updated_at":"2015-04-10 05:55:23"}
;
                var htmlData = '<ul><li>';
                htmlData += fakeResponse.name;
                htmlData += '</li></ul>';
                infoModal.find('#modal-body')[0].innerHTML = htmlData;
            }
        });
    });
})(jQuery);
</script>

@endsection

Answer 1

The "Uncaught TypeError: Cannot set property 'innerHTML' of undefined" error is actually referring to the infoModal.find('#modal-body')[0] part and not the htmlData part.

So, you are getting this error because it is saying that infoModal.find('#modal-body')[0] does not exist. In the demo that you are using the code from, it has a <div id="myModal"></div> which relates to your var infoModal = $('#myModal');

Inside the div, is a <div class="modal-body" id="modal-body"></div>. This is what the infoModal.find('#modal-body')[0] is trying to locate. So, your error is saying that the element the find() is looking for doesn't exist and you are trying to set its innerHTML.

So, check your HTML and make sure you copied over the HTML from the demo or at least the <div class="modal-body" id="modal-body"></div> part of it.

EDIT

Your HTML shows that your element is <div class="modal-body"></div> but your call is infoModal.find('#modal-body')[0] which is looking for an ID of modal-body. Try changing it to this: infoModal.find('.modal-body')[0].innerHTML

Answer 2

You Use modal-body is Class Name but You Access by Id Name so You change this code

infoModal.find('#modal-body')[0].innerHTML = htmlData;

to

infoModal.find('.modal-body')[0].innerHTML = htmlData;

Or

$('.modal-body')html(htmlData);

this is working Fine

or add id name is modal-body