I'm trying to update data from mysql database use php.
I can get all data from db into table, then I click edit and I can get the data, but when I edit the form and click the submit button it's always said that the field is empty. Or sometimes it's edited into "blank row" on mysql db
heres the code:
ktgr_soal.php
<?php
include('../koneksi/koneksi.php');
if ((isset($_GET['aksi'])) && (isset($_GET['data']))) {
if ($_GET['aksi'] == 'hapus') {
$kode_ktgr = $_GET['data'];
//hapus data
$sql_ktgr = "delete from `kategori_soal`
where `id_kategori` = '$kode_ktgr'";
mysqli_query($koneksi, $sql_ktgr);
}
}
?>
<head>
<?php include("includes/head.php") ?>
</head>
<body>
<!-- S I D E B A R -->
<?php include("includes/sidebar.php") ?>
<!-- ENDS I D E B A R -->
<?php include("includes/header.php") ?>
<div class="content-wrap">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 p-r-0 title-margin-right">
<div class="page-header">
<div class="page-title">
<h1>Data Kategori Soal</h1>
</div>
</div>
</div>
<!-- /# column -->
<div class="col-lg-4 p-l-0 title-margin-left">
<div class="page-header">
<div class="page-title">
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item active">Kategori Soal</li>
</ol>
</div>
</div>
</div>
<!-- /# column -->
</div>
<!-- /# row -->
<!-- M A I N C O N T E N T -->
<section id="main-content">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-title">
<a href="add_kategori.php">
<button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5 float-right"><i class="ti-plus"></i>Tambah Data</button>
</a>
<!-- Search form -->
<form class="form-inline d-flex md-form form-sm">
<input class="form-control form-control-sm mr-3 w-25" type="text" placeholder="Search" aria-label="Search">
<i class="ti-search" aria-hidden="true"></i>
</form>
</div>
<div class="card-body">
<div class="col-sm-12">
<?php if (!empty($_GET['notif'])) { ?>
<?php if ($_GET['notif'] == "tambahberhasil") { ?>
<div class="alert alert-success" role="alert">
Data Berhasil Ditambahkan</div>
<?php } else if ($_GET['notif'] == "editberhasil") { ?>
<div class="alert alert-success" role="alert">
Data Berhasil Diubah</div>
<?php } ?>
<?php } ?>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Kategori Soal</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$batas = 10;
if (!isset($_GET['halaman'])) {
$posisi = 0;
$halaman = 1;
} else {
$halaman = $_GET['halaman'];
$posisi = ($halaman - 1) * $batas;
}
?>
<?php include('../koneksi/koneksi.php') ?>
<?php
//menampilkan data hobi
$sql_ktgr = "SELECT * FROM `kategori_soal` ";
if (isset($_GET["katakunci"])) {
$katakunci_jurusan = $_GET["katakunci"];
$sql_ktgr .= " where `kategori` LIKE '%$katakunci_jurusan%'";
}
$sql_ktgr .= " order by `kategori` limit $posisi, $batas ";
$query_ktgr = mysqli_query($koneksi, $sql_ktgr);
$no = $posisi + 1;
while ($data_ktgr = mysqli_fetch_row($query_ktgr)) {
$kode_ktgr = $data_ktgr[0];
$kategori = $data_ktgr[1];
?>
<tr>
<th scope="row"><?php echo $no; ?></th>
<td><?php echo $kategori; ?></td>
<td>
<a href="edit_kategori.php?data=<?php echo $kode_ktgr; ?>">
<button type="button" class="btn btn-warning btn-sm m-b-10 m-l-5 "><i class="ti-pencil-alt"></i></button>
</a>
<a href="javascript:if(confirm('Anda yakin ingin menghapus data <?php echo $kategori; ?>?'))
window.location.href = 'ktgr_soal.php?aksi=hapus&data=<?php echo $kode_ktgr; ?>'" class="btn btn-danger btn-sm m-b-10 m-l-5"><i class="ti-trash"></i>
</a>
</td>
</tr>
<?php
$no++;
} ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /# column -->
<!-- FOOTER -->
<?php include("includes/footer.php") ?>
</section>
</div>
</div>
</div>
<!-- script -->
<?php include("includes/script.php") ?>
</body>
</html>
edit_kategori.php
<?php
session_start();
include('../koneksi/koneksi.php');
if (isset($_GET['data'])) {
$kode_kat = $_GET['data'];
$_SESSION['kode_ktgr'] = $kode_kat;
//get data kategori soal
$sql_d = "select `kategori` from `kategori_soal` where `id_kategori` = '$kode_kat'";
$query_d = mysqli_query($koneksi, $sql_d);
while ($data_d = mysqli_fetch_row($query_d)) {
$kategori = $data_d[0];
}
}
?>
<head>
<?php include("includes/head.php") ?>
</head>
<body>
<!-- S I D E B A R -->
<?php include("includes/sidebar.php") ?>
<!-- ENDS I D E B A R -->
<?php include("includes/header.php") ?>
<div class="content-wrap">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 p-r-0 title-margin-right">
<div class="page-header">
<div class="page-title">
<h1>Edit Kategori Soal</h1>
</div>
</div>
</div>
<!-- /# column -->
<div class="col-lg-4 p-l-0 title-margin-left">
<div class="page-header">
<div class="page-title">
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item active">Home</li>
</ol>
</div>
</div>
</div>
<!-- /# column -->
</div>
<!-- /# row -->
<!-- M A I N C O N T E N T -->
<section id="main-content">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-title">
<h3>Edit Kategori Soal </h3>
</div>
<div class="card-body">
<div class="basic-form">
<?php
if (!empty($_GET['notif'])) {
if ($_GET['notif'] == "editkosong") {
?>
<div class="alert alert-danger" role="alert">Maaf data wajib di isi</div>
<?php
}
}
?>
<form action="konf_edit_ktgr.php" action="post">
<div class="form-group">
<label for="kategori">Kategori</label>
<input type="text" id="kategori" name="kategori" class="form-control input-focus" value="<?php echo $kategori; ?>">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /# column -->
<!-- FOOTER -->
<?php include("includes/footer.php") ?>
</section>
</div>
</div>
</div>
<!-- script -->
<?php include("includes/script.php") ?>
</body>
</html>
konf_edit_ktgr.php
<?php
session_start();
include('../koneksi/koneksi.php');
if (isset($_SESSION['kode_ktgr'])) {
$kode_kat = $_SESSION['kode_ktgr'];
$kategori = $_POST['kategori'];
if (empty($kategori)) {
header("Location:edit_kategori.php?data=" . $kode_kat . "¬if=editkosong");
} else {
$sql = "update `kategori_soal` set `kategori` = '$kategori' where `id_kategori` = '$kode_kat'";
mysqli_query($koneksi, $sql);
header("Location:ktgr_soal.php?notif=editberhasil");
}
}
try to check again "$kode_kat" which is in the file "konf_edit_ktgr.php" whether you have got the value or not. If not, insert "$kode_kat" in the Edit form like this:
<form action="konf_edit_ktgr.php" action="post">
<div class="form-group">
<label for="kategori">Kategori</label>
<input type="text" id="kategori" name="kategori" class="form-control input-focus" value="<?php echo $kategori; ?>">
</div>
<input type="hidden" name="id" value="<?php echo $kode_kat; ?>">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Related
Following is my code I am displaying details as 3 columns per row using Bootstrap class row.
I tried like changing div and some condition
<div class="container">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title"><?php echo $lclUserName?></h4>
<p class="card-text" style="font-size: 25px;"><?php echo $lclCategory?></p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;"><span> </span><?php echo $lclArea?></i>
<!-- See Profile -->
</div>
</div>
<?php
}
?>
</div>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
I want to display 3 columns per row to display data. If anyone knows Please guide me with the above code.
Change your code like this
<div class="container">
<div class="row">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title">
<?php echo $lclUserName?>
</h4>
<p class="card-text" style="font-size: 25px;">
<?php echo $lclCategory?>
</p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;">
<span>
</span>
<?php echo $lclArea?>
</i>
<!-- See Profile -->
</div>
</div>
</div>
<?php
}
?>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...
</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
layout image:
I want to design bootstrap div layout as shown in this picture. I need to have to banner advertisement in the left and right corner. In the middle, I need to have dynamic div s which fetch data from database using PHP. But in the middle when I fetch data as dynamic divs, when number of records increases, the second banner advertisement goes down. How can I solve this?
<div class="col-lg-2" style="padding-top: 50px;">
<div class="card" >
<img src="img/cement_Ad.jpg" height="500" width="300">
</div>
</div>
<!-- 2 -->
<div class="col-lg-8" style="padding-left: 250px;">
<!-- 4 -->
<?php
$sql="select * from services ";
$result = $con->query($sql);
if ($result->num_rows > 0) {
?>
<?php
while($row = $result->fetch_assoc()) {
?>
<div class="col-lg-3" style="padding-top: 40px; padding-left: 20px;">
<section>
<div class="well" >
<div class="card" >
<div class="row ">
<div class="col-md-4">
<img src="img/img1.jpg" height="150px" width="120px">
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title"><?php echo $row ['name']; ?></h4>
<div >
<label>Email</label>
<?php echo $row ['email']; ?>
</div>
<div >
<label>Address</label>
<?php echo $row ['address']; ?>
</div>
<div >
<label>District</label>
<?php echo $row ['district']; ?>
</div>
<div >
<label>City</label>
<?php echo $row ['city']; ?>
</div>
<div >
<label>Service</label>
<?php echo $row ['service']; ?>
</div>
<div >
<label>Years of Experience</label>
<?php echo $row ['years']; ?>
</div>
<div>
<label>Details</label>
<?php echo $row ['details']; ?>
</div>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<?php
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
<div class="col-lg-2" style="padding-top: 50px; ">
<div class="card" >
<img src="img/pipe_Ad.jpg" height="500" width="300">
</div>
</div>
This is the result after I used Mr.E-Azam's answer given below
Check Below-
<div class="col-lg-2" style="padding-top: 50px;">
<div class="card" >
<img src="img/cement_Ad.jpg" height="500" width="300">
</div>
</div>
<!-- 2 -->
<div class="col-lg-8">
<!-- 4 -->
<?php
$sql="select * from services ";
$result = $con->query($sql);
if ($result->num_rows > 0) {
?>
<?php
while($row = $result->fetch_assoc()) {
?>
<div class="col-lg-3" style="padding-top: 40px;">
<section>
<div class="well" >
<div class="card" >
<div class="row ">
<div class="col-md-4">
<img src="img/img1.jpg" height="150px" width="120px">
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title"><?php echo $row ['name']; ?></h4>
<div >
<label>Email</label>
<?php echo $row ['email']; ?>
</div>
<div >
<label>Address</label>
<?php echo $row ['address']; ?>
</div>
<div >
<label>District</label>
<?php echo $row ['district']; ?>
</div>
<div >
<label>City</label>
<?php echo $row ['city']; ?>
</div>
<div >
<label>Service</label>
<?php echo $row ['service']; ?>
</div>
<div >
<label>Years of Experience</label>
<?php echo $row ['years']; ?>
</div>
<div>
<label>Details</label>
<?php echo $row ['details']; ?>
</div>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<?php
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
<div class="col-lg-2" style="padding-top: 50px; ">
<div class="card" >
<img src="img/pipe_Ad.jpg" height="500" width="300">
</div>
</div>
I could solve the problem just by changing col-lg sizes. The answer is given below
<div class="col-lg-12">
<div class="col-lg-2" >
<div class="card" >
<img src="img/cement_Ad.jpg" height="500" width="300">
</div>
</div>
<div class="col-lg-8">
<?php
$sql="select * from services ";
$result = $con->query($sql);
if ($result->num_rows > 0) {
?>
<?php
while($row = $result->fetch_assoc()) {
?>
<div class="col-lg-6" style="padding-top: 20px;">
<section>
<div class="well" >
<div class="card" >
<div class="row ">
<div class="col-md-4">
<img src="img/img1.jpg" height="150px" width="120px">
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title"><?php echo $row ['name']; ?></h4>
<div >
<label>Email</label>
<?php echo $row ['email']; ?>
</div>
<div >
<label>Address</label>
<?php echo $row ['address']; ?>
</div>
<div >
<label>District</label>
<?php echo $row ['district']; ?>
</div>
<div >
<label>City</label>
<?php echo $row ['city']; ?>
</div>
<div >
<label>Service</label>
<?php echo $row ['service']; ?>
</div>
<div >
<label>Years of Experience</label>
<?php echo $row ['years']; ?>
</div>
<div>
<label>Details</label>
<?php echo $row ['details']; ?>
</div>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
<?php
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
<div class="col-lg-2" >
<div class="card" >
<img src="img/pipe_Ad.jpg" height="500" width="300">
</div>
</div>
</div>
I have a button inside a loop.
When the user clicks on the button I want to create a $_SESSION variable with the value of a variable inside the loop.
For example, the variable $id_puja is 767 at this loop item, when the user clicks on the button I want to create the session variable $_SESSION['clicked_puja'] = $row['id_puja'].
This is the button:
while{...
$id_puja = $row['id_puja'];
...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
...
}
I
EDITED, full loop code:
<?php
$resultadopujas=0;
global $mysqli;
$loop = mysqli_query($mysqli, "SELECT * FROM tb_pujas
WHERE subasta_puja = '".$subasta."'")
or die (mysqli_error($mysqli));
$orden = 0;
$resultado = $loop ->num_rows;
if ($resultado == 0){
?> <div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<p><?php echo $resultado."NO HAY PUJAS"?></p>
</div>
</div>
</div>
</div>
<?php
}
$numpuja=0;
while ($row = mysqli_fetch_array($loop))
{$numpuja = $numpuja+1;
$originalDate = $row['datetime_puja'];
$newDate = date("d-m-Y H:i:s",strtotime($originalDate))
?>
<div class="container">
<div class="jumbotron" style="background-color: white">
<div class="row">
<div class="col-md-2">
<img style="width: 80px;height: auto;align-self: " src="garantia.png">
</div>
<div class="col-md-2">
<img style="width: 80px;height: auto;align-self: " src="ok.png">
</div>
<div class="col-md-2">
<img style="width: 80px;height: auto;align-self: " src="extra.png">
</div>
<div class="col-md-2">
<p><strong>Dia/Hora puja: </strong><?php echo $newDate?></p>
</div>
<div class="col-md-2">
<p><strong>Precio puja: </strong><?php echo $row['precio_puja']." €"?></p>
</div>
<div class="col-md-2">
<p><?php echo "<strong>Puja núm:</strong> ".$numpuja?></p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p><?php echo "<strong>Comentarios:</strong> ".$row['comentarios_puja']?></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img style="width: 100%;height: auto;align-self: " src="https://cribbeo.com/pujas/<?php echo $row['foto1']?>">
</div>
<div class="col-md-4">
<img style="width: 100%;height: auto;align-self: " src="https://cribbeo.com/pujas/<?php echo $row['foto2']?>">
</div>
<div class="col-md-4">
<img style="width: 100%;height: auto;align-self: " src="https://cribbeo.com/pujas/<?php echo $row['foto3']?>">
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
<script>
function myclick(){
alert (<?php echo $row['precio_puja']?>);
}
</script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="boton" onclick="myclick()" data-target="#myModal">Open Modal</button>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
EDITED modal part
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mensajes de la subasta <?php echo $referencia."VAR=".$_COOKIE['puja']?></h4>
</div>
<div class="modal-body" style="background-color:#486A86; color: white">
<div class="container">
<header class="header">
<h1>Chat</h1>
</header>
<main>
<img src="images/logohorizontal.png" alt="Cribbeo" width="200px">
<div class="userSettings">
<label for="userName">Usuario: <?php echo $_SESSION['usuario']?></label>
<input id="userName" type="hidden" placeholder="Username" maxlength="32" value=" <?php echo $_SESSION['usuario']?>">
</div>
<div class="chat">
<div id="chatOutput"></div>
<input id="chatInput" type="text" style="background-color:white; color: #486A86" placeholder="Escribe aquí el texto de tu mensaje" maxlength="128">
<button id="chatSend" style="background-color:#486A86; color: white">Enviar</button>
</div>
</main>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
And this is chat.js
$(document).ready(function() {
var chatInterval = 250; //refresh interval in ms
var $userName = $("#userName");
var $chatOutput = $("#chatOutput");
var $chatInput = $("#chatInput");
var $chatSend = $("#chatSend");
function sendMessage() {
var userNameString = $userName.val();
var chatInputString = $chatInput.val();
$.get("./write.php", {
username: userNameString,
text: chatInputString
});
$userName.val("");
retrieveMessages();
}
function retrieveMessages() {
$.get("./read.php", function(data) {
$chatOutput.html(data); //Paste content into chat output
});
}
$chatSend.click(function() {
sendMessage();
});
setInterval(function() {
retrieveMessages();
}, chatInterval);
});
Try this-
//START OF LOOP...
//Add data-var attribute to your button to store the value of the session variable to be picked up by jQuery.
<button type="button" class="btn btn-info btn-lg session-btn" data-toggle="modal" data-target="#myModal" data-var="<?php echo $id_puja;?>">Open Modal</button>
//END OF LOOP..
// jQuery CDN link
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$('.session-btn').on('click', function(){
var session_var = $(this).data('var');
console.log(session_var); // prints the session variable value to the console.
$(document).ready(checkModal);
function checkModal() {
if($('#myModal').is(':visible')){
//if the modal is visible on the page
$.ajax({
url: 'read.php',
type: 'POST',
data: {session_var: session_var},
success: function(){
alert('success');
}
});
}
}
});
</script>
In read.php file
<?php
require("connect.php");
session_start():
//connect to db
$db = new mysqli($db_host,$db_user, $db_password, $db_name);
if ($db->connect_errno) {
//if the connection to the db failed
echo "Failed to connect to MySQL: (" . $db->connect_errno . ") " . $db->connect_error;
}
if(isset($_POST['session_var'])){
$_SESSION['session_var'] = $_POST['session_var'];
echo $_SESSION['session_var'];
$query="SELECT * FROM chat WHERE id_puja ='".$_SESSION['session_var']."' ORDER BY id ASC";
//execute query
if ($db->real_query($query)) {
//If the query was successful
$res = $db->use_result();
while ($row = $res->fetch_assoc()) {
$username=$row["username"];
$text=$row["text"];
$time=date('G:i', strtotime($row["time"])); //outputs date as # #Hour#:#Minute#
echo "<p>$time | $username: $text</p>\n";
}
}else{
//If the query was NOT successful
echo "An error occured";
echo $db->errno;
}
} else {
echo 'variable is not posted!';
}
$db->close();
?>
I'm a newbie in CodeIgniter and I'm trying to pass my form inputs from the view to the controller. I was able to pass it, and was able to insert it on the database. However, I want to use Ajax for this so the whole page won't reload when I press the submit button. I have watched and tried this youtube tutorial: https://www.youtube.com/watch?v=IURutxKvukA, but it doesn't work for me. :( Thank you in advance!
This is my controller, Teacher.php
public function insert_quiz($quiztitle, $quizdescription, $value="")
{
$data = $this->input->post();
$numData = count($data);
$response = array();
$stringChoices = "";
if($numData > 1)
{
for ($i=4; $i < $numData; $i++)
{
$num = $i-3;
$offset = "inputChoice$num";
if ($i == 4)
{
$stringChoices = $data[$offset];
}
else if ($i != 4)
{
$stringChoices = $stringChoices . "," . $data[$offset];
}
}
}
$quizitems = array('Question' => $data['inputQuestion'], 'Choices' => $stringChoices, 'Correct' => $data['correctanswer'], 'NumSequence' => $data['questionnumber']);
$quizitemid = $this->Teacher_model->insertQuizItemOnQuizItems($quizitems);
if (count($quizitemid) == 1)
{
$quizdeedid = $this->Teacher_model->getQuizDeedId($quiztitle);
$quizdatasetitem = array('QuizSet' => $data['quizsetnumber'], 'QuizItemID' => $quizitemid, 'QuizDeedID' => $quizdeedid);
$quizdatasetid = $this->Teacher_model->insertQuizOnQuizDataSet($quizdatasetitem);
if(count($quizdatasetid) == 1)
{
$response = array(
'status' => "success"
);
echo json_encode($response);
}
}
}
and this is my quiz form, in quizView.php
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary">
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card-pf">
<div class="card-pf-heading">
<h1 align="center">
<strong><?php echo str_replace("%20", " ", $quizTitle); ?></strong>
</h1>
<h2 class="card-pf-title" align="center">
<label><?php echo str_replace("%20", " ", $quizDescription); ?></label>
</h2>
</div>
<div class="card-pf-body" id="divquizset" style="height: 50px">
<div class="col-sm-2">
</div>
<div class="col-sm-9" id="divquizset">
<div class="col-sm-3">
<p align="right"> QUIZ SET: </p>
</div>
<div class="col-sm-4">
<input align="center" type="text" id="quizset" class="form-control"></input>
</div>
<button class="btn btn-default col-sm-2" align="left" onclick="saveQuizSet()">Save</button>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-sm-12">
<div id="status">
</div>
</div>
</div>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary" id="list1" style="padding-top: 0px">
<!-- LIST VIEW PART 1 -->
<div id = "div1" style="padding-top: 0px">
<?php echo form_open("Teacher/insert_quiz/$quizTitle/$quizDescription", "id='myForm'", $hidden= array()); ?>
<div>
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-group-item-header" id="div2">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="text" name="questionnumber" id="inputquestionnumber1" class="form-control">
<!-- <b id="questionnumber" name="questionlabel" for="inputQuestion">Question 1: </b> -->
<input type="hidden" name="quizsetnumber" id="quizsetnum" class="form-control" value="">
</div>
<div class="list-view-pf-actions">
<?php echo form_submit('submit', 'Save', $attributes=array("class" => "btn btn-default")); ?>
<!-- <button class="btn btn-default" style="width: 100px">Save</button> -->
<button class="btn btn-default" style="width: 100px">Edit</button>
<button class="btn btn-default" style="width: 100px">Delete</button>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text form-group">
<input type="text" name="inputQuestion" id="input1" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden" id="containerDiv">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<!-- LIST VIEW SUB VIEW -->
<div class="col-md-12">
<form class="form-horizontal" style="padding-left: 100px">
<div class="form-group">
<div class="col-sm-7" align="center">
<dt> CHOICES </dt>
</div>
<div class="col-sm-5" align="center">
<dt> CORRECT ANSWER </dt>
</div>
<div class="col-sm-7">
<div id="divCorrect" style="padding-top: 10px">
<input type="text" name="correctanswer" id="inputcorrectanswer1" class="form-control">
</div>
</div>
<div class="col-sm-5" id="divChoiceContainer1">
<div id="divChoice" style="padding-top: 10px">
<input type="text" name="inputChoice1" id="inpChoice1" class="form-control">
</div>
</div>
<div class="col-sm-7" id="otherDivChoiceContainer1">
</div>
<div class="col-sm-7" align="center" style="padding-top: 20px">
<button type="button" class="btn btn-primary btn-lg btn-block col-xs-9" id = "1" align="center" onclick="addChoiceFunction(this.id)" >Add Choices</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?= form_close() ?>
</form>
</div>
</div>
</div>
<div class="col-sm-3 container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary">
<button type="button" class="btn btn-primary btn-lg btn-block col-md-9" align="center" onclick="addQuestionFunction()">Add Question</button>
</div>
These are the scripts I used, they're also in the quizView.php:
<script>
jQuery(document).ready(function($) {
$('#myForm').ajaxForm({
beforeSubmit: function(formData, jqForm, options){
$("div#status").html('');
},
success: function(response){
var result = $.parseJSON(response);
$("div#status").html('<div class="alert alert-' + result.status + '" role="alert"> HI </div>');
}
});
});
</script>
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
.find(".list-group-item-container").toggleClass("hidden");
} else {
}
})
// click the close button, hide the expand row and remove the active status
$(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
})
});
</script>
<script>
function addQuestionFunction() {
$num = $('div .list-view-pf-view').length + 1;
$divId = "#" + $num;
$toClone = $('#div1').clone(true).find("input").val("").end();
$($toClone).find("#containerDiv").addClass("hidden").end();
$($toClone).find("#otherDivChoiceContainer1").attr("id", "otherDivChoiceContainer"+ $num);
$($toClone).find("#otherDivChoiceContainer" + $num).find("#divChoice").remove().end();
$($toClone).find("#1").attr("id", $num);
$($toClone).find("#questionnumber").text("Question " + $num + ": ");
if($($toClone).find("span").hasClass("fa-angle-down")) {
$($toClone).find(".fa-angle-right").removeClass("fa-angle-down").end();
}
$('#list1').append($toClone);
}
function addChoiceFunction(clicked_id) {
$num = parseInt(clicked_id);
$divId = "#otherDivChoiceContainer" + $num;
$numChoice = $($divId + " input").length + 2;
$toClone = $('#divChoice').clone(true).find("input").val("").end();
$toClone.find("#inpChoice1").attr("id", "inpChoice" + $numChoice).attr("name", "inputChoice" + $numChoice);
// $toClone.find("#inpChoice" + $num).attr("name", $("#inpChoice"+$num).attr("name").replace(/\\[\d+\\]/,"inputChoice" + $num));
//alert($numChoice);
$($divId).append($($toClone));
}
function saveQuizSet() {
$('#quizsetnum').val($('#quizset').val());
$quizsetval = $('#quizset').val();
$('#divquizset').empty();
$('#divquizset').append(' <p align="center"> QUIZ SET: '+ $quizsetval + '</p>');
// $('#divquizset').append(" <p align="center"> QUIZ SET: A </p>");
}
</script>
And for my script sources I used these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script src="http://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
<script src="http://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="http://www.patternfly.org/components/d3/d3.min.js"></script>
<script src="http://www.patternfly.org/components/c3/c3.min.js"></script>
<script src="http://www.patternfly.org/components/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://www.patternfly.org/components/google-code-prettify/bin/prettify.min.js"></script>
<script src="http://www.patternfly.org/components/clipboard/dist/clipboard.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly/dist/js/patternfly.min.js"></script>
<script src="http://www.patternfly.org/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
<script src="http://www.patternfly.org/assets/js/patternfly-site.min.js"></script>
<link rel="canonical" href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/vertical-navigation.html">
This is what my form looks like
quizviewform
And this is what it's returning
returnpage
It's inserting on my database, but it doesn't return on the page and ajax doesn't work. :( I hope someone can help me here. Thanks!
I am fetching some results in a loop which is then output into a table - but when applying a 'switch' element from Buefy (Bulma UI kit) it will only apply it to the first item in the row and not anything following.
Here is the HTML of my loop:
<?php
$query = $conn->prepare("SELECT *
FROM dashboard");
$query->execute();
$result = $query->fetchAll();
?>
<div class="container">
<div class="wrapper">
<div class="dashTable">
<div class="header">
<div class="col">Name</div>
<div class="col">Status</div>
<div class="col">Created</div>
<div class="col">Options</div>
</div>
<?php foreach($result as $row){ ?>
<div class="body">
<div class="col">
<a title="View New Dashboard" href="../loading.php?dashboard_id=50">
<?php
echo $row['name'];
?>
</a>
</div>
<div class="col">
<!-- CLICK TO UPDATE STATUS -->
status
<div id="app1">
<template>
<section>
<div class="field">
<b-switch v-model="isSwitchedCustom"
true-value="Active"
false-value="Inactive" type="is-success">
{{ isSwitchedCustom }}
</b-switch>
</div>
</section>
</template>
</div>
</div>
<div class="col"><?php echo date( 'd-m-Y', strtotime($row['created_at']) ); ?></div>
<div class="col">
<span class="tag is-warning is-medium">
Edit
</span>
<span id="confirm-delete" class="tag is-danger is-medium" #click="confirmCustomDelete">
Delete
</span>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
I am just not sure why after the first it does not apply to all rows?