I have a webpage with many sites which contains informations about items. I get the informations out of a mysql database. Now I need tooltips out of these informations.
I´m searching a solution to get the "echo" in a tooltip. It shouldn´t be much code, because I want to use the tooltips very often. The question is, woulnd´t it be easier to get the whole <div class="itembox"> in a tooltip?
Here is the code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="container">
<div class="itembox">
<?php
$con = mysqli_connect("localhost","XXXXX","XXXXX","XXXXXXX");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
/* change character set to utf8 */
if (!mysqli_set_charset($con, "utf8")) {
printf("Error loading character set utf8: %s\n", mysqli_error($con));
exit();
} else {
}
$sql = "SELECT * FROM TEST WHERE id=8778";
$result = mysqli_query($con,$sql)or die(mysqli_error());
echo "<table>";
while($row = mysqli_fetch_array($result)) {
$name= $row['name'];
$itemLevel= $row['itemLevel'];
echo
"<tr><td class='nameepisch'>".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$itemLevel."</td></tr>
</tr>";
}
echo "</table>";
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
mysqli_close($con);
?>
</div>
</div>
The simplest way for html tooltips is assigne a proper value to the title attribute of a tag eg:
if $myTooTiptext is the text you want show could be somethings like this
echo
"<tr><td class='nameepisch' title='".$myToolTiptext .">".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$id[$itemLevel]."</td></tr>
When you move over the td for name the tooltip text is showed
In case you're using Bootstrap, you can do like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
And, don't forget to add Bootstrap CSS and JS inside the page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I've been testing and playing around as part of personal practice, however, I got stuck in the below point where I want to add a list of items via javascript and upon submission, I want to verify and then store the added list. However, once I submit I get an error Unidentified index as if the value is not submitted as checked by isset function and it's always returning empty. After further looking in StackOverflow, I noticed some are referring to the HTML structure; hence, I minimized the HTML to look like the below :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/libs/css/customeStyle.css">
<link rel="stylesheet" href="assets/libs/css/style.css">
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<?php //include("navBar.php"); ?>
<!-- ============================================================== -->
<!-- left sidebar -->
<!-- ============================================================== -->
<?php //include("SlideBar.php"); ?>
<!-- ============================================================== -->
<!-- end left sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<?php
if(isset($_POST["submit"])){
//$test = $_POST["patName"];
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
}
?>
<form action="#" method="POST">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
<div id="medListContainer" class="form-group">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<h5 class="card-header">List of Medication</h5>
<div class="card-body">
<div class="list-group" id="pillsList">
<button class="list-group-item list-group-item-action" value="noor">Dapibus ac facilisis in</button>
<button class="list-group-item list-group-item-action" value="btn2">Morbi leo risus</button>
<button class="list-group-item list-group-item-action" value="btn3">Porta ac consectetur ac</button>
</div>
</div>
</div>
</div>
<input class="btn btn-success" type="submit" name="submit" value="Save">
</form>
<!-- Optional JavaScript -->
<!-- jquery 3.3.1 -->
<script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<!-- bootstap bundle js -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- slimscroll js -->
<script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<!-- main js -->
<script src="assets/libs/js/main-js.js"></script>
<script>
var indexCounter=0;
$('#pillsList').on('click', function (e) {
e.preventDefault();
var targetList = document.getElementById("medListContainer");
var medValue= e.target.value;
if (indexCounter==10) {
//code
alert("you've exceeded your limit, please generate new ");
}else{
addMedList(medValue,targetList);
}
});
function addMedList(BtnValue,targetList) {
//function to place the list of selected medicaition
var btn = document.createElement("INPUT");
btn.innerHTML= BtnValue;
btn.className = "list-group-item list-group-item-action";
btn.setAttribute("value", BtnValue);
btn.setAttribute("id", 'medAdded' + indexCounter);
btn.setAttribute("name", 'medAdded' + indexCounter);
indexCounter++;
btn.setAttribute("type", "button");
targetList.appendChild(btn);
}
</script>
</body>
</html>
You've written:
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
The else block is executed when $_POST["medAdded0"] is not set. So it makes no sense to try to echo it there. Get rid of the line
echo $_POST["medAdded0"];
Please help,
I have problem with a data table. The data table does not work when I use this but it's working when it's outside of this. Please help:
<div id="content">
<?php
$pages_dir = 'pages/admin';
if(!empty($_GET['p'])){
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if(in_array($p.'.php', $pages)){
include($pages_dir.'/'.$p.'.php');
}
else {
echo 'Page Not Found :(';
}
}
else {include($pages_dir.'/profile.php');}
?>
</div>
Then the other full script page, in this page data table is not working, but when I try this outside code before, it works.
<?php
$connect = mysqli_connect("localhost", "root", "", "keep");
$query ="SELECT * FROM barang ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Nama</td>
<td>Kategori</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Supplier</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["nama"].'</td>
<td>'.$row["kategori"].'</td>
<td>'.$row["harga"].'</td>
<td>'.$row["jumlah"].'</td>
<td>'.$row["supplier"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Please help, I'm new to PHP programming. Sorry for the bad English.
I have the following Script tags in may header.php file.
">
<!-- Bootstrap Core Js -->
<script src="<?php echo base_url('resource/temp/plugins/bootstrap/js/bootstrap.js'); ?>"></script>
<!-- Select Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/bootstrap-select/js/bootstrap-select.js'); ?>"></script>
<!-- Slimscroll Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/jquery-slimscroll/jquery.slimscroll.js'); ?>"></script>
<!-- Waves Effect Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/node-waves/waves.js'); ?>"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/jquery-countto/jquery.countTo.js'); ?>"></script>
<!-- Custom Js -->
<script src="<?php echo base_url('resource/temp/js/admin.js'); ?>"></script>
<!-- Demo Js -->
<script src="<?php echo base_url('resource/temp/js/demo.js'); ?>"></script>
and these files are again loaded in the footer file as well along with some other .js files. With all the documents, I cannot call ajax function in one of my pages to populate an option list.
I want to populate a select option list when I click on the other option select field. But its not working. Please help. I tried changing latest jquery.min.js files as well. The min.js file version used in the template is 1.12.4.
Below is my Page where ajax call is used.
<div class="form-group form-float">
<div class="form-line">
<label>Union</label>
<select class="form-control union" name="gunion" id="union" required >
<option value="">-- Please Select--</option>
<?php
foreach($union as $row)
{
?>
<option value="<?php echo $row->u_name;?>"><?php echo $row->u_name;?></option>
<?php
}
?>
</select>
<span class="text-danger"> <?php echo form_error('tonque'); ?></span>
</div>
<div class="form-line">
<label>Sakha</label>
<select class="form-control" name="gshaka" id="sakha" required>
<option value="">---Please Select--</option>
</select>
<span class="text-danger"> <?php echo form_error('tonque'); ?></span>
</div>
and the Script:
<script type="javascript">
$(document).ready(function(){
$('#union').on('change',function(){
var unionID = $(this).val();
console.log(unionID);
if(unionID){
$.ajax({
type:'POST',
url:'getsakha/'+unionID,
cache:false,
success:function(html){
$('#sakha').html(html);
}
});
}else{
$('#sakha').html('<option value="">Select Union first</option>');
}
});
});
</script>
Remove javascript from script tag of type attribute
<script type="javascript">
add type="text/javascript" in your script tag
<script type="text/javascript">
OR either remove type attribute
<script>
This happens because there are not type attribute of javascript but there is text/javascript. If you are not writing type attribute then it will consider as a javascript
I hope this may help you.
remove repeated script files and load all script files in the footer.
or you can use https://api.jquery.com/jquery.noconflict/
I have this PHP and jQuery code which works in coalition with my database. This is the only page. The code runs and gives me a row of data, but when I click the collapse button it only works for the first row. Even if I click any other row, that action affects only the first row and all the other rows collapse, which is useless.
How do I make it so that all rows work? It's like the button is doubled and only works for the first row.
<script>
$(function() {
$('div#dl_box').on('show', function(e) {
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
});
$('div#dl_box').on('hidden', function(e) {
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
});
});
$(document).ready(function() {});
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
sample for u.
<!DOCTYPE html>
<html>
<head>
<style>
.default {
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
}
.expanded {
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
}
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5) {
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
}
// above return in html.
// <div class="default" id="ChangeThisId_1">
// CLick me 1
// </div>
// <div class="default" id="ChangeThisId_2">
// Click me 2
// and so on till ...5
?>
</body>
<script>
function changeHeight(x){
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
}
</script>
</html>
This is using css, html(+php to create row), and native javascript.
The idea is to assign an unique for each row.
others are quite self explanatory, hope this helps.
to anyone coming in here in search of sql data display with accordian collapse. here Qid is my tables auto incremented value. AS_Questions is my table name. db is my database name.
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0) {
while ($record = mysqli_fetch_assoc($fetch)) {
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have tested this code in http://jsfiddle.net/gLpHY/92/, in there it runs fine but when I run it in my computer it does not work. (I have tested two versions of this code once using just html and jquery and the next time I use them with php, both of them did not work for me.)
<html>
<head>
<link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
<link rel="stylesheet" href="<?php echo base_url()?>css/tableCss.css">
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery-1.12.0.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/projs.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery.validate.min.js"></script>
<title>Questions</title>
</head>
<body>
<div class="frm"><?php $a=array("id"=>"myForm","name"=>"myForm");
echo form_open('site/search',$a); ?>
<div>
<?php echo form_label('Question:','question'); ?>
<?php echo form_input('question', set_value('question', #$_GET['question']), 'id="question"', 'name="question"'); ?>
</div>
<div>
<?php echo form_label('Category:','category'); ?>
<?php echo form_dropdown('category', $category_options, set_value('category', #$_GET['category']), 'id="category"', 'name="category"'); ?>
</div>
<div>
<?php echo form_label('Score:','score'); ?>
<?php echo form_dropdown('score_comparison', array('gt' => '>', 'gte' =>'>=' , 'eq' => '=', 'lt' => '<', 'lte' => '<='), set_value('score_comparison', #$_GET['score_comparison']), 'id="score_comparison"', 'name="score_comparison"'); ?>
<?php echo form_input('score', set_value('score', #$_GET['score']), 'id="score"', 'name="score"'; ?>
</div>
<div>
<?php echo form_submit('action','');?>
</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myForm").validate({
rules: {
question: {
required: true
}
},
messages: {
question:{
required: "Please enter some text"
}
}
});
});
</script>
</body>
</html>
First off all, replace you <?php echo base_url()?> with just /. You can use relative path for resources from your site. Path should be like this: scr="/js/jquery-1.12.0.js" for all you scripts.
For second replace your string $().ready(function () { with $(function () {
Hope this helps.
Try typing in the full URL instead of using <?php echo base_url()?> as I have seen that cause problems with printing the URL twice and then the page obviously not being able to find it. Also, the way you have written .ready() is not recommended. You might want to consider adding document inside the parenthesis like this:
$(document).ready(function(){});
.ready() source