jquery - Can't get Bootstrap Modal to show each JSON record -
the idea here click value select dropdown press submit , php retrieves records mysql saving json encoded variable use jquery access each record display each 1 modal 30 seconds before modal shows next record.
i have form working, php call mysql , have json variable data. have bootstrap modal, , show header, not body of record trying display 2 of fields - "name" , "description". can see records in modal body in p element #name id, when click on inspect, won't go in modal.
<?php require_once('../admin/login.php'); $conn = login(); if(isset($_post['type'])) { $type = $_post['type']; $query = ("select * exercise type = '$type'"); $result = $conn->query($query); $row = $result->fetch_all(mysqli_assoc); } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="exercise.css"> <title>workout app</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>workout app</h1> <form action="" method="post" class="form-inline"> <select name="type" class="custom-select"> <option selected disabled>choose exercise</option> <option value="cardio">cardio</option> <option value="circuit">circuit</option> <option value="abs">abs</option> <option value="stretch">stretch</option> </select> <input type="submit" class="btn btn-primary"> </form> <button id="restart" class="btn btn-primary">restart</button> <button id="pause" class="btn btn-primary">pause</button> <button id="start" class="btn btn-primary">start</button> <div id="progress"> <div id="bar"></div> </div> <div id="info"></div> <?php if(isset($row)){ echo "<h2>".ucwords($type)."</h2>"; echo "<button type='button' id='begin' class='btn btn-primary'>begin</button><br>"; } ?> <div class="modal fade" id="mymodal" 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">exercise</h4> </div> <div class="modal-body"> <p id="name"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> </div> <script> $( "#begin" ).click(function() { var jqueryarray = <?php echo json_encode($row); ?>; $.each(jqueryarray, function(idx, obj){ $.each(obj, function(key, value){ if (key == 'name' || key == 'description') $("#name").append(key + ": " + value + "<br>"); $('#mymodal').modal('show'); }); }); }); </script> <script src="exercise.js"></script> </body> </html> the jquery works when appending json #name shown below. problem having modal not showing data.
<div class="modal-body"> <p id="name">name: standard crunch<br> description: arms behind head, interlocked thumbs support neck, chin off chest, eyes on ceiling, knees bent raise head , chest off floor<br> name: left side crunch<br> description: standard crunch knees laid way on right side<br> name: right side crunch<br> description: standard crunch knees laid way on left side<br> name: superman crunch<br> description: toe touches legs straight in air , body in l formation reach out arms straight touch toes<br> </p> </div> here variable after parsing json
var jqueryarray = [{"id":"22","name":"standard crunch","description":"arms behind head, interlocked thumbs support neck, chin off chest, eyes on ceiling, knees bent raise head , chest off floor","type":"abs","group":"1"},{"id":"23","name":"left side crunch","description":"standard crunch knees laid way on right side","type":"abs","group":"2"},{"id":"24","name":"right side crunch","description":"standard crunch knees laid way on left side","type":"abs","group":"3"},{"id":"25","name":"elbows knees","description":"crunch palms on head pulling head forward trying bring elbows knees legs crossed off ground parallel ground","type":"abs","group":"4"},{"id":"26","name":"superman crunch","description":"toe touches legs straight in air , body in l formation reach out arms straight touch toes","type":"abs","group":"5"},{"id":"27","name":"leg lifts","description":"hands under feet 6 inches off ground raise , lower never dropping below starting point","type":"abs","group":"6"},{"id":"28","name":"in , outs","description":"hands behind head, feet in leg lift position, raise head , chest off floor , keep there, pull knees in chest","type":"abs","group":"7"},{"id":"29","name":"hip rock","description":"hands behind head, feet together, legs bent forming diamond, , lift hips off ground while keeping upper body off floor","type":"abs","group":"8"},{"id":"30","name":"bicycle","description":"hands behind head, feet off ground, knees bent, bringing elbow cross body knee , alternating, kicking out bicycle","type":"abs","group":"9"},{"id":"31","name":"full body crunch","description":"elbows in air w palms ears, thrusting forward elbows end side raising upper body while extended legs have been pulled , knees tucked towards chest","type":"abs","group":"10"}]; adding image show empty modal-body: 
Comments
Post a Comment