Develop Reference

displaying value from database to html modal in php not working

I have a PHP page where I am displaying data according to the id fetched from the URL, the data is displayed fine, now I place of a field name called comment, I have given a button, which on click gives a modal. if I click the button the value should come according to the corresponding id in the modal, but when I click the button, the modal is coming blank, I have done the following code:
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1000;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 20%;
height: 40%
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<table class="table table-borderless table-striped table-earning">
<thead>
<tr>
<tr>
<th>S.NO</th>
<th>View</th>
<th>Edit</th>
<th>Full Name</th>
<th>Mobile</th>
<th>Comment</th>
<th>Space</th>
<th>Email</th>
<th>Enquiry Date</th>
</tr>
</tr>
</thead>
<?php
$ret=mysqli_query($con,"select * from enquiry where Space IS NOT NULL");
$cnt=1;
while ($row=mysqli_fetch_array($ret)) {
?>
<tr>
<td>
<?php echo $cnt;?>
</td>
<td><i class="fa fa-edit fa-1x"></i></td>
<td><i class="fa fa-edit fa-1x"></i></td>
<td>
<?php echo $row['name'];?>
</td>
<td>
<?php echo $row['phone'];?>
</td>
<td><input id="myBtn" type="button" value="Comment"></td>
<td>
<?php echo $row['Space'];?>
</td>
<td>
<?php echo $row['email'];?>
</td>
<td>
<?php echo $row['date'];?>
</td>
</tr>
<?php
$cnt=$cnt+1;
}?>
</table>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><!-- × --></span>
<div class="form-style-10">
Hi
<?php echo $row['name'];?>
</div>
</div>
</div>
i have tried closing the while loop after the modal, but then the only one values is displayed in my table, and the modal is displaying that values comment and some html code.
can anyone please tell me what could be wrong here, thanks in advance

please use jQuery a, ajax and bootstrap modal and try the following code
give a class to your comment button and get id as attribute of button
//your jquery function to trigger modal and load data to it
// get_details.php serve the data
$(".your_comment_button").click(function(e){
var modal = document.getElementById("myModal");
e.preventDefault();
var id = $(this).attr('enq_id');
$.ajax({
type:'GET',
url:'get_deatils.php?id='+id,
success:function(data){
$('#myModal').find('.modal-content').html(data);
$('#myModal').modal('show');
}
});
});
});
and your get_details.php looks like
<?php
$con = mysqli_connect("localhost","root","","yourdb");
$id=$_REQUEST['id'];
$enq = mysqli_query($con, "SELECT enquiry.* from enquiry Where id=$id");
$row = mysqli_fetch_array($enq);
?>
<div class="form-style-10">
Hi
<?php echo $row['name'];?>
</div>

How to insert radio buttons in alert box

