Modal is not getting close please check my code - php

I am printing Badge information using below code, after print Modal box is not getting closed
$("#printCnfWithoutLoginForm").formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
emailAdressWLogin: {
verbose: false,
trigger: 'blur',
validators: {
notEmpty: {
message: 'Email is Required'
},
regexp: {
regexp: /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9]{2,})+\.)+([a-zA-Z0-9]{2,4})+$/,
message: 'Please enter valid email address'
},
remote: {
type: 'POST',
url: '<?php echo get_site_url() ?>/wp-content/themes/mesocolumn/eventDetailsAjax.php/',
message: 'Sorry, You have not register for this event',
data: {
eventidWLogin: function () {
return $('#eventidWLogin').val()
},
eventtypeWLogin: function () {
return $('#eventtypeWLogin').val()
}
},
}
}
}
}
}).on('success.form.fv', function (e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
var data = $form.serialize();
// Use Ajax to submit form data
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: data,
success: function (data) {
var printWindow = window.open('', '', 'height=400,width=800');
var is_chrome = Boolean(printWindow.chrome);
printWindow.document.write(data);
if (is_chrome) {
setTimeout(function () { // wait until all resources loaded
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10
printWindow.print(); // change window to winPrint
printWindow.close(); // change window to winPrint
}, 400);
} else {
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10
printWindow.print();
printWindow.close();
}
}
});
$('#autoUpdate2').modal('hide');
});

You can manually called the remove() method to close the modal as
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Related

Delete confirm with Sweet Alert 2 in Laravel 5.8

This is my button:
<button class="btn btn-danger" onclick="deleteConfirmation({{$wp->id}})" id="{{$wp->id}}" data-id="{{$wp->id}}"><i class="fa fa-trash"></i></button>
This is my jquery + ajax code:
function deleteConfirmation(id) {
swal.fire({
title: "Usunąć wypis?",
text: "Upewnij się czy chcesz usunąć ten wypis!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Tak, usuń go!",
cancelButtonText: "Nie, anuluj!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: 'POST',
url: "{{url('/przedsiebiorca/wypisy/destroy')}}/" + id,
data: {"_token": "{{ csrf_token() }}"},
dataType: 'JSON',
success: function (results) {
if (results.success === true) {
swal.fire("Usunięto wypis!", results.message, "success");
} else {
swal.fire("Wystąpił błąd!", results.message, "error");
}
}.then(function() {
location.reload();
});
});
} else {
e.dismiss;
}
}, function (dismiss) {
return false;
})
}
This is my Laravel Controller function destroy()
public function destroy(Request $request, $id)
{
//
$delete = \App\Wypisy::where('id', $id)->delete();
return back();
// check data deleted or not
if ($delete == 1) {
$success = true;
$message = "Wypis został usunięty !";
} else {
$success = true;
$message = "Wypisu nie znaleziono";
}
// Return response
return response()->json([
'success' => $success,
'message' => $message,
]);
return back();
}
when I click the button, show me the confirmation window, and when I click, remove it, I will receive the message jquery.min.js: 2 POST http://localhost:8000/przedsiebiorca/wypisy/3 404 (Not Found) does not happen. As I copy the link above, the removal method works correctly in Laravel. What am I doing wrong ? Any tips?
Laravel 5.8, jquery 3.4.1
If you are passing the id with POST
Your ajax function:
// code ...
type: 'POST',
url: "{{url('/przedsiebiorca/wypisy/destroy')}}",
data: {"_token": "{{ csrf_token() }}", "id": id},
dataType: 'JSON',
success: function (results) {
// code ...
Your route:
Route::post('/przedsiebiorca/wypisy/destroy', 'WypisyController#destroy');
Your Controller
public function destroy(Request $request)
{
//
$id = $request->id;
$delete = \App\Wypisy::where('id', $id)->delete();
// code ...
when i change my code for this
function deleteConfirmation(id) {
swal.fire({
title: "Usunąć wypis?",
text: "Upewnij się czy chcesz usunąć ten wypis!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Tak, usuń go!",
cancelButtonText: "Nie, anuluj!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: 'POST',
url: "{{url('/przedsiebiorca/wypisy/destroy')}}",
data: {"_token": "{{ csrf_token() }}", "id": id},
dataType: 'JSON',
success: function (results) {
if (results.success === true) {
swal.fire("Usunięto wypis!", results.message, "success");
} else {
swal.fire("Wystąpił błąd!", results.message, "error");
}
}
});
} else {
e.dismiss;
}
}, function (dismiss) {
return false;
})
}
i recive in console:
jquery.min.js:2 POST http://localhost:8000/przedsiebiorca/wypisy/destroy
500 (Internal Server Error)
send # jquery.min.js:2
ajax # jquery.min.js:2
(anonymous) # (index):395
Promise.then (async)
ue.then # sweetalert.all.js:1
deleteConfirmation # (index):390
onclick # (index):173

