jquery - Bootstrap modal when activated inside tab -


wanted see if me. have edit button sits inside table sits inside bootstrap tabs. when click edit link display modal window doesnt work. however, when move same edit link outside of tabs, works charm. think has way bootstrap utilizes jquery work tabs. i'm jquery beginner don't have enough knowledge figure out.

any appreciated

link invoke modal

 <li><a href="#" class="btn btn-xs btn-primary" class="edittodo" data-toggle="modal" data-target="#edittodomodal"><span class="glyphicon glyphicon-pencil"></span></a></li> 

modal code

<div class="modal fade" id="edittodomodal" tabindex="-1" role="dialog" aria-labelledby="edittodomodal"> <div class="modal-dialog" role="document">     <div class="modal-content">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>             <h4 class="modal-title" id="edittodomodallabel">edit item</h4>         </div>         <div class="modal-body">             <form method="post" action='{{url("/todo/")}}' class="editformtodomodal" >                 {{csrf_field()}}                 <input type='hidden' name='_method' value='patch'>                 <input type='hidden' name='event_id' value="{{$event->id}}">                   <div class="form-group">                     <label for="message-text" class="control-label">task:</label>                     <input type="text" class="form-control" name="description" value="">                     {{--<textarea class="form-control description auto_grow" name="description" id="to_do_description"></textarea>--}}                 </div>                  <div class="modal-footer">                     <button type="submit" class="btn btn-primary">update</button>                     <button type="button" class="btn btn-default" data-dismiss="modal">close</button>                 </div>             </form>         </div>      </div> </div> 

here tabs html

    <ul class="nav nav-tabs">            <li class="active"><a href="#tasks" data-toggle="tab">tasks</a></li>           <li class=""><a href="#related_files" data-toggle="tab">related files</a></li>          <li class=""><a href="#event_staff" data-toggle="tab">event staff</a></li>                                             </ul> 

and code actual tabs <div class="tab-content"> <div class="tab-pane active" id="tasks"> there lot more code edit link sits here inside table </div> </div>


Comments

Popular posts from this blog

html - Styling progress bar with inline style -

java - Oracle Sql developer error: could not install some modules -

How to use autoclose brackets in Jupyter notebook? -