I am generating a table based on user input. Finding the table cell index on click function. I am trying to include a alert with radio buttons. On click of cells alert will be generate and that alert box should have radio buttons. I tried this but something went wrong.
function CreateTable() {
var rowCtr;
var cellCtr;
var rowCnt;
var cellCnt;
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('Table');
table.setAttribute("contenteditable", "true");
table.border = '1';
table.id = 'myTable';
var tableBody = document.createElement('Tbody');
table.appendChild(tableBody);
rowCnt = document.getElementById('txtrows').value;
cellCnt = document.getElementById('txtcols').value;
for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
var tr = document.createElement('tr');
tableBody.appendChild(tr);
for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
var td = document.createElement('td');
td.width = '120';
td.appendChild(document.createTextNode("Click me," + rowCtr + +cellCtr));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
CellIndex();
}
function CellIndex() {
$(document).ready(function() {
$('#myTable').on('click', 'td', function() {
var columnIndex = $(this).parent().find('td').index(this);
var rowIndex = $(this).parent().parent().find('tr').index($(this).parent());
//alert('ColumnIndex' + " " + columnIndex + 'RowIndex' + rowIndex);
var popUpList = $('<input type="radio">Insert Before<br><input type="radio">Insert After');
alert('popuplist' + popUpList);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table contenteditable="true">
<tr>
<td>Row Count</td>
<td>Column Count</td>
<td></td>
</tr>
<tr>
<td><input type="text" id="txtrows" /></td>
<td><input type="text" id="txtcols" /></td>
<td><button onclick="CreateTable()">Create Table</button></td>
</tr>
</table>
<div id="myDynamicTable"></div>

An alert() is a graphical component generated and rendered by the browser (client) software. It's not part of the web page and is not capable of rendering HTML inside of it - only plain text.
You can, however get the result you want by building your own dialog out of HTML and CSS and keeping it hidden until needed. When that occurs, you can show it via JavaScript.
Here's an example:
let selectedColor = "";
// Get DOM references to elements we'll want to refer to multiple times
let dialog = document.getElementById("dialog");
let result = document.getElementById("result");
let mask = document.getElementById("mask");
// Set up event handlers for the buttons
document.getElementById("show").addEventListener("click", function(){
mask.classList.remove("hidden"); // Show the mask
dialog.classList.remove("hidden"); // Show the dialog
});
document.getElementById("hide").addEventListener("click", function(){
mask.classList.add("hidden"); // Hide the mask
dialog.classList.add("hidden"); // Hide the dialog
result.textContent = "You chose: " + selectedColor;
});
// Set up event listener on dialog for radio button clicks
dialog.addEventListener("click", function(event){
// If the source of the click was a radio button, capture its value
if(event.target.type === "radio"){
selectedColor = event.target.value;
}
});
.hidden { display:none; } /* used by the dialog by default */
/* When the dialog is shown, the mask will cover the main web page */
#mask {
position:absolute;
background-color:rgba(0,0,0,.25);
top:0;
left:0;
right:0;
bottom:0;
z-index:1; /* This layers the mask on top of the main web page content. */
}
/* Style the dialog and the elements in it as you wish */
#dialog {
position:absolute; /* So the dialog can be in its own layer and placed anywhere we want */
top:20%;
left:25%;
border:10px double #222;
background-color:aliceblue;
padding:10px;
width:50%;
height:125px;
text-align:center;
z-index:10; /* Make sure the dialog is in the top layer */
}
#dialog > h1 {
margin-top:0;
}
#dialog > footer {
margin-top:1.5em;
}
#result {
text-align:center;
font-weight:bold;
font-size:2em;
margin:2em;
}
<input type="button" value="Show Dialog" id="show">
<!-- This div will be as big as the entire page and it will be layered
in front of the main content, but under the dialog, creating a "modal" effect -->
<div id="mask" class="hidden"></div>
<div id="dialog" class="hidden">
<h1>Please pick a color</h1>
<div>
<label><input type="radio" name="color" value="red">Red</label>
<label><input type="radio" name="color" value="white">White</label>
<label><input type="radio" name="color" value="blue">Blue</label>
</div>
<footer>
<input type="button" value="Hide Dialog" id="hide">
</footer>
</div>
<div id="result"></div>

Natively, with the Window Object Methods, you only can:
Displays an alert box with a message and an OK button - Window alert() Method
Displays a dialog box with a message and an OK and a Cancel button - Window confirm() Method
Displays a dialog box with a message and an OK and a Cancel button - Window prompt() Method
HTML has to be used inside a Form into the body of the document.

simplePagination jQuery server side

