how to fill a Bootstrap popover through PHP - javascript

I know that this question has been asked before,I have read the answer,implemented it,but I am facing one small problem.
In the PHP file I am trying to make an anchor tag and then display it in the popover,but instead making it clickable,the whole content(along with the anchor tag) is displayed.
Also,once the icon is clicked,it sticks around and doesn't go away even after clicking on it or anywhere else on the page.
Here is the code:
HTML file:
<li style="margin-left: 15px;">
<a href="#" data-placement="bottom" title="notifications" data-poload="notification_list.php" id="id-wala">
<img src="assets/ring.png" width="25" height="25" data-toggle="tooltip" data-placement="bottom" title="notifications">
</a>
</li>
AJAX code
$('*[data-poload]').click(function() {
console.log('Hey');
var e=$(this);
e.off('click');
e.unbind('click')
$.get(e.data('poload'),function(d) {
console.log(d);
e.popover({content: d}).popover('show');
});
});
PHP file
<?php
#The code for connecting to the database removed for clarity.
$sql1 = "SELECT PID from post where UID = '$a'";
$result1 = mysqli_query($conn,$sql1);
$end_result = '';
while($row1 = mysqli_fetch_assoc($result1)) {
$temp = $row1["PID"];
$sql = "SELECT * from comment where status = 'unread' and PID = '$temp' ";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$end_result='<a href ="#" >'.'Notification from '.$row["UID"].'</a>';
echo $end_result;
echo '<br/>';
}
}
}
$conn->close();
?>
The problem is that the echo $end_result is printing <a href ="#" >Notification from 89</a> instead of Notification from 89 and making it clickable.
Please provide some suggestions on how to fix this problem.

The issue is because by default the html property on the popover is false. This means any HTML you attempt to place inside the popover content will be removed. To change this behaviour you need to set html: true.
You'll also need to use trigger: 'manual' and use the toggle option to hide/show the popover on successive clicks. Try this:
e.popover({
html: true,
trigger: 'manual',
content: d
}).popover('toggle');
Working example
Bootstrap Popover documentation

Related

PHP Delete User Data From Table On Button Click

I have a code that works fine except one thing. When you click onto the Delete button, a modal box appers and it shows 2 buttons. When you click onto the OK button it should delete that user's data which you clicked. But this is deletes the user who has the lowest ID. But if I removes the modal box opening function and simpy just put a href='delete.php?id=".$roww['id']."' it works fine. Any idea how to solve this?
Code from the index.php:
include "dbConn.php"; // Using database connection file here
$records = mysqli_query($db,"select * from accounts"); // fetch data from database
while($data = mysqli_fetch_array($records)) {}
$conn = mysqli_connect("localhost", "root", "", "phplogin");
if ($conn-> connect_error) {
die("Connection failed:". $conn-> connect_error);
}
$ssql = "SELECT * FROM accounts";
$result = $conn-> query($ssql);
if ($result-> num_rows > 0) {
while ($roww = $result-> fetch_assoc()) {
$id = $roww['id'];
echo "
<span>".$roww['username']."</span>
<span>".$roww['email']."</span>
<a onclick='pop()'>Delete</a>
// Delete modal
<div id='box'>
<img src='/assets/images/svg/rf-alert.svg' width='64px'>
<h1>Attention!</h1>
<p>You are going to delete this user permanently.</p>
<a class='close' href='delete.php?id=".$roww['id']."' title='".$roww['id']."'>Delete</a> // This button should delete the data from the MySQL table
<a class='close' onclick='pop()'>Cancel</a>
</div>
";
} else { echo "0 result";}
}
$conn-> close();
<div id='box'>
All modals will have the same ID, may it be related to opening the first modal always? Try with something like:
<div id='box".$roww['id']."'>
Also you'll have to edit the pop() function to something like pop(id);
A better option would be create the modal dinamically.

What is the most efficient way to use sidebar menu?

So if I have to make a sidebar menu like schools websites, in which active clicked link is highlighted after the page loads. It uses individual pages like
<a target="_top" href="default.asp">HTML HOME</a>
<a target="_top" href="html_intro.asp">HTML Introduction</a>
<a target="_top" href="html_editors.asp">HTML Editors</a>
<a target="_top" href="html_basic.asp">HTML Basic</a>
<a target="_top" href="html_elements.asp">HTML Elements</a>
But the one I built on my own is created with PHP so what happens in that one is the title or name of menu item is changed to lowercase and saved in database in same row called class which is used for active link highlighting. So what happens when sidebar link is clicked is only content of summary div's content
(which is right to the sidebar) is changed while sidebar and navigation bar stays same. So it stays on the same page and retrieves data from database and puts in summary div.
<body class='noPadding'>
<div class='bigNav'> <!-- top navbar -->
<img src="images/logo2.png"/>
</div>
<?php
if(isset($_GET['subject'])){
$subject=$_GET['subject'];
?>
<div class='container'>
<div class='leftLayout' style='padding-top:70px;background-color:#EBEBEB'>
<ul class="fullFit">
<?php
$query="SELECT * FROM `study` WHERE `subject`='$subject'";
$run=mysqli_query($conn,$query);
while($row=mysqli_fetch_array($run)){
$topic=$row['topic'];
$class=$row['class']; ?>
<li class="<?php echo $class?>">
<a href='<?php echo $sitename ?>/web.php?subject=<?php echo $subject?>&topic=<?php echo $class?>'>
<?php echo $topic?>
</a>
</li>
<?php } ?>
</ul>
</div>
<?php
if(isset($_GET['topic'])) {
$active_id=$_GET['topic'];
$topic=$_GET['topic'];
$query="SELECT summary FROM `study` WHERE `class`='$active_id'";
$run=mysqli_query($conn,$query);
$row=mysqli_fetch_array($run);
$summary=$row[0];
?>
<div class='summary'> <?php echo $summary ?> </div>
<?php } ?>
</div>
<script>
$(document).ready(function(){
$(".<?php echo $active_id ?>").addClass("current");
});
</script>
<?php } ?>
</body>
And also if I have to make individual pages instead like many websites including W3Schools does, do I have to create a new file each time and include navigation bar and sidebar(which are supposed to stay same on every link) in each file?
How do they manage it?
I hope this is not too much of a departure from your current structure.
I don't intend to lead you down a rabbit hole.
That being said, it sounds like you could code everything into a single PHP file. Note that this is just one of many methods, highly dependent the scope of your project and individual coding style.
Databases
subject
`id`
`name`
topic
`id`
`subject_id`
`name`
`summary`
PHP
<?php
// define database functions
function getAllSubjects($conn) {
$sql="SELECT * FROM `subject` WHERE 1;";
$q=$conn->query($sql);
return $q;
}
function getSubject($conn,$subject_id=false) {
$r=false;
if (is_numeric($subject_id)) {
$sql = "SELECT * FROM `subject` WHERE `id`=?;";
$q = $conn->prepare($sql);
$q->bind_param('i',$subject_id);
$q->execute();
$r=$q->fetch_assoc();
}
return $r;
}
function getSubjectTopics($conn,$subject_id=false) {
$q=false;
if (is_numeric($subject_id)) {
$sql = "SELECT * FROM `topic` WHERE `subject_id`=?;";
$q = $conn->prepare($sql);
$q->bind_param('i',$subject_id);
$q->execute();
}
return $q;
}
function getTopic($conn,$topic_id=false) {
$r=false;
if (is_numeric($topic_id)) {
$sql = "SELECT * FROM `topic` WHERE `id`=?;";
$q = $conn->prepare($sql);
$q->bind_param('i',$topic_id);
$q->execute();
$r=$q->fetch_assoc();
}
return $r;
}
// get URL parameters
$subject_id = !empty($_GET['s']) && is_numeric($_GET['s'])
? $_GET['s']
: false;
$topic_id = !empty($_GET['t']) && is_numeric($_GET['t'])
? $_GET['t']
: false;
// fetch all subjects from database
$subjectsQ=getAllSubjects($conn);
// fetch current subject
$thisSubject = $subject_id
? getSubject($conn,$subject_id)
: false;
// fetch current subject topics
$thisSubjectTopicsQ = !empty($thisSubject)
? getSubjectTopics($conn,$subject_id)
: false;
// fetch current topic
$thisTopic = $topic_id
? getTopic($conn,$topic_id)
: false;
// display subject navigation
while($subject = $subjectsQ->fetch_assoc()){
// determine if this subject is selected
$sel = !empty($thisSubject) && $thisSubject['id']==$subject['id']
? true
: false;
// define the URL
$url = '?s='.$subject['id'];
// display nav item for this subject
echo '<a href="' . $url . '"'
. ($sel?' class="sel"' : '')
. '>' . $subject['name']
. '</a>';
}
// if there are subject topics to display...
if ($thisSubjectTopicsQ && $thisSubjectTopicsQ->num_rows > 0) {
// loop through this subject's topics
while($topic=$thisSubjectTopicsQ->fetch_assoc()){
// determine if this topic is selected
$sel = !empty($thisTopic) && $thisTopic['id']==$topic['id']
? true
: false;
// define the URL
$url = '?s='.$thisSubject['id'].'&t='.$topic['id'];
// display nav item for this topic
// (alternate way to display the link)
?><a href="<?=$url?>"<?=$sel?' class="selected"':''?>><?php
echo $topic['name'];
?></a><?php
}
}
// if there is a topic to display
if (!empty($thisTopic)) {
// display topic summary
echo $thisTopic['summary'];
}
That's a basic example. Granted, it doesn't include any of the HTML structure.
It's also possible to join the two tables so that you don't need to do so much fetching. For example, fetching a topic could also return its subject:
$sql="SELECT s.`id` AS `subject_id,
s.`name` AS `subject_name`,
t.`id` AS `topic_id,
t.`name` AS `topic_name`,
t.`summary` AS `topic_summary`
FROM `topic` t
LEFT JOIN `subject` s ON (s.`id`=t.`subject_id`)
WHERE t.`id`=?";

Changing style of all same class name of elements using javascript

I got this error. And I can't find what was wrong with it. I am using PHP and javascript.
I have a hidden iframe below my code:
<iframe id="hidden_form_submitter" name="hidden_form_submitter" style="width:100%;height:1px;visibility:hidden"></iframe>
And I have this line of code, an action button in which the id of a row will send as URL parameter:
<tr bgcolor="#d1ffcf" class="row-<?=$transaction['id']?>">
<td>
<a class="done-btn" data-confirm="Are you sure?" href="?action=change&status=done&transact_id=<?=$transaction['id']?>" target='hidden_form_submitter' title="Click if matched!"> Done</a>
</td>
</tr>
Then lastly I have this code on top to update the row in my database:
<?
if($_GET['action'] == 'change'){
//update query here
echo "<script>window.parent.document.getElementsByClassName('row-{$get['id']}').style.backgroundColor='green';</script>";
exit;
}
?>
No problem on the updating side in my server.
The problem is the JavaScript wherein I want to change the bgcolor of all same class without reloading the whole page.
UPDATE: Cannot change the background of every class. Example, I have this parameter to be send. ?action=change&status=done&transact_id=1608
So all element with class row-1608 should change the background color or change something style.
Try changing this:
echo "<script>window.parent.document.getElementsByClassName('row-{$get['id']}').style.backgroundColor='green';'</script>";
To this:
echo "<script>";
echo "var allRows = window.parent.document.getElementsByClassName('row-{$get['id']}');";
echo "for (var i = 0; i < allRows.length; i++) {";
echo " allRows[i].style.backgroundColor = 'green';";
echo "}";
echo "</script>";
You need to iterate allRows and set the backgroundColor on each element.
(Inspired by this example)

Change of div in the same page without refresh

In one of my pages, I have an <a> tag. When I click it, I am passing the variable as a GET parameter and retrieving it in the same page and displaying the details.
The code to get the parameters:
if(isset($_GET['CatId']))
{
$CatId= $_GET['CatId'];
}
else $CatId=0;
if(isset($_GET['MainProductId']))
{
$MainProductId= $_GET['MainProductId'];
$FilterAllProductQuery ="WHERE Product.MainProductId = '$MainProductId'";
$FilterProductQuery = "AND Product.MainProductId = '$MainProductId'";
}
else
{
$MainProductId=0;
$FilterAllProductQuery="";
$FilterProductQuery="";
}
The <a> tag:
<a href='Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>' ><?php echo $row["MainProdName"] ?></a>
The details to be displayed:
if($CatId == 0)
{$sql = "SELECT *,Product.Id AS ProdId, Product.Name as ProdName FROM Product $FilterAllProductQuery ";}
else
{$sql = "SELECT * ,Product.Id AS ProdId, Product.Name as ProdName FROM Product INNER JOIN MainProduct ON MainProduct.Id = Product.MainProductId
INNER JOIN Category ON Category.Id = MainProduct.CategoryId WHERE Category.Id = '$CatId' $FilterProductQuery ";}
$result1 = $dbcon->query($sql);
if ($result1->num_rows > 0) {
while ($row = $result1->fetch_assoc()) {
$id = $row["ProdId"];
// $image=$row["ImagePath1"];
$qty = $row["Quantity"];
?>
<li class="col-lg-4">
<div class="product-box">
<span class="sale_tag"></span>
<div class="row">
<img src='themes/images/<?php echo $row["ImagePath1"]; ?>' height='200' width='250'> </a></div></div></li>
Now the code is working fine, but what's happening is that when I click the <a> tag, as I am passing the get parameters, the page is refreshing. As all the code are on the same page, I don't want the page to be refreshed. For that, I need to use Ajax request. How can I do that?
I would make an onclick() event on the a tag like so:
<?php echo '<a c_id="'.$CatId.'" MainProductId="'.$id.'" onclick="sendProduct()">'.$row["MainProdName"].'</a>';
Afterwards i would in a .js file write a simple function called sendProduct() and inside i would do an ajax request to a page named ex: insertproduct.php, get the information back and Insertproduct.php would process the data and you could use .html() or .append() to assign the data to the div showing the data with a normal id.
The c_id, MainProductId are custom attributes you could recieve in the .js file as $("#youraTag").attr("c_id");
There's a really good guide here on basic ajax: https://www.youtube.com/watch?v=_XBeGcczFJo&list=PLQj6bHfDUS-b5EXUbHVQ21N_2Vli39w0k&index=3&t=1023s
First you have to remove the href of the link and give it an id.
<a id='link'>
<?php echo $row["MainProdName"] ?>
</a>
Then you put this jQuery into your page. Note, you need to have a div in which you are going to put in all your obtained results. I reffered to this div in the code as #mydiv.
$("#link").click(function(){
$("#mydiv").load("Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>");
});

Headlines links wont be created

I'm currently busy with a ticketsystem. A headline will be displayed. When the headline has over 40 characters, the headline will be cut and the '...' will be added. Now, when I try to link the headlines to its messages, it won't create a link. I'm using Ajax to do this without a page refresh, but no links are being created, which means that the full ticket wont be openend. I've tried several things but I cant get it to work. I'm also not that familiar with it :')
This is my piece of JS:
//Show ticket
function showTicket(id) {
$.ajax({url:"readTicket.php?ticket_id=" + id});
}
This is the piece of code supposed to link the headlines:
<?php echo '<a id="showTicketNow" onclick="showTicket('.$stt["ticket_id"].')">' ?>
<?php if(strlen($stt['subject']) > 40) $stt['subject'] = substr($stt['subject'], 0, 40).'...';
echo $stt['subject'] ?>
<?php echo '</a>' ?>
This is my readTicket.php
$user_id = $_SESSION['user_id'];
$ticket_id = mysqli_real_escape_string($mysqli, $_GET['ticket_id']);
$getTicketInfo = mysqli_query($mysqli,"SELECT * FROM tickets WHERE ticket_id = '$ticket_id' AND user_id = '$user_id'");
while ($row=mysqli_fetch_array($getTicketInfo)) {
$subject = $row['subject'];
$message = $row['message'];
}
echo '<div class="showTicket display subject">'.stripslashes($subject).'</div>
<div class="showTicket display message">'.stripslashes($message).'</div>';
Thanks in advance..
Try this, you were missing all of the syntax goodness.
echo'<a id="showTicketNow" onclick="showTicket('.$stt["ticket_id"].')">';
if(strlen($stt['subject']) > 40){
$stt['subject'] = substr($stt['subject'], 0, 40).'...';
}
echo $stt['subject'];
echo '</a>';
You need to specify href attribute of <a> tag, something like this:
<?php echo '<a href="javascript:void(0);" id="showTicketNow" onclick="showTicket('.$stt["ticket_id"].')">' ?>

Categories