javascript - How do you pass data using "data" fields? -
this question has answer here:
- passing data bootstrap modal 5 answers
i trying make fields "editable" on page , trying "pass" data html element modal popup.
so far, create html link
<h1 class="head-title animated bounceindown animation-delay-8">my header <a href="#" data-toggle="modal" data-target="#editfield" data-field="header"><i class="fa fa-pencil-square-o"></i></a> </h1> when click on that, shows modal popup
<div tabindex="-1" class="modal fade" id="editfield" role="dialog" aria-hidden="true" aria-labelledby="editfieldlabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> <h4 class="modal-title" id="editfieldlabel">modal title</h4> </div> <div class="modal-body"> need data here </div> <div class="modal-footer"> ... </div> </div> </div> </div> what i'd somehow content, display use user edit. know can use javascript on href set variable, wondering if there better way.
it's quite straight forward. if element click following:
<a data-some-value="some value" href="#" data-toggle="modal" data-target="#editfield" data-field="header">........ then can use following read , use data-some-value, example:
$(function() { $('a[data-target="#editfield"]').on('click',function(e) { e.preventdefault(); var selector = $(this).data('target'), somevalue = $(this).data('some-value'); $( 'div.modal-body', selector ).html( somevalue ); }); });
Comments
Post a Comment