i trying think many people have done; , have read examples etc; , have tried piece need not having luck. trying have button pass variable bootstrap modal. , somehow echo or print variable within modal know working. built code examples found
here button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourparameter="<?php echo $image_id; ?>">upload images </button> i not sure if echo image id variable passed have done lot of stuff before seems ok (this issue though)
secondly - here modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close text-button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="upload-images-modallabel">upload images</h4> </div> <div class="modal-body"> ok ok ok <script> $('#upload-images-modal').on('show.bs.modal', function(e) { var yourparameter = e.relatedtarget.dataset.yourparameter; // stuff w/ it. alert(yourparameter); }); </script> </div> <div class="modal-footer"> <button type="button" class="button" data-dismiss="modal">cancel</button> <button type="button" class="button">add images</button> </div> </div> a couple of notes on this. uncertain script should "placed" in relation modal. placed in modal body.
i tried alert see variable passed. nothing happening though. hoping can give me pointers on doing wrong.
thanks much,
gerard
your issue down using version of bootstrap relatedtarget not passed.
as in regards js, put in bottom of body or in separate js file reference bottom of body , after libraries, ie jquery , bootstrap.
here code working latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) { var yourparameter = e.relatedtarget.dataset.yourparameter; // stuff w/ it. alert(yourparameter); });<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourparameter="test">upload images </button> <div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close text-button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="upload-images-modallabel">upload images</h4> </div> <div class="modal-body"> ok ok ok <button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourparameter="<?php echo $image_id; ?>">upload images </button> </div> <div class="modal-footer"> <button type="button" class="button" data-dismiss="modal">cancel</button> <button type="button" class="button">add images</button> </div> </div> <!-- modal --> <div id="mymodal1" class="modal hide" tabindex="-1" role="dialog"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>standard selectpickers</h3> </div> <div class="modal-body"> <select class="selectpicker" data-container="body"> <option>mustard</option> <option>ketchup</option> <option>relish</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">close</button> <button class="btn btn-primary">save changes</button> </div> </div> </div>