Preventing Jqueryvalidation from validate remote on modals open

I have script like this:
const add_modal = $('#add_modal');
const add_form = $('#add_form');
const add_button = $('#add_button');
const save_button = $('#save_button');
let add_validator = add_form.validate({
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
errorClass: 'validation-invalid-label',
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
// Different components require proper error label placement
errorPlacement: function(error, element) {
// Unstyled checkboxes, radios
if (element.parents().hasClass('form-check')) {
error.appendTo( element.parents('.form-check').parent() );
}
// Input with icons and Select2
else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo( element.parent() );
}
// Input group, styled file input
else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
error.appendTo( element.parent().parent() );
}
// Other elements
else {
error.insertAfter(element);
}
},
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20
},
email: {
required: true,
email: true,
remote: "/admin/users/check-email",
},
role: {
required: true,
},
password: {
required: true,
minlength: 12,
},
password_verification: {
required: true,
minlength: 12,
equalTo: '#password'
},
},
messages:{
email:{
remote: "Email is already taken."
}
}
});
add_button.click(function (e) {
e.preventDefault();
add_modal.modal("show");
add_validator.resetForm();
$(':input').val("");
$("#csrf").val($csrf);
});
save_button.click(function (e) {
e.preventDefault();
let form = $(this).closest('form');
let $action = form.attr('action');
let $method = form.attr('method');
let $data = form.serialize();
if (add_form.valid()) {
$.ajax({
url: $action,
type: $method,
data:$data,
success: function (result) {
if (result.type === 'success') {
add_modal.modal("hide");
add_validator.resetForm();
swalInit({
title: 'Success!',
text: result.text,
type: 'success',
timer: 3000,
}).then((reload) => {
datatables.ajax.reload();
});
} else {
swalInit({
title: 'Oops...',
text: result.text,
type: 'error',
timer: 3000,
});
}
},
})
}
});
it seems like the jqueryvalidation plugin is checking mail availability on modals open. since when I see at web inspector it sends a post request to /admin/users/check-email. how can i prevent this behaviour and make it only check when i press save_button? save_button is a button inside the modal.
Try this:
let update_validator = update_form.validate({
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
errorClass: 'validation-invalid-label',
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
// Different components require proper error label placement
errorPlacement: function(error, element) {
// Unstyled checkboxes, radios
if (element.parents().hasClass('form-check')) {
error.appendTo( element.parents('.form-check').parent() );
}
// Input with icons and Select2
else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo( element.parent() );
}
// Input group, styled file input
else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
error.appendTo( element.parent().parent() );
}
// Other elements
else {
error.insertAfter(element);
}
},
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20
},
email: {
required: true,
email: true,
remote: {
url: "/admin/users/email-available",
type: "post",
data: {
user_id: function () {
return $("#id").val();
}
}
}
},
role: {
required: true,
},
password: {
minlength: 12
},
password_verification: {
required: isPasswordPresent,
minlength: 12,
equalTo: "#update_password"
},
},
messages:{
email:{
remote: "Email is already taken."
}
},
submitHandler: function(form, event) {
event.preventDefault();
let $action = $(form).attr('action');
let $method = $(form).attr('method');
let $data = $(form).serialize();
$.ajax({
url: $action,
type: $method,
data: $data,
success: function (result) {
if (result.type === 'success') {
update_modal.modal("hide");
update_validator.resetForm();
swalInit({
title: 'Success!',
text: result.text,
type: 'success',
timer: 3000,
showCloseButton: true
}).then((reload) => {
datatables.ajax.reload();
});
} else {
swalInit({
title: 'Oops...',
text: result.text,
type: 'error',
timer: 3000,
});
}
},
})
}
});

