javascript - Cannot set property 'innerHTML' of undefined -
i've been trying implement modal on site dynamically loads content using ajax call.
i stumbled across question, showed demo, suit needs after little modification.
the demo works on jsfiddle, inside dev environment spitting out error:
uncaught typeerror: cannot set property 'innerhtml' of undefined
tracing script saying htmldata undefined, defined right above it?
script runs 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 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 fluent javascript, appreciate why getting error. trying test loading information json response display inside modal.
if there better way open suggestions to!
edit: html code 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 $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">×</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 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
the "uncaught typeerror: cannot set property 'innerhtml' of undefined" error referring infomodal.find('#modal-body')[0] part , not htmldata part.
so, getting error because saying infomodal.find('#modal-body')[0] not exist. in demo using code from, has <div id="mymodal"></div> relates var infomodal = $('#mymodal');
inside div, <div class="modal-body" id="modal-body"></div>. infomodal.find('#modal-body')[0] trying locate. so, error saying element find() looking doesn't exist , trying set innerhtml.
so, check html , make sure copied on html demo or @ least <div class="modal-body" id="modal-body"></div> part of it.
edit
your html shows element <div class="modal-body"></div> call infomodal.find('#modal-body')[0] looking id of modal-body. try changing this: infomodal.find('.modal-body')[0].innerhtml
Comments
Post a Comment