Calling PHP variable in javascript -
i want call variable (id) php in html/ javascript id of row db sent page, anchor, rows details can viewed in table.
var eventcontent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' + '<span><h5>date: </h5>' + '<p class="event-date">' + point.edate + '</p></span>' + '<p class="event-description">'+ point.description +'</p>' + '<input type="button" id="view-event" class="btn btn-info btn-sm" onclick="showdetails();" value="view event" />'+ '<a href="details.php<?php echo $id; ?>" class="btn btn-danger btn-sm">remove event</a>' + '</div>'); so example, there number of different events saved , displayed, , when view button clicked - opens new page event id shown in table.
update: tried creating details list in php/html:
$result = mysqli_query($con,"select * events"); while($row = mysqli_fetch_array($result)) { echo "<div class='event-details' id='event-details' style='display: none'>"; echo "<h3>event details</h3>"; echo "<table class='table'>"; echo "<tr><th>event name: </th><td>" . $row['name'] . "</td></tr>"; echo "<tr><th>event date: </th><td>" . $row['edate'] . "</td></tr>"; echo "<tr><th>event type: </th><td>" . $row['category'] . "</td></tr>"; echo "<tr><th>event details: </th><td>" . $row['description'] . "</td></tr>"; echo"</table>"; echo "<td><a href='details.php?id=".$row['id']."' class='btn btn-warning btn-sm'>view</a></td></div>"; } it displays in javascript, using clone():
var eventlist = $("#event-details").clone().show(); google.maps.event.addlistener(event_markers[i], "click", function () { infowindow.setcontent(eventlist[0]); infowindow.open(map, event_markers[i]); map.setcenter(marker.getposition()); map.setzoom(10); }); now way sends id input, sends same id each item - there 5 rows in db id's 6 10, when page loads, sends first id (6) of events, rather giving each 1 own unique id db.
your code go way:
var id = <?php echo $id; ?>; var eventcontent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' + '<span><h5>date: </h5>' + '<p class="event-date">' + point.edate + '</p></span>' + '<p class="event-description">'+ point.description +'</p>' + '<input type="button" id="view-event" class="btn btn-info btn-sm" onclick="showdetails();" value="view event" />'+ '<a href="details.php?id=' + id + '" class="btn btn-danger btn-sm">remove event</a>' + '</div>'); yet find lot cleaner:
<div class="event-info"> <h4 class="event-name"></h4> <hr> <span> <h5>date: </h5> <p class="event-date"></p> </span> <p class="event-description"></p> <input type="button" id="view-event" class="btn btn-info btn-sm" onclick="showdetails();" value="view event" /> <a class="btn btn-danger btn-sm">remove event</a> </div> // below javascript example manipulations var id = <?php echo $id; ?>; $('h4.event-name').html(point.name); $('p.event-date').html(point.edate); $('p.event-description').html(point.description); $('p.event-description').html(point.description); $('div.event-info a.btn').attr('href', 'details.php?id='+id); with latter, can have container event data (if, example, have display more of them in same page), produce list of ids database. steps be:
- have div prepared (like empty template)
- get list of events (as array, or better, json)
- pass list php javascript js variable (or maybe ajax call)
- iterate through array js
- for each of them, clone container , assign unique id it
- for each container you'd have modified version of javascript code (see below)
so won't have worry readibility or reusability.
var id = point.id; $('div#' + id + ' h4.event-name').html(point.name); $('div#' + id + ' p.event-date').html(point.edate); $('div#' + id + ' p.event-description').html(point.description); $('div#' + id + ' p.event-description').html(point.description); $('div#' + id + ' div.event-info a.btn').attr('href', 'details.php?id='+point.id); as always, further improvements , suggestions more welcome.
Comments
Post a Comment