Js Validator Plugin Remote Rules for Unique Value Checking Without Refresh Page Not Working After Ajax Call

I'm trying to validate an designation name with a remote rules.
On first time form submit by entering test value, form submitted and value bind by ajax. but after second time without refresh page i m trying to submit form by adding same value test which i added. i m not getting error for existing name.
here is the js code
$("#designationaddedit").validate({
rules: {
designation_name: {
required: true,
},
designation_copy_name: {
remote: {
url: base_url + 'Designation/designation_name_exists',
type: "post",
data: {
designation_copy_name: function() {
console.log("1");
return $( "#designation_copy_name" ).val();
}
}
}
},
},
messages: {
designation_name: {
required: "Enter Designation name"
},
designation_copy_name: {
remote: 'Designation name is already exists.'
},
},
});
$(document).on('submit', '#designationaddedit', function(event) {
event.preventDefault();
var designation_id = $('#designation_id').val();
var designation_name = $('#designation_name').val();
var action = $('#action').val();
var table = $('#designationTable').DataTable();
var info = table.page.info();
var currentpage = info.start;
if ($("#designationaddedit").valid()) {
$('.preloader').show();
$.ajax({
url: base_url + 'designation/add',
type: 'POST',
dataType: 'json',
data: { submit: 1, designation_id: designation_id, designation_name: designation_name, action: action },
success: function(response) {
$('.preloader').hide();
if (response.success == 1) {
$("#designation_model").modal('hide');
} else {
}
}
});
}
})
below code fixed my issue. I hope it's help you.
remote: { url: "http:url.com", type: "post", data: { USER_ID: userid }, async: false, // set async = false }

Extract text from input extjs and send it to php

I have a login with username and password, and a button with login. I want to send data from username and password to server-side PHP.
Ext.require([
'Ext.form.Panel',
'Ext.layout.container.Anchor'
]);
var log = Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: 'login',
title: 'Login section',
bodyPadding: '10 10 0',
width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'User Name',
anchor: '-5',
name: 'first',
id: 'userName'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '-5',
name: 'password',
inputType: 'password',
id: 'password'
}]
}
],
buttons: ['->', {
text: 'Login',
name: 'submit',
/*listeners: {
tap: function () {
var form = Ext.getCmp('userName');
//var values = form.getValues();
Ext.Ajax.request({
url: 'index.php',
params: form,
success: function (response) {
var text = response.responseText;
Ext.Msg.alert('asfasfaf', text);
},
failure: function (response) {
Ext.Msg.alert('Error', 'Error while submitting the form');
console.log(response.responseText);
}
});
}
}*/
/* handler: function () {
Ext.Ajax.request({
url: 'index.php',
method: 'POST',
params: Ext.getCmp('userName').getValue(),
success: function (response) {
Ext.Msg.alert('success ' + Ext.getCmp('userName').getValue());
},
failure: function (response) {
Ext.Msg.alert('server-side failure with status code ' + response.status);
}
});
}*/
},
{
text: 'Register?'
}]
});
});
I see that you have already tried to extract values and send request to php. May be this structure will help you. But you have to be sure that your php url accepts parameters with names 'param1' and 'param2' (or whatever your php accepts:) )
{
xtype : 'button',
text : "Submit"
formBind : true,
handler : function() {
var userName = this.up('form').down('#userName');
var password = this.up('form').down('#password');
Ext.Ajax.request({
url: url, // your php url
method: 'POST',
params: {param1: userName, param2:password },
disableCaching: false,
success: function(response, opts)
{
var text = response.responseText; // for debugging print text and decodedText
var decodedText = Ext.decode(text);
if(decodedText.success)
{
}
}
failure: function()
{
}
});
}
}
Ext.getCmp('userName').getValue();
You can use the Ext Form's submit method from within your button handler, e.g.:
// ....
buttons: [{
text: 'Submit!',
handler: function(btn) {
btn.up('form').getForm().submit({
url: 'mybackend.php',
success: function(ret) {},
failure: function(ret) {},
});
}
}],
// .....

