I were changing some PHP-Script that you can't delete protected users from a datatable and now for some reason the modal which shows the warning "Are you sure to delete...?" doesn't show up anymore BUT the background gets dark and you can't interact with the page anymore (even if the selected user isn't protected)
I analyzed the code and haven't seen any issues (I am a amateur only knowing school IT)
HTML-Code
<div class="modal fade" tabindex="-1" role="dialog" id="modal_delete">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" ng-submit="submitForm()">
<div class="modal-header">
<h4 class="modal-title">{{modalTitle}}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<h5>Sind Sie sich sicher diesen Benutzer unwiderruflich zu löschen?</h5>
<p ng-class="customStyle.colorClass">{{successMessage}}</p>
</div>
<div class="modal-footer">
<input type="hidden" name="hidden_id" value="{{hidden_id}}" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Ja, ich bin mir sicher!"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
</div>
</form>
</div>
</div>
</div>
AngularJS (JavaScript) Code
$scope.openModalDelete = function(){
var modal_popup = $("#modal_delete");
modal_popup.modal('show');
$scope.deleteMessage();
}
$scope.closeModalDelete = function(){
var modal_popup = $('#modal_delete');
modal_popup.modal('hide');
}
$scope.submitForm = function(){
$http({
method: 'POST',
url: '../ajax/benutzer_insertData.php',
data: {
'isAdmin': $scope.isAdmin,
'password': $scope.password,
'passwordValidate': $scope.passwordValidate,
'id': $scope.currentId,
'first_name': $scope.first_name,
'last_name': $scope.last_name,
'email': $scope.email,
'action': $scope.submit_button}
}).then(function successCallback(response){
$scope.turnColor(response.data.color);
$scope.stateSet = $scope.state;
$scope.success = true;
$scope.error = false;
$scope.successMessage = response.data.successMsg;
$scope.errFirstName = response.data.firstNameError;
$scope.errLastName = response.data.lastNameError;
$scope.errEMail = response.data.eMailError;
$scope.errPassword = response.data.passwordError;
$scope.form_data = {};
$scope.getData();
});
}
$scope.deleteData = function(id){
$scope.modalTitle = "Benutzer löschen";
$scope.submit_button = "Löschen";
$scope.currentId = id;
$scope.openModalDelete();
}
PHP-Code
if($request->action == 'Löschen'){
$sql = "DELETE FROM users WHERE id = ".$id." AND protected = 0";
$statement = $con->prepare($sql);
$statement->execute();
$successMsg = "Benutzer wurde erfolgreich gelöscht";
$color = "green";
}
There are no things like Error-Messages and the console is completly fine
Related
Im making an inventory system in laravel and I want to upload an image every products that I have. My problem is I cant upload an image. I tried my old code in uploading photo and it is not working in my current project. The upload code you see in the controller is in a laravel collective form. But now, I am using a modal and an ajax request to save the inputs into the database. Can someone know what should I do about this? Btw, my modal doesnt have a form tag because I thought forms will not work in modals. Thanks in advance!
Modal Create.
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Register New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="font-weight: bold;">Name </p>
<input type="text" class="form-control" id="product_name"/>
<p style="font-weight: bold;">Description </p>
<input type="text" class="form-control" id="description"/>
<p style="font-weight: bold;">Price </p>
<input type="text" class="form-control" id="currentprice"/>
{{-- <input style="text-transform:uppercase" type="text" class="form-control" id="supplier_id"/> --}}
<p style="font-weight: bold;">Supplier </p>
<select class="form-control" id="supplier_id" >
#foreach ($suppliers as $supplier)
<option value="{{$supplier->id}}">{{$supplier->name}}</option>
#endforeach
</select>
<p style="font-weight: bold;">Picture </p>
<input type="file" class="form-control" id="picture"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="add_product">Add</button>
</div>
</div>
</div>
</div>
Controller
public function store(Request $request)
{
$data = $request->all();
$data['product_name'] = ($data['product_name']);
$data['description'] = ($data['description']);
$data['supplier_id'] = ($data['supplier_id']);
$data['price'] = ($data['price']);
if ($request->hasFile('image')){
//Add new photo
$image = $request->file('image');
$filename = time() . '.' . $image->getClientOriginalExtension();
$location = public_path('img/' . $filename);
Image::make($image)->resize(300,300)->save($location);
$oldFilename = $products->image;
//Update DB
$products->image = $filename;
//Delete the old photo
// Storage::delete($oldFilename);
}
Product::create($data);
return response()->json($data);
}
Ajax
$(document).ready(function(){
//add
$('#add_product').click(function(e){
e.preventDefault();
var name = $('#product_name').val();
var description = $('#description').val();
var price = $('#currentprice').val();
var supplier_id = $('#supplier_id').val();
var image = $('#picture').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('/product') }}",
method: 'post',
data:{
product_name: name,
description: description,
price: price,
supplier_id: supplier_id,
image: image,
},
success: function (res){
console.log(res);
window.location.href = '{{route("products")}}'
}
});
});
//add
Model
class Product extends Model
{
use SoftDeletes;
protected $fillable = [
'product_name', 'quantity', 'description' ,'supplier_id', 'price', 'image',
];
public function supplier()
{
return $this->hasOne('App\Supplier');
}
}
I Can’t add a comment, that is dumb ...
Your also going to likely need to encode the image data in the json.
See How do you put an image file in a json object?
(Fixed wording)
I am working on a module where a dropdown modal has to appear after a duration of 3 mins on the page. It has an input field where digits has to be entered by the user and when he clicks on 'save', the modal should hide. Although I am getting the modal at correct time and when the digits are entered the values are being saved too but only the modal does not hides. I am just unable to figure out the reason behind it as the modal implementation is correct up to my knowledge. I am new to jquery and javascript so need suggestions and expertise of community. I am putting my code here, please have a look and any help or suggestion will be highly appreciated.
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<form name="frmActive" id="frmActive" action="" method="post">
<div class="modal-content" style="height:250px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ideal Time activation</h4>
</div>
<div class="modal-body">
<p>Please enter activation PIN:</p>
<p id="msg" style="color:#F00;"></p>
<input type="password" name="pin" id="pin" value="" maxlength="4" onKeyUp="checkNumber(this)" class="form-control" placeholder="Enter Pin">
<input type="hidden" id="inactiveTime">
</div>
<div class="modal-footer">
<button type="button" id="btnSubmit" name="submit" value="submit" class="btn btn-success"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
<input type="hidden" id="module_id" value="<?php echo $moduleId ; ?>">
<input type="hidden" id="chapter_id" value="<?php echo $chapterId ; ?>">
</div>
</div>
</form>
</div>
</div>
jQuery("#btnSubmit").on("click", function(){
var pin = jQuery("#pin").val();
var chapter_id = jQuery("#chapter_id").val();
var module_id = jQuery("#module_id").val();
var nowDate = jQuery.now();
var inactiveTime = jQuery("#inactiveTime").val();
var seconds = (nowDate - inactiveTime) / 1000;
var formData = new FormData();
formData.append("pin", pin);
formData.append("seconds", seconds);
formData.append("module_id", module_id);
formData.append("chapter_id", chapter_id);
// $("#spinner").show();
$.ajax({
url: "processActivation.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
//dataType:'json',
success: function(result){
if(result == 'active')
{
$("#bt").html(result) ;
jQuery('#myModal').modal('hide');
}
else if(result == 'active')
{
jQuery('#myModal').modal('hide');
}
else
{
$("#msg").html(result) ;
}
}
});
});
And the ajax request being made for success,
$dataactivation = array("user_id"=>$uid, "module_id"=>$moduleId, "chapter_id"=>$chapterId,"time_taken"=>$time_taken, "created"=>$created);
$db->query_insert("tbl_activation", $dataactivation);
echo trim('active');
Please try console.log your result, you need to know the respond.
console.log(result);
here is the problem: if(result == 'active')
Remove echo trim('active');
change to : header('Content-Type: application/json', true, 200);
echo json_encode('active')); exit();
i hope you get it.
so this is my controller:
User_Authentication_Controller:
public function login_user(){
$username = $this->input->post('txt_login_username');
$password = md5($this->input->post('txt_login_password'));
$result=$this->LogIn_Model->login($username,$password);
redirect('Pages_Controller/homepage');
}
LogIn_Model:
public function LogIn($username,$password){
$data = array(
'username' => $username,
'password' => $password
);
$query = $this->db->get_where('user_account',$data);
return $query->result_array();
}
LOGIN MODAL:
<section id="login_modal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" id="forms">
<div class="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form class="form-horizontal" id="form_login" action="" method="POST">
<div class='error_msg'></div>
<input autofocus="autofocus" type="text" id="txt_login_username" name="txt_login_username" class="form-control" />
<input type="password" id="txt_login_password" name="txt_login_password" class="form-control" />
<button class="btn btn-primary" type="submit" name="btnLogin">Login</button>
Forgot Password?
</div>
</form>
</div>
<div class="modal-footer">
<center><button type = "submit" id="login_user" class="btn btn-danger" data-dismiss="modal" >CLOSE</button></center>
</div>
</div>
</div>
</section>
VIEW:
Login
AJAX:
$(function(){
$('#login_user').submit(function(event){
var user = $('#txt_login_username').val();
var pass = $('#txt_login_password').val();
$.ajax({
type: 'POST',
url: 'User_Authentication_Controller/login_user',
data: {
'user': user,
'pass': pass
},
dataType: 'html',
success: function(results){
if(user != user){
$('.error_msg').html('error msg');
return false;
}
}
});
});
});
ALL I WANT IS IF THERE IS AN ERROR! THE will work and the modal will not close! how will I do that with CI? Is there any possible way that just put the LogIn_Model->login(); in AJAX? please help! I need this thing badly! And in addition I want that what the user inputs and if he got it wrong when he submitted the username will still be at the textbox! how will I do that also? THank you so much for help!
I have a problem which jquery detecting "enter" key press instead of mouse clicking on submit button when submitting a form.
On the first attempt,the submit button works well,after that it would work only with enter key.
Form codes
<a class="btn btn-xs btn-info" onclick="gModal(<?php echo $group['Group']['id'];?>,'<?php echo $group['Group']['name'];?>')"><?php echo __('Edit'); ?></a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p id="groupId"></p>
<?php echo $this->Form->create('Group',array('class'=>'edit-group'));?>
<?php echo $this->Form->input('group_id',array('class'=>'group-id','type'=>'hidden'));?>
<?php echo $this->Form->input('name',array('class'=>'form-control group-name','type'=>'text'));?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<?php echo $this->Form->button('Save Changes',array('class'=>'btn btn-default'));?>
<?php echo $this->Form->end();?>
</div>
</div>
</div>
</div>
Jquery codes
//handle modal
function gModal(groupId,groupName){
console.log(groupId);
$('.group-name').empty();
$('.group-name').val(groupName);
$('.group-id').val(groupId);
$('#groupId').html(" ");
$('#groupId').append(groupId);
$('#myModal').modal('toggle');
}
//handle form submit
var request;
function editGroup(){
$('.edit-group').on('submit', function(event) {
console.log('clicked form');
event.preventDefault();
var $form = $(this).find("input");
var url = "<?php echo Router::url(array('plugin' => 'auth_acl','controller' => 'groups','action' => 'edit')); ?>";
var serializedData = $form.serialize();
request = $.ajax({
url: url,
type: 'post',
dataType: 'json',
data: serializedData,
});
request.done(function(data) {
console.log(data);
$('#myModal').modal('toggle');
$('#container').load('<?php echo $this->webroot; ?>auth_acl/groups');
});
request.fail(function(data) {
console.log(data);
});
});
}
$(document).ready(function($) {
editGroup();
});
I have no idea now.thanks for your time.
Replace
<?php echo $this->Form->button('Save Changes',array('class'=>'btn btn-default'));?>
This code with
<? echo $this->Form->button('Submit Form', array('class'=>'btn btn-default','type' => 'submit'));?>
Button Type should be Submit
I think you can use onchange event for representing enter event.
For example <button type="button" onchange="theFunction();">Submit</button>
I am trying to code a website using Bootstrap. I already have it implemented on one page using a modal (here) and the other page doesn't seem to show the modal (here) on that page, there is a button that can edit the ban details but when I click the edit button, it does nothing.
Also, I am using jQuery for form submissions so that I can redirect to the returned ID, however, I am stuck on how my function can return the ID because using
get_mysql()->fetch_assoc($result)["id"]
causes a 500 internal server error.
Codes can be found below.
ban.php
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<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">Edit Ban</h4>
</div>
<form id="form">
<div class="modal-body">
<div class="form-group">
<input type="text" value="<?php echo $ban["uuid"] ?>" id="uuid" name="uuid" placeholder="UUID" class="form-control"/>
</div>
<div class="form-group">
<input type="text" value="<?php echo $ban["reason"] ?>" id="reason" name="reason" placeholder="Reason" class="form-control"/>
</div>
</div>
<input type="hidden" id="id" name="id" value="<?php echo $ban["id"] ?>" />
<div class="modal-footer">
<input type="submit" class="btn btn-primary"/>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#form").submit(function(e) {
e.preventDefault();
var uuid = $("#uuid").val();
var reason = $("#reason").val();
$.post("add.php", { id: id, uuid: uuid, reason: reason, key: "<?php echo get_key() ?>" }, function(data) {
location.href = "ban.php?id=<?php echo data ?>";
});
});
});
</script>
index.php
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<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">Add Ban</h4>
</div>
<form id="form">
<div class="modal-body">
<div class="form-group">
<input type="text" value="<?php echo $ban["uuid"] ?>" id="uuid" name="uuid" placeholder="UUID" class="form-control"/>
</div>
<div class="form-group">
<input type="text" value="<?php echo $ban["reason"] ?>" id="reason" name="reason" placeholder="Reason" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary"/>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#form").submit(function(e) {
e.preventDefault();
var uuid = $("#uuid").val();
var reason = $("#reason").val();
$.post("functions/add.php", { uuid: uuid, reason: reason, key: "<?php echo get_key() ?>" }, function(data) {
location.href = "functions/ban.php?id=<?php echo data ?>";
});
});
});
</script>
api.php
<?php
define("key", "redacted");
function get_mysql() {
$mysql = new mysqli("localhost", "redacted", "redacted", "redacted");
if($mysql->connect_error) {
die($mysql->connect_error);
}
return $mysql;
}
function add($uuid, $reason) {
$date = gmdate("Y-m-d H:i:s");
get_mysql()->query("insert into bans (uuid, date, reason) values ('$uuid', '$date', '$reason')");
$result = get_mysql()->query("select id from bans where uuid = '$uuid' and date = '$date' and reason = '$reason'");
get_mysql()->fetch_array($result);
return $result["id"];
}
function update($id, $uuid, $reason) {
get_mysql()->query("update bans set uuid = '$uuid', reason = '$reason' where id = $id");
}
function remove($uuid) {
get_mysql()->query("delete from bans where uuid = '$uuid'");
}
function remove_by_id($id) {
get_mysql()->query("delete from bans where id = $id");
}
function get($uuid) {
return get_mysql()->query("select * from bans where uuid = '$uuid'")->fetch_assoc();
}
function get_by_id($id) {
return get_mysql()->query("select * from bans where id = $id")->fetch_assoc();
}
function get_bans() {
return get_mysql()->query("select * from bans");
}
function login($username, $password) {
$password = hash("sha256", $password);
return get_mysql()->query("select count(*) from users where username = '$username' and password = '$password'")->num_rows > 0;
}
function register($username, $password) {
$password = hash("sha256", $password);
get_mysql()->query("insert into `users` (`username`, `password`) values ('$username', '$password'");
}
function get_key() {
return key;
}
?>
I've found the answer thanks to #stain88. I didn't provide the correct link to bootstrap.min.js (facepalm)
Thanks again #stain88.