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

admin管理员组

文章数量:1384149

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>

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

• javascript
• jquery
• ajax
• laravel-5.1

Share Improve this question Follow edited May 23, 2017 at 12:23 CommunityBot 111 silver badge asked Feb 6, 2016 at 6:29 JamesJames 16.4k1313 gold badges7878 silver badges9898 bronze badges 4

• $('#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;

to

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

Or

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

this is working Fine

or add id name is modal-body

本文标签： javascriptCannot set property 39innerHTML39 of undefinedStack Overflow