kendoui Grid with autocomplete on its toolbar?

Update:
I tried and spent alot of my time fixing the issue, and at last problem solved.
But initially Many Thanks to OnaBai and to my colleague who helped to come this far.
Now i am stuck here.
I type username and it show display on dropdown and after pressing TAB or ENTER it show the result in grid.
The result is only shown in grid if it is from page "1", but if it is from page "2" or any other further page the result is not shown.
Here is how it is working:
but when if i search for other user which is not on page 1 then it dont show display the other user in grid. instead i get empty grid.
FireBug screenShots:
Here is my Updated Code after i did some more changes in the code.:
<?php
/*foreach($users_list_data->result() as $row){
echo $row->Username."<br />";
}*/
?>
<div id="grid"></div>
<div id="details" />
<div class="second_column_content_container">
</div>
<script>
function create_user() {
var entryform = $("#insert_user_info");
$.ajax({
type : 'POST',
url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/createUser',
data : entryform.serialize(),
success : function(response) {
$(".second_column").html(response);
}
});
}
function create_user_form() {
$.ajax({
type : 'POST',
url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/load_user_form',
success : function(response) {
$(".second_column").html(response);
}
});
}
function onChange(arg) {
var selected = "";
var grid = this;
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
selected = dataItem.Username;
});
$.ajax({
type: "POST",
url: "<?php echo base_url()?>index.php/user_management/manage_users/get_user_groups/"+selected,
beforeSend: function(){
$("#pre_image").attr("src","http://localhost/zorkif_new/images/pre.gif");
},
success: function(output_string) {
$('.data_column_a').html(output_string);
}
});
}
var wnd, detailsTemplate;
$(document).ready(function(){
var serverBaseUrl = "<?php echo base_url(); ?>";
$("#grid").kendoGrid({
dataSource:{
serverPaging: true,
transport: {
read: serverBaseUrl + "index.php/user_management/manage_users/list_view/",
update: {
url: serverBaseUrl + "index.php/user_management/manage_users/userUpdate/",
type: "POST"
}
// destroy: {
// url: serverBaseUrl + "index.php/user_management/manage_users/userDelete/",
// dataType: "jsonp"
// }
//update: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
},
error: function(e) {
alert(e.responseText);
},
schema:{
data: "data",
total: "total",
model: {
id: "UserID",
fields: {
FirstName: { editable: true },
LastName: { validation: { required: true} },
MiddleNames:{validation:{required:true}}
}
}
},
pageSize:5
},
toolbar: kendo.template($("#toolbarTemplate").html()),
scrollable: true,
selectable: "row",
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "UserID",
hidden:true
},
{
field: "Username",
title:"Username"
},
{ field: "FirstName",
title:"First Name"
},
{field:"MiddleNames"},
{field:"LastName"},
{field:"City"},
{field:"Email"},
//{field:"Actions"},
//{command: { text: "Delete", click: showDetails }, title: " ", width: "140px"},
{command: { text: "Details", click: redirectToPage }, title: " ", width: "140px" },
{ command: { text: "Edit", click: redirectToEditPage }, title: " ", width: "140px" }
],
change: onChange,
editable: "popup"
});
$("#users").kendoAutoComplete({
minLength: 3,
dataTextField: "Username",
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "GET",
dataType: "json",
contentType:'application/json; charset=utf-8',
url: serverBaseUrl + "index.php/user_management/manage_users/search_user/",
data: function (arg){
//alert(arg);
//alert({Username:autocompleteUsers.data("kendoAutoComplete").value});
return {Username : $("#users").data("kendoAutoComplete").value()};
//return $("#users").data("kendoAutoComplete").value();
}
}
}
},
change: onChangeAutoComplete
});
function onChangeAutoComplete(){
var value = this.value();
var grid = $('#grid');
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "Username", operator: "Contains", value: value });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
/*$("#users").kendoAutoComplete({
minLength: 3,
dataTextField: "Title",
//JSON property name to use
dataSource: {
pageSize: 10,
//Limits result set
transport: {
read: {
url: "/echo/json/",
//using jsfiddle echo service to simulate JSON endpoint
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{
"Title": "Doctor Who: The Trial of a Time Lord"},
{
"Title": "Doctor Who: The Key to Time"},
{
"Title": "Doctor Who: The Time Meddler"},
{
"Title": "Doctor Who: The End of Time"}
])
}
}
}
}
});*/
/*change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "UserID", operator: "eq", value: value });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});*/
/*$("#users").blur(function() {
var data = $(this).data("kendoAutoComplete").dataSource._data,
nbData = data.length,
found = false;
for(var iData = 0; iData < nbData; iData++) {
if(this.value === data[iData].Title)
found = true;
}
console.log(found);
});*/
wnd = $("#details").kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function redirectToPage(e){
e.preventDefault();
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
$.ajax({
type: "POST",
url: "<?php echo base_url().'index.php/user_management/manage_users/ViewProfile/'?>"+JSON.parse(item.UserID),
success: function(output_string){
$('.second_column_content_container').html(output_string);
//$('.second_column_content_container').innerHTML("hello");
//alert(output_string);
},
error: function(data){
alert("error");
}
});
}
function redirectToEditPage(e){
e.preventDefault();
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
$.ajax({
type: "POST",
url: "<?php echo base_url().'index.php/user_management/manage_users/edit_user/'?>"+JSON.parse(item.UserID),
success: function(output_string){
$('.second_column_content_container').html(output_string);
//$('.second_column_content_container').innerHTML("hello");
//alert(output_string);
},
error: function(data){
alert("error");
}
});
}
//show details on a popup
function showDetailsPopup(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
//This will redirect to Next Page
function showDetails(e) {
e.preventDefault();
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
$.ajax({
type: "POST",
url: "<?php echo base_url().'index.php/user_management/manage_users/list_view/'?>"+JSON.parse(item.UserID),
success: function(data){
alert("done");
//$('.second_column_content_container').html(output_string);
//$('.second_column_content_container').innerHTML("hello");
//alert(output_string);
},
error: function(data){
alert("error");
}
});
//var grid = $("#grid").data("kendoGrid");
//alert(JSON.parse(item.UserID));
//window.location.href="http://www.google.com/";
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName #</h2>
<h2>City: #= City # </h2>
</div>
</script>
<script type="text/x-kendo-template" id="toolbarTemplate">
<div class="toolbar">
<label class="category-label" for="users">Search Users: </label>
<input type="text" id="users" style="width: 250px;" />
</div>
</script>
<div class="data_column_a">
<img src="" id="pre_image" >
</div>
Now how to solve this very extremely difficult problem O_o??
Update:
This Username is on Page 2 of the Grid as can be seen in ScreenShot.
But during Search, it sends the headers of page 1 when i search for username that is other than of page 1.
Banging my head to walls, How to Solve ?
The problem seems to be related to you autocomplete definition that is not sending any Username argument on read. Try defining transport.read as:
transport : {
read : {
url : "search_user.php",
data: function (arg) {
return {Username : autocompleteUsers.data("kendoAutoComplete").value()};
}
},
dataType: "json",
type : "POST"
},
EDIT: For applying selected value on autocomplete as filtering condition for the grid. You should do:
var autocompleteUsers = $("#users").kendoAutoComplete({
dataTextField: "Username",
dataSource : {
severFiltering: true,
transport : {
read : {
url : "search_user.php",
data: function (arg) {
return {Username: autocompleteUsers.data("kendoAutoComplete").value()};
}
},
dataType: "json",
type : "POST"
}
},
change : function () {
var username = autocompleteUsers.data("kendoAutoComplete").value();
var filter = {
logic : "and",
filters: [
{
ignoreCase: true,
field : "Username",
value : username,
operator : "startswith"
}
]
};
$("#grid").data("kendoGrid").dataSource.filter(filter);
}
});

Categories