I'm having a hard time in this one. I want to add data to a column in my database.
If there is an existing type in the database, then it not going to add, and if not it is going to add. However, it seems that my $validate is always empty.
Thanks in Advance. I really Appreciate your Help Thanks again.
this my add_item_type.php
$newi = $_GET["newi"];
$dept = $_GET["dept"];
$connection = mysqli_connect("localhost","root","","fumc");
$sql = mysqli_query($connection," SELECT * FROM items WHERE type = '".$newi."' ");
while($data=mysql_fetch_array($sql)){
$validate = $data['department'];
}
if($validate=="")
{
}
else
{
mysqli_query($connection," INSERT INTO items (type,department)VALUES('".$newi."','".$dept."') ");
echo mysqli_affected_rows($connection);
}
?>
My database name is fumc, my table name is items and inside my table i have type And Department .... One of my type is keyboard and department is IT..
this is my main.php
<html>
<body>
<head>
<link rel="icon" type="image/png" href="fumc.png">
<link href="css123/bootstrap.min.css" rel="stylesheet">
<link href="css123/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<input type="button" name="modal" value="Add Item Type" class="btn btn-primary" style="margin-left:100px;" data-toggle="modal" data-target="#myModal">
<center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style='top:0px;'>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:400px;">
<div class="modal-header " style='background:#ddd;'>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Arial Black;color:green;"><center><b>ADD ITEM TYPE</b></center></h4>
</div>
<div class="modal-body">
<br>
<form action="#" method="post">
<input type='hidden' value='<?php echo $department?>'name ='dept' id='dept'>
<center>
<font class='text-success' ><b>NEW ITEM TYPE</b>
<input type='text' name ='newi' id='newi' style='margin-left:10px;border:1px solid gray;text-align:center;background:Transparent;'>
</font>
</center>
</div>
<br>
<div class="modal-footer" style='background:#ddd;'>
</form>
<button type="button" class="btn btn-info " name="add" id="add" >Add Item Type</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</center>
<script>
$(function(dd){
$("#modal").on("click",function(dd){
var dept = $("#dept").val();
var newi = $("#newi").val();
});
$("#add").on("click",function(tt){
var dept = $("#dept").val();
var newi = $("#newi").val();
$.get("add_item_type.php?newi="+newi+"&dept="+dept,function(values){
location.reload();
});
});
});
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/fastclick/fastclick.min.js"></script>
<script src="dist/js/app.min.js"></script>
<script src="dist/js/demo.js"></script>
</body>
</html>
Need help Please..! Thanks.
The easiest way to do this is to use MySQL's built in UNIQUE attribute. Set the department column of your database table to be unique, then you can use a query like this:
"INSERT IGNORE INTO items (type,department) VALUES ('".$newi."','".$dept."')"
This query will only insert a new row if the $dept value doesn't match any of the other values in the department column.
Related
I have a page that has a table with 3 columns, two of which are data and the third has an edit button. When I click this button, the name is sent to a modal where it can be changed.
I need to do two things:
Update the name in the table and close the modal when click the Save Changes button on the modal.
Is it possible to do that?
Index.php
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<table id="tabela">
<thead>
<th>#</th>
<th>Name</th>
<th></th>
</thead>
<tr>
<td>1</td>
<td class="name">Fred</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td class="name">Charles</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>3</td>
<td class="name">John</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
</table>
<div class="modal" id="modalTest" tabindex="-1" role="dialog">
<?php
include "modalTabela.php";
?>
</div>
<script>
//send name to php page
$(".btnEdit").click(function() {
var nome = $(this).closest('tr').find(".name").text();
$.ajax({
type: 'POST',
url: '//localhost/tabela/modalTabela.php',
data: {msg: nome },
}).done(function(data) {
//update html
$("#modalTest").html(data);
//show modal
$("#modalTest").modal("show");
});
});
</script>
</body>
</html>
modalTabela.php
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
$nome=$_POST['msg'];
echo "<label>Name</label><input type='text' id='edNome' value='$nome'></input>";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSalvar">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I am having difficulties getting this part of my html/php page working, everything else works fine except the modal.
I am using Bootstrap 4.3.1 in the template I am using, i have followed a lot of other post's on SOF but none seem to work. The following code is where it gets called from
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
and the modal section;
<? if ($_SESSION['admin_level']>=3) { ?>
<div class="modal fade" id="vehicle_delete_<? echo $row->id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><span class="fa fa-pencil"></span> Delete <? echo $row->classname;?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<form method="post" action="vehicles.php#vehicles_delete_<? echo $row->id;?>" role="form">
<input type="hidden" name="type" value="delete" />
<input type="hidden" name="id" value="<? echo $row->id;?>" />
<p>Do you really want to delete the Vehicle "<? echo $row->classname;?>" from the User <? echo $row->name;?>?</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light" data-dismiss="modal" type="reset">Cancel</button>
<button class="btn btn-light" type="submit">Delete Vehicle</button>
</form>
</div>
</div>
</div>
</div>
<? } ?>
I have the same exact code on an version v3.3.5 of Bootstrap and it works quiet fine, but since upgrading to the version I am currently using in this template, it no longer works.
The following is the footer
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- simplebar js -->
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- loader scripts -->
<script src="assets/js/jquery.loading-indicator.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<!-- Chart js -->
<script src="assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Index js -->
<script src="assets/js/index.js"></script>
The following is the header
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
<!-- simplebar CSS-->
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Sidebar CSS-->
<link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
Regards.
You shoud add data-target instead of href
from this to
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
This
<a data-toggle="modal" href="" class="btn btn-light" data-target="#vehicle_delete_<? echo $row->id;?>"><span class="fa fa-trash"></span></a>
Then after you have to pass the URL to Delete vehicle button
Can you try to add data-target on the buttons?
<a data-toggle="modal" data-target="#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
Could be Bootstrap 3 prevents the default behavior on the href, but Bootstrap 4 doesn't.
I have a laravel datatable the following:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>
This is the table:
<td><button
type="button"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#favoritesModal">
Add to Favorites
</button></td>
and here I have created the modal:
<div class="modal fade" id="favoritesModal"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"
id="favoritesModalLabel">The Sun Also Rises</h4>
</div>
<div class="modal-body">
<p>
Please confirm you would like to add
<b><span id="fav-title">The Sun Also Rises</span></b>
to your favorites list.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
<span class="pull-right">
<button type="button" class="btn btn-primary">
Add to Favorites
</button>
</span>
</div>
</div>
</div>
</div>
Can anyone please help me how do I implement this modal in a datatable row?
Basically I want everytime the user clicks a button show Image to open a modal with the image inside
Thanks in advance
Probably easiest if you add a unique class (say... 'imageButton') as well as a data-image-id to the button to identify which image you want. If you want individual title, you may wish to add a data-img-title on the same button.
So - sort of like this:
<td><button
type="button"
class="btn btn-primary btn-lg imageButton"
data-toggle="modal"
data-img-title ="{{$looped->title}}"
data-img-id = "{{$looped->id}}"
data-target="#favoritesModal">
Add to Favorites
</button></td>
Then, some jquery AJAX to get the image data from your controller and then place that HTML inside the modal. Something like this:
$('.imageButton').on('click', function () {
var imgTitle = $(this).data('img-title');
var imgId = $(this).data('img-id');
$.ajax({
url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
type: "GET",
success: function (h) {
$(".modal-title").text(imgTitle);
$(".modal-body").html(h);
$('#modal').modal();
},
error: function () {
swal("Error", "Unable to bring up the creation dialog.", "error");
}
})
});
Depending on what you are sending through that would work. You can also chose to create an image tag, and send through the new src instead of photo data something like this if you want to show thumbnails as well:
<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
class="picToModal">
Then replace the src within the $("#modalImage") element with your new source and trigger. There are lots of options and branches, and you'll need to re-work to suit, but this should get you started.
I am working on a project where the HTML table rows have been created with information of Name, Details, Phone, Email etc. All this information is stored in a database.
Now, I want obtain a modal box, when I click on the table row and obtain information which is there on the row in a neat and tidy form. As you can see from the code, I have already put it an alert box. However, instead of this, I would like to get the same information in a modal box using Jquery and bootstrap.
For this please find the existing codes that are in place. I have not put any codes for the modal part. This is because, I am not sure how to get the table row as a modal button.
<?php
session_start();
if(isset($_SESSION['u_uid']))
$uid = $_SESSION['u_id'];
require_once('connect.php');
$ReadSql = "SELECT * FROM `contact` WHERE users_id=$uid AND ACTIVE_INACTIVE=1 ORDER BY Name";
$res = mysqli_query($connection, $ReadSql);
?>
<!DOCTYPE html>
<form action="http://motoko.sorainsurance.com.au/includes/logout.inc.php" method="POST">
<button type="submit" name="submit">Logout</button>
</form>
<form>
<input type="button" value="Add Contact" onclick="window.location.href='http://motoko.sorainsurance.com.au/crud/comp_contact_index.php'" />
</form>
<html>
<head>
<title>Motoko</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.table-hover tbody tr:hover td
{
background-color: #A9A9A9;
color: white;
}
body
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
<body>
<div class="container">
<div class="row">
<table class="table">
<table class="table table-hover">
<tr>
<th><strong>Contact Category</strong></th>
<th><strong>Name</strong></th>
<th><strong>Details</strong></th>
<th><strong>Phone</strong></th>
<th><strong>Email</strong></th>
<th><strong>Address</strong></th>
<th><strong>Extras</strong></th>
</tr>
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<td class= "r-Type"><?php echo $r['Contact_type']; ?></td>
<td class= "r-Name"><?php echo $r['Name']; ?></td>
<td class="r-Details"><?php
if ($r['Contact_type'] == 'Individual')
{
echo $r['Title']. ', '.$r['Company'];
}
elseif ($r['Contact_type'] == 'Team')
{
echo $r['Company'];
}
elseif ($r['Contact_type'] == 'Company')
{
echo '';
}
?> </td>
<td class="r-Phone"><?php echo $r['Phone']; ?></td>
<td class="r-Email"><?php echo $r['Email']; ?></td>
<td class="r-Address"><?php echo $r['Address']; ?></td>
<td class="r-Update">Edit</td>
<td class="r-Delete"><a href='delete.php?id=<?php echo $r['id']?>'>Delete</a></td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
Jquery used
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
What you can do is on your '.click()' event, you can open a bootdtrap modal. Here's a demo modal that might help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Click the button to get row information</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#infoModal">Get Information</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" role="dialog" style="margin-top: 14%">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Information</h4>
</div>
<div class="modal-body">
<label>Values: </label>
<input id="val1" type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now this modal has an input box which has id. So first you set its value with what you get in your alert by doing: $('#val1').val($(this).text());.
Once the value is set, you need to open the modal.
For opening the modal, inside your .click() function, after the value setting, do $('#infoModal').modal('show');. This will open the modal with your row values in the input box.
Hope this helps. If it doesn't it'll definitely help you along achieving what you want.
This is my page, how to get modal after form submit.
I want to get Modal as I am in requirement of doing such task. This is just simple practice modal page for my understanding.
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit")
{
?>
<script type="text/javascript">
$(window).load(function()
{
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<form method="post">
<div class="col-sm-4">
<input type="text" name="text" class="form-control"> <br>
<input type="submit" name="btn" class="btn btn-danger">
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all do not include <script> tags outside the html tags, put them in the <body> or <head> tags. Whenever you are working with the DOM and jQuery, wrap your code in a document ready closure. Ex:
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
You need to place your jQuery after the definition of the modal in the HTML Since you can not display a BS modal before the HTML page and the modal is defined.
Also the POST response from the form submit button is "Submit Query" not just "Submit".
Put the following PHP under the last </div> tag from the modal definition and the before the </body> tag and it will work:
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit Query")
{
?>
<script type="text/javascript">
$('#myModal').modal('show');
</script>
<?php
}
?>