How can I use the simplePagination.js jQuery plugin with server side? I have a lot of divs loading with my page (not a table) and I am paginating those 'divs'. But, there will be cases that I will get a lot of things to paginate (like 2500+) and my page gets slow. This is my code now:
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
And this is my page with all the divs loaded:
As you can see, I have a search option:
But everytime I search something, all the divs are reloaded, and the pagination is made again.
I want to know if its possible to change this code to not load all the content in client-side but something like if I select the content from server side. The divs are loaded by a SQL command, so, maybe I can use the functions of each page number to load each page correctly with only 20 itens and later I can do something about the search box.
EDIT
That is my html code (in php):
<html lang="pt-br">
<head>
<link rel="stylesheet" href="assets/css/simplePagination.css">
<script src="assets/js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(function(){
var keywordInput = document.querySelector("input[name='keyword']");
function performMark() {
$(".content.panel").show();
// Read the keyword
var keyword = keywordInput.value;
$('.content').removeClass('hidden');
$('.content:not(:contains(' + keyword + '))').addClass('hidden');
/* Tentar refazer paginação */
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.slice(perPage).hide();
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
};
// Listen to input and option changes
keywordInput.addEventListener("input", performMark);
});
</script>
<script type="text/javascript">
$(function() {
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.show();
items.slice(perPage).hide();
// Now setup the pagination using the `.pagination-page` div.
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
function checkFragment() {
// If there's no hash, treat it like page 1.
var hash = window.location.hash || "#page-1";
// We'll use a regular expression to check the hash string.
hash = hash.match(/^#page-(\d+)$/);
if(hash) {
// The `selectPage` function is described in the documentation.
// We've captured the page number in a regex group: `(\d+)`.
$("#pagination").pagination("selectPage", parseInt(hash[1]));
}
};
// We'll call this function whenever back/forward is pressed...
$(window).bind("popstate", checkFragment);
// ... and we'll also call it when the page has loaded
// (which is right now).
checkFragment();
});
</script>
<!--link href="assets/css/table.css" rel="stylesheet"-->
</head>
<body onload="myFunction()">
<div class="container">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div class="input-group input-group-lg" style="margin-bottom: 15px;">
<span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1" style="position: initial;"></span>
<input name="keyword" type="text" class="form-control" placeholder="Pesquisar" aria-describedby="sizing-addon1" onload="performMark()">
</div>
<div id="pagination" style="margin-bottom: 5px;"></div>
<div class='row centered'>
<?php
$sql = "SELECT * FROM USU_TDriCad";
$stid = oci_parse($conn, $sql);
oci_execute($stid);
while (($row = oci_fetch_array($stid, OCI_BOTH)) != false) {
$CodDri = 'test';
$CodDri = (isset($row['USU_CODDRI']) ? $row['USU_CODDRI'] : '');
echo '<div class="content warning">
<div class="content panel panel-warning">
<div class="panel-heading highlight">
<h3 class="panel-title">' . $StrLoc . '</h3>
</div>
<div class="panel-body warning highlight" style="padding: 2px">
' . $CodDri . '
</div>
<div class="panel-body warning highlight" style="padding: 2px; font-size: 16px">
<div class="col-xs-6">1000</div>
<div class="col-xs-6">#008</div>
</div>
</div>
</div>';
}
oci_free_statement($stid);
?>
</div>
</div>
</div>
</body>
</html>
Thanks

I will offer my solution.
var
search = $("#search"),
control = $("#pagination"),
table = $("#table tbody tr"),
pageParts = null,
perPage = 2;
search.on("keyup", function() {
var value = $(this).val().toLowerCase();
table.filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
updPagination();
});
control.pagination({
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNum) {
var start = perPage * (pageNum - 1);
var end = start + perPage;
if (pageParts) {
pageParts.hide()
.slice(start, end).show();
}
}
});
function updPagination() {
pageParts = table.filter(function() { return $(this).css("display") !== 'none' });
pageParts.slice(perPage).hide();
control.pagination('selectPage', 1);
control.pagination('updateItems', pageParts.length);
}
updPagination();
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
td,
th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em
}
td:first-child,
th:first-child {
border-left-width: 0;
}
thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/simplePagination.js/1.6/simplePagination.min.css">
<input id="search" type="text" placeholder="Search for..">
<table id="table">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tbody>
<tr>
<td>1</td>
<td>test 1</td>
</tr>
<tr>
<td>2</td>
<td>test 2</td>
</tr>
<tr>
<td>3</td>
<td>test 3</td>
</tr>
<tr>
<td>4</td>
<td>test 4</td>
</tr>
<tr>
<td>5</td>
<td>test 5</td>
</tr>
</tbody>
</table>
<div id="pagination"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/simplePagination.js/1.6/jquery.simplePagination.min.js"></script>

Next button only brings the first image and stops

I have been trying to create a next and back buttons that go through the images one by one that are in the table.
But the next button, it only brings the first image and stops.
How can the same button "next" have the function of going through all the images?
<p id = "slider"></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
var div = document.getElementById('galDiv');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling }
}
</script>
How can also create a back button ?

If you are trying to create a facebook like image viewer, you shouldn't use table element.
In order to create such thing you should create a div with container fixed side ,within this div you should have a div with floating images and then your button should change the right position of the inner div.
Or you could use a jquery library such as http://www.jacklmoore.com/colorbox

Your code does nothing. The next sibling to #galDiv is the <button>.
Is this what you wanted?
document.getElementById("nxt").onclick = myFunction;
function myFunction() {
var picture = [
"firstPicture",
"secondPicture",
"thirdPicture",
"fourthPicture"
];
var place = {
"firstPicture": 0,
"secondPicture": 1,
"thirdPicture": 2,
"fourthPicture": 3
};
var table = document.querySelector('table');
if (!table.className) {
table.className = "firstPicture";
}
var nextPicture = (place[table.className] + 1) % 4;
table.className = picture[nextPicture];
}
img[src="gallery/a.jpg"] {
border: 5px solid red;
}
img[src="gallery/k.jpg"] {
border: 5px solid green;
}
img[src="gallery/2.jpg"] {
border: 5px solid blue;
}
img[src="gallery/3.jpg"] {
border: 5px solid black;
}
table {
border-collapse: collapse;
position: absolute;
padding: none;
border: none;
}
#galDiv {
width: 113px;
height: 113px;
overflow: hidden;
position: relative;
}
.firstPicture {
left: 0;
}
.secondPicture {
left: -112px;
}
.thirdPicture {
left: -224px;
}
.fourthPicture {
left: -336px;
}
<p id = "slider"></p>
<div id="galDiv">
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>

I added the curimg attribute to the slider. Read the script for yourself. You'll need to add in modulus arithmetic to round around the table entries. As for the 'prev' function. Figure out the same thing with a -1 when selecting the tdnode.
Don't forget to set the curimg attribute after you append the child.
Good luck!
<p id = "slider" curimg='1'></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
//Get the slider, parse the int of the 'curimg' attribute
cid = document.getElementById('slider');
current_image = parseInt( cid.getAttribute('curimg') );
//Get the td of that id+1
tdnode = document.getElementById(current_image + 1);
//Clone the image childNode into the slider.
cid.appendChild( td.childNodes[0].cloneNode() );
}
</script>

javascript/php simple drop down menu logout

to save space, I would like to consolidate the username and logut buttons at the top of web template into one link. The username would be visible and when you hover over it as in stack overflow or click as in gmail or fb, you have option to logout or do other account related things. Ideally, would like to do this in css or javascript without jquery overhead.
Can anyone recommend simple javascript or other technique as I am very inexperienced in javascript. Don't need complicated full blown drop down menu. It should be something like below, but below is unpredictable...shows menu when page loads etc. Thx.
<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMenu()" >username</td>
</tr>
</table>
<div id="box1" onmouseout="hideMenu()">
Logout<br>
</div>
</body>
</html>

UPDATE- this should fix the "jumping" problem:
<html>
<head>
<style type="text/css">
.username {
width: 100px;
border: 1px solid #ff0000;
padding: 3px;
text-align: center;
position: relative;
display: inline-block;
}
#box1 {
display: none;
text-align: center;
position: absolute;
background-color: #ccc;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=3 align="left">
<img src=":">
</td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
<div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
<span id="box1">
Logout
</span>
</div>
</td>
</tr>
<tr>
<td colspan=9>
<hr color="red">
</td>
</tr>
</table>
</body>
</html>
The problem is that absolute positioning doesn't work the same inside of a span than as it does a div. So I had to change the "username" span to a div and use absolute position for the "box1" span. You could even change the "box1" span to a div as well so it occupies the whole width possible of the "username" div. Let me know how this one goes!

Here is the version where it jumps up. If you put position: absolute; in the style tag the menu extends one more cell to the right past the other columns...
.username {
}
#box1 {
display: none;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5
Menu6 Menu7 <span class="username" onmouseover="showMenu();"
onmouseout="hideMenu();">Username<span id="box1">
Logout
</span>
</span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>
</body>
</html>