Can anyone help with passing json string to modal in bootstrap 5. Trying to pass each row to the modal. This is to edit forum post so the data can be pretty long
On line 43, if i replace $json for $row['id'] it works perfect but for some reason I cant pass the json string.
At the minute I just get error string 19 and it just shows the first bracket
Any help would be very appreciated, the plan is to pass string then in modal decode and use
<?php
define("DB_HOST", "localhost");
define("DB_USER", "dbusername");
define("DB_PASS", "dbpassword");
define("DB_NAME", "dbname");
define('DB_CHAR', 'utf8mb4');
$opt = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
);
$dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=' . DB_CHAR;
try {
$pdo = new PDO($dsn, DB_USER, DB_PASS, $opt);
} catch (\Exception $e) {
die(response('The Database Details Are Incorrect'));
}
$stmt = $pdo->prepare("SELECT * FROM shoutbox");
$stmt->execute();
$results = $stmt->fetchAll(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- new item (data-id=0) -->
<button data-id=0 onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">add new </button>
<!-- loop through data -->
<?php foreach ($results as $row) : ?>
<!-- make json -->
<?php $json = json_encode($row); ?>
<!-- replacing $json with $row['id'] works -->
<button data-id="<?php echo $json ?>" onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click row </button>
<br>
<?php endforeach; ?>
<!-- the modal -->
<div class="modal fade" id="showmodal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" style="max-width:700px;">
<div class="modal-content">
<?php
$dataid = '<span id="dataid"/>';
echo $dataid;
?>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to figure out why the resulting values are...
NULL NULL string(4) "PEAR"
..on the page they are displayed on.
Originally I do not want them to be displayed but I want the php code to run, using local storage data, when the page loads, then possibly return a boolean value or something in that direction. With a set goal in mind, I am looking for the mistake I have made that creates the NULL values. I have the following code:
validateSession.php , php functionality that will validate values from localstorage and database
<?php
include("config.php");
include("refc/refcvalidation.php");
$sesuserid = $_POST[$valuserid];
$sessionid = $_POST[$valsesid];
var_dump($sesuserid, $sessionid);
$conn = new mysqli($dbservername, $dbusername, $dbpassword, $dbname) or die($conn);
$stmt = $conn->prepare("SELECT * FROM sessiontable WHERE sesowner=? AND sescode=?");
$stmt->bind_param("is", $sesuserid, $sessionid);
$stmt->execute();
$result = $stmt->get_result();
$conn->close();
if ($result->num_rows > 0) {
var_dump("APPLES");
}else{
var_dump("PEAR");
}
?>
refcvalidation.php , reference coordination, ensuring same value on both pages
<?php
$valuserid = "VALSES1";
$valsesid = "VALSES2";
?>
homepage.php , basic page with contents
<?php
include("services/refc/refcvalidation.php");
include('services/validateSession.php');
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="general/styling.css">
<script src="general/launch.js"></script>
</head>
<body>
<div id="topBox">
</div>
<div class="box">
<form id="logForm" action="validateSession.php" method="post">
<input type="hidden" required="required" name="<?php echo $valuserid ?>" id="userfield">
<input type="hidden" required="required" name="<?php echo $valsesid ?>" id="sesidfield">
</form>
</div>
</body>
<style>
</style>
</html>
<script>
document.getElementById("userfield").value = localStorage.getItem("userid");
document.getElementById("sesidfield").value = localStorage.getItem("sessionid");
</script>
The values within HTML are set and have a value in the script section, they are null within the PHP $_POST[$valuserid]; and $_POST[$valsesid]; . Any ideas?
Have'nt tested this, but it might give you some ideas to a solution.
Maybe we could impolement some Ajax into this?
What is Ajax?
AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Ajax can give data as response.
refcvalidation.php
This should be removed
validateSession.php
<?php
include("config.php");
//include("refc/refcvalidation.php"); //REMOVED
$sesuserid = $_POST['valuserid'];
$sessionid = $_POST['valsesid'];
$conn = new mysqli($dbservername, $dbusername, $dbpassword, $dbname) or die($conn);
$stmt = $conn->prepare("SELECT * FROM sessiontable WHERE sesowner=? AND sescode=?");
$stmt->bind_param("is", $sesuserid, $sessionid);
$stmt->execute();
$result = $stmt->get_result();
$conn->close();
if ($result->num_rows > 0) {
$myObj->sesuserid = $sesuserid;
$myObj->sessionid = $sessionid;
$myJSON = json_encode($myObj);
echo $myJSON;
return true; //CONTAINS SOMETHING
}else{
return false; //CONTAINS NOTHING
}
?>
homepage.php
<?php
include("services/refc/refcvalidation.php");
include('services/validateSession.php');
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="general/styling.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="general/launch.js"></script>
</head>
<body>
<div id="topBox">
</div>
<div class="box">
<form id="logForm" action="validateSession.php" method="post">
<input type="hidden" required="required" name="<?php echo $valuserid ?>" id="userfield">
<input type="hidden" required="required" name="<?php echo $valsesid ?>" id="sesidfield">
</form>
</div>
</body>
<style>
</style>
</html>
<script>
$.ajax({
url: 'validateSession.php',
method: 'POST',
data: { valuserid: '<?php echo $valsesid ?>', valsesid: '<?php echo $valsesid ?>'},
success: function(data) {
var data_json= JSON.parse(data);
console.log(data_sjon);
localStorage.userid = data_json[0];
localStorage.sesidfield = data_json[1];
document.getElementById("userfield").value = localStorage.getItem("userid");
document.getElementById("sesidfield").value = localStorage.getItem("sessionid");
}
})
</script>
I added several videos from the data base, and each video has its own ID.
I want when i click on the video, it takes its ID and put it in DataBase.
I did a lot of things to get to the ID value of each video, but couldn't solve it.
I saw many of the same problems on this site and was unable to solve my problem
Please help me
<?php session_start() ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../css/bootstrap.css">
</head>
<body>
<div class="container mt-5 mb-3" '>
<div class="row">
<?php
include('db.php');
$q='select * from ruby'; // Fetch video from DB
$query = mysqli_query($conn , $q);
while($row=mysqli_fetch_array($query)){ ?>
<div class="col-md-4">
<video poster="../img/ruby.png" class="video" width='100%' controls muted id="<?php
echo $row["id"]; ?>" >
<source src="<?php echo 'video/' . $row['name']; ?>" >
</video>
</div>
<?php } ?>
</div>
</div>
in same page ..........
<?php
$dbserver = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "watch";
$conn = mysqli_connect($dbserver , $dbuser , $dbpass , $dbname);
if(!$conn){
echo 'connection failed!';
}
$id = $_SESSION['id'];
$name = $_SESSION['name'];
$q = "insert into ruby values(' $id' , ' $name' , '/* Here I want to put the video ID*/' )";
$res = mysqli_query($conn , $q);
?>
</body>
</html>
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
Is there something wrong with my script? Do I need to add something to modal-body?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$.ajax({ type: "GET",
url: 'search.php',
success: function(data){ debugger $('#mymodal').modal('show');
$('#mymodal:visible .modal-content .modal-body').html(e); } });
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
include_once('db.php'); //Connect to database
if(isset($_REQUEST['q'])){
$q = $_REQUEST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%".$q."%' OR `yupikWord` LIKE '%".$q."%') or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
use these code of search.php
<?php
include_once('db.php'); //Connect to database
if(isset($_REQUEST['q']))
{
$q = $_REQUEST['q'];
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%".$q."%' OR `yupikWord` LIKE '%".$q."%'") or die(mysqli_error($conn));
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
I am trying to get details of products to be displayed on my webpage in a specific format by submitting an id number through a form. But no data is being displayed on submitting the query. I want the latest retrieved data to be appended below the already existing data on the same page from where the form was submitted.
This is my home.php :
<?php
ob_start();
session_start();
require_once 'dbconnect.php';
// if session is not set this will redirect to login page
if( !isset($_SESSION['user']) )
{
header("Location: index.php");
exit;
}
// select loggedin users detail
$res=mysqli_query($conn, "SELECT * FROM users WHERE userId=".$_SESSION['user']);
$userRow=mysqli_fetch_array($res);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> ShopNGo </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#scan").on('click',function()
{
var id =$("#id").val();
$.ajax(
{
type: "POST",
url: "getdata.php",
data: {id: id},
success: function(data)
{
$('.results').append(data);
}
});
});
});
</script>
</head>
<body>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user"></span> Hi' <?php echo $userRow['userEmail']; ?> <span class="caret"></span></a>
<span class="glyphicon glyphicon-log-out"></span> Sign Out
<header id="header">
<div class="container">
<form name="products" method="POST" action="">
<br><br>
<input type="submit" name="scan" id="scan" value="SCAN">
<br><br><br>
<input type="text" name="id" id="id">
</form>
</div>
</header>
<div class="main">
<table border="0">
<div class="results" id="results">
</div>
</table>
</div>
</body>
</html>
<?php ob_end_flush(); ?>
This is my getdata.php :
$query = "SELECT name, price, img FROM product WHERE id = $_POST[id]";
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$element = "<tr> <table border='0'> <tr>";
$element .= "<img src='$row[img]'>";
$element .= "<br>";
$element .= $row["name"];
$element .= "<br>";
$element .= $row["price"];
$element .= "</tr> </table> </tr>";
}
}
echo $element;
This is dbconnect.php
<?php
// this will avoid mysql_connect() deprecation error.
error_reporting( ~E_DEPRECATED & ~E_NOTICE );
// but I strongly suggest you to use PDO or MySQLi.
$servername = "localhost";
$username = "#usernasme";
$password = "#password";
$dbname = "#dbname";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ( !$conn )
{
die("Connection failed : " . mysqli_error());
}
?>
FYI - I am using a php script that maintains a user login session that connects to a database and keeps a user logged in until he signs out. Is there by any an interference between the two scripts: one that maintains user sessions and another that accesses database for getting product details. Thanks in advance.
You are not sending any data via ajax; I'm supposing that you'have included jquery correctly; Then try this
$(document).ready(function(){
$("#scan").on('click',function(){
var id =$("#id").val();
$.ajax({
type: "POST",
url: "getdata.php",
data: {id: id},
success: function(data){
$('.results').append(data);
}
});
});
});
Good luck
i have a view which displays data from database and my modal should pop up when clicked and would display a bigger picture of what is shown in the view, nothing happens when i click my the image any ideas how i could make this work?
controller:
public function view_products() {
$id = $this->uri->segment(3);
$data['products'] = $this->user->viewprod($id);
$this->load->view('product_viewpage', $data);
}
my model:
public function viewprod($id) {
$query = $this->db->query("SELECT * from product_table WHERE product_category = '$id'");
$r = $query->result();
return $r;
}
my view:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<!-- Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<?php echo link_tag('css/Bootstrap.min.css')?>
<?php echo link_tag('css/bootstrap-theme.min.css')?>
<?php echo link_tag('css/STYLE01.css')?>
<?php echo link_tag('css/NAVIGATION.css')?>
<?php echo link_tag('assets/ICON.png')?>
<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
background-color: #EF426F; /*color of main scrollbar*/
height: 10px; /*height of scrollbar*/
}
::-webkit-scrollbar {
height: 0px;
width: 4px; /*width of the slider*/
background-color: #FFFFFF; /*color of the slider*/
}
</style>
</head>
<body>
<center>
<image src="<?php echo base_url() . 'assets/LOGO-(WHITE).png' ?> " width="890" height="220">
</center>
<div class="container_products">
<div class="row">
<center><br><br><br>
<?php
foreach ($products as $alls) {
$id = $alls->product_id;
$name = $alls->product_name; $description = $alls->product_description;
$price = $alls->product_price;
$picture = $alls->img_name. $alls->ext;
?>
<div class="col-md-4"><a data-toggle="modal" data-target="#myModal">
<img class = "bread_img" id = "bread_img_<?php echo $id;?>" src="<?php echo base_url() . 'assets/' . $picture; ?>" onMouseOut="this.src = '<?php echo base_url() . 'assets/' . $picture; ?>'" width="230" height="192"></a>
<input type ="hidden" id = "hidden_name_<?php echo $id;?>" value = "<?php echo $name;?>" >
<input type ="hidden" id = "hidden_desc_<?php echo $id;?>" value = "<?php echo $description;?>" >
<br><br> <h5 class="names" id="pname" src="<?php echo $name; ?>"><?php echo $name; ?></h5>₱ <?php echo $price; ?>
<br><br><br><br><br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-l">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> <?php echo $name; ?></h4>
</div>
<div class="modal-body">
<img src="<?php echo base_url() . 'assets/' . $picture; ?>" width="500" height="417" id = "modal_img">
<br><br><h6 class="modal-title" id="myModalLabels"> <?php echo $description; ?></h6><br><br>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).on('mouseover','.bread_img',function(){
window.src_img = $(this).attr('src');
id = $(this).attr('id').replace('bread_img_','');
window.name = $('#hidden_name_'+id).val();
window.text = $('#hidden_desc_'+id).val();
$('#myModalLabel').text(name);
$('#myModalLabels').text(text);
$(this).attr('src','assets/VIEW.png');
});
$(document.body).on('click','.bread_img', '.names',function(){
$('#modal_img').attr('src',src_img);
});
</script>
please try this code
you forgot to load model in your controller function
public function view_products() {
$this->load->model('user');
$id = $this->uri->segment(3);
$data['products'] = $this->user->viewprod($id);
$this->load->view('product_viewpage', $data);
}