javascript - Modal window only pulling information from first record in a PHP for each loop -
i have page foreach loop shows data set of parks. foreach loop runs fine. within loop have button push modal window show additional information on park. button knows in loop (i've labeled variable test) when modal window opens brings information first record.
foreach ($showresult $display) { $display_result[] = array ('parkid' =>$display['parkid'], 'trailsys' =>$display['trailsys'], 'state' =>$display['state'], 'trailset' =>$display['trailset'], 'name' =>$display['name'], 'description' =>$display['description'], 'url' =>$display['url'], 'ldes' =>$display['ldes'], 'ltxt' =>$display['ltxt'], 'address' =>$display['address'], 'city' =>$display['city'], 'zip' =>$display['zip'], 'phone' =>$display['phone'], 'pos' =>$display['pos'], 't1' => $display['t1'], 't2'=> $display['t2']);} $states = get_states($variable); foreach ($states $staterow) { $state_set[] = array ('id' =>$staterow['id'], 'st' =>$staterow['st'], 'state' =>$staterow['state'], 'reg' =>$staterow['reg']); } ?> <html> <head> ... </head> <body> ... <?php foreach ($display_result $parkrow) { ?> <!-- features heading --> <div class="row" id="featuresheading"> <div class="col-12"> <h2> <?php echo $parkrow['t1']; ?> </h2> <h2 id="subtitle"><?php echo $parkrow['t2']; ?></h2> <p class="lead"> <?php echo $parkrow['description']; ?> </p> </div><!--close col-12 --> </div><!-- close featuresheading --> <!-- panel group --> <div id="dom-target" visibility: hidden> <?php $output = $parkrow['description']; echo htmlspecialchars($output); ?> </div> <!-- panel 1 --> <div class="row" id="features"> <div class="row"> <div class="col-sm-4 feature"> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title"><?php echo "location of " . $parkrow['name']; ?></h3> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplemodal" data-whatever="<?php $parkrow ?>">open modal <?php echo $parkrow['name']; ?></button> </div><!-- close panel-heading --> <img src="images/placeholder.jpg" alt="placeholder"> <p>click here location</p> </div><!-- close panel --> </div><!-- close col-sm-4 --> ... <!-- modal window --> <div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4>this test</h4> </div><!-- close modal-header --> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">recipient:</label> <input type="text" class="form-control" id="$name"> </div><!-- close form-group --> <div class="form-group"> <label for="message-text" class="control-label">message:</label> <textarea class="form-control" id="message-text"></textarea> </div><!-- close form-group --> </form><!-- close form --> </div><!-- close modal-body --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">send message</button> </div><!-- close modal-footer --> </div><!-- close modal-content> --> </div><!-- close modal-dialog --> </div><!-- close modal --> <?php unset($parkrow); } ?> ... and javascript:
$('#examplemodal').on('show.bs.modal', function (event) { var div = document.getelementbyid("dom-target"); var mydata = div.textcontent; var button = $(event.relatedtarget) var recipient = button.data('whatever') var modal = $(this) modal.find('.modal-header').text('new message ' + recipient) modal.find('.modal-body input').val(mydata) }) to see in action: http://www.ride4wheel.com/test_site/ride.php?id=pa
you have dom-id '#examplemodal' several times in html.
should have 1 #examplemodal , update did.
put 'model' out of php-loop!
Comments
Post a Comment