javascript - Cannot set property 'innerHTML' of undefined

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

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>

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

Share Improve this question edited May 23, 2017 at 12:23 CommunityBot 11 silver badge asked Feb 6, 2016 at 6:29 James 16.4k13 gold badges78 silver badges98 bronze badges

$('#myModal') is a jQuery selector looking for a HTML element with an ID myModal, so you should make sure that element exists in your HTML. You might want to read up on the $.ajax function - you'll see that the error property is actually "A function to be called if the request fails." You'll probably want add (or replace error with) a success property to for when the request succeeds. – Wex Commented Feb 6, 2016 at 6:35
1 can you show your html? are you sure there is div with id=modal-body inside div id=myModal. – Umesh Sehta Commented Feb 6, 2016 at 6:35
@MKA I have added the HTML code for my modal. – James Commented Feb 6, 2016 at 6:39
change infoModal.find('#modal-body')[0].innerHTML = htmlData; to infoModal.find('.modal-body')[0].innerHTML = htmlData; – Umesh Sehta Commented Feb 6, 2016 at 6:44

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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

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;

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

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

this is working Fine

or add id name is modal-body

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot set property 'innerHTML' of undefined - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)