I am using Grails grails-2.5.6 version. I am trying to render a view not template from the controller during an ajax call. But failing. It shows no error at all and stay on the current page. It call the controller action also.
Here is my code. My AJAX call:
$(document).on("click", ".dashboard-item", function(e) {
var $element = $(this);
var controller = $element.attr("controller"),
action = $element.attr("action");
$.ajax({
url: CONTEXT_PATH + '/' + controller + '/' + action,
type: "POST",
data: {
id: 9999,
value: "val9999"
},
beforeSend: function() {
$.blockUI({
css: {
border: 'none',
padding: '5px',
'background-color': 'transparent',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .8,
color: '#fff',
cursor: 'default'
},
message: '<i class="fa fa-refresh fa-spin" style="font-size:40px;"></i> ' +
'<span class="ajax-wait-message">Please Wait while Loading ...</span>'
});
},
success: function (response) {
$.unblockUI();
},
error: function (xhr, textStatus, errorThrown) {
$(".alert-danger").removeClass("hidden").find('.dng-span').text(errorThrown);
$.unblockUI();
}
});
});
My controller render:
def testA1() {
render(view: 'test1')
}
What can I try next?
Just overwrite the success part as follows >>
success: function (response) {
document.open();
document.write(response);
document.close();
$.unblockUI();
}
Related
I am new at Laravel, I am trying to delete data with ajax, when I click to delete button, the page is refreshing but data is deleting perfectly but that should not be reloaded.
Controller
public function destroy($id)
{
$delete = Digitizing::where('id', $id)->delete();
return back();
}
HTML view
<a href="{{route('digitizing.delete',$digitizing->id)}}"
class="btn btn-danger" onclick="deleteConfirmation({{$digitizing->id}})">Delete</a>
<script type="text/javascript">
function deleteConfirmation(id) {
Swal.fire({
title: "Delete?",
text: "Please ensure and then confirm!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: 'POST',
url: "{{url('digitizing/delete')}}/" + id,
data: {_token: CSRF_TOKEN},
dataType: 'JSON',
success: function (results) {
if (results.success === true) {
swal("Done!", results.message, "success");
} else {
swal("Error!", results.message, "error");
}
}
});
} else {
e.dismiss;
}
}, function (dismiss) {
return false;
})
}
</script>
**Delete wants a get method because you have to give only ID to delete.**
**WEB.PHP**
Route::get('digitizing/delete/{id}','YourController#destroy');
**SCRIPT**
let id = $('#my_id').val();
$.ajax({
type: 'GET',
url: "{{url('digitizing/delete')}}/" + id,
data: {
_token: '{{csrf_token()}}',
},
success: function () {
alert('Successfully Deleted');
}
}).fail(function(){
console.log('problem with route = digitizing/delete');
});
Kendo Window opening normally only in first attempt. After closing window, another attempts result in blank window without data.
}).success(function (ContractID) {
$('#save-contract-edit').
append(
'<a role="button" id="print-edit" class="k-button k-button-icontext k-primary export-pdf updateContract" href="\#"></a>')
$('#print-edit').kendoButton({
click: function (e) {
openWindowEdit($('#contract-edit').data('contract_id_edit'))
},
})
function openWindowEdit (contract_id) {
$("#dialogEdit").kendoWindow({
width: '34%',
minWidth: 100,
title: 'Umowa',
actions: [
'Close'
],
close: onClose,
visible: false,
position: {
top: 100,
left: '33%'
},
content: {
url: API_URL + contract_id,
dataType: 'json',
iframe: false,
template: $('#tmpPrint').html()
}
}
);
var windowEdit = $('#dialogEdit').data("kendoWindow");
windowEdit.refresh({
dataType: "json",
url: API_URL + contract_id,
template: $('#tmpPrint').html()
});
windowEdit.open().center()
}
...
I just migrated to a different bootstrap template now my ajax functions is not working and my php file which handles the functions is not appearing in the XHR inspect tool of chrome.
I only have this jquery script ? is this enough for running an ajax function? I
<!-- Jquery Core Js -->
<script src="../dashboard-assets/plugins/jquery/jquery.min.js"></script>
HTML CODE
<form id="upload_book_form" method="POST">
<p>Upload Books</p>
<input type="file" id="uploadbookinfo" name="uploadbookinfo" value="Import" />
</form>
SCRIPT FUNCTION
<script type="text/javascript">
$(document).ready(function() {
//upload book
$('#uploadbookinfo').change(function() {
$('#upload_book_form').submit();
});
$('#upload_book_form').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: "adminfunctions.php",
method: "POST",
data: new FormData(this),
contentType: false,
processData: false,
success: function(data) {
var getdata = data.trim();
if (getdata == "SUCCESS") {
swal({
title: 'Success!',
text: 'Book Added , Try refreshing the page',
type: 'success',
confirmButtonClass: "btn btn-success",
buttonsStyling: false
}).then(function() {
$("#uploadbookinfo").val(null);
});
} else if (getdata == "ERRORFILETYPE") {
swal({
title: 'Oops...',
text: 'File type is not supported',
type: 'error',
confirmButtonClass: "btn btn-danger",
buttonsStyling: false
}).then(function() {
$("#uploadbookinfo").val(null);
});
} else {
swal({
title: 'Sorry for the inconvenience!',
text: "There's a problem. Please contact the technical support for any concerns and questions.!",
type: 'error',
confirmButtonClass: "btn btn-info",
buttonsStyling: false
}).then(function() {
$("#uploadbookinfo").val(null);
});
}
},
error: function(jqXHR, exception) {
console.log(jqXHR);
}
});
});
});
</script>
I'm looking for solution in opencart.
Need to rebuild cart.add function for adding product with option value.
By default:
'add': function(product_id, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('#cart > button').button('reset');
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
checkout/cart/add php side for option:
if (isset($this->request->post['option'])) {
$option = array_filter($this->request->post['option']);
} else {
$option = array();
}
Any solutions?
You can do this in the following way. Create a simple Javascript object.
var productData = {'product_id' : PRODUCT_IDS.CARD, 'quantity': 1,'option':{'229':"Some option value"}};
And send the request as follows. Converting the object to post params using the param function.
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $.param(productData),
dataType: 'json',
beforeSend: function () {
},
complete: function () {
},
success: function (json) {
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
Also there are some other ways to do this, you can see possible payload formats in the /controller/checkout/cart.php file.
Although I have tried several times, I could not solve trying many method.
Shortly this is the thing what I want to do : only get modified or new rows as an object or JSON string.
You should use set for changing the content of a record. Then, getting the records modified is just iterating through datasource.data() array and checking which items have dirty set to true.
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);
The following snippet shows both that changing the data programmatically or via Grid built-in incell edition is compatible with this approach.
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Discontinued: { type: "boolean" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
columns: [
"ProductName",
{ field: "Discontinued", width: 120 }
],
editable: "incell",
selectable: true
}).data("kendoGrid");
$("#change").on("click", function() {
var sel = grid.select();
if (sel.length) {
var item = grid.dataItem(sel);
item.set("Discontinued", true);
}
});
$("#show").on("click", function() {
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
$("#logger").html(JSON.stringify(dirty, null, 2));
});
});
#logger {
min-height: 60px;
border: 1px solid black;
overflow-x: scroll
}
#grid {
width: 500px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">
<div>
This button changes the Discontinued field to "true" for the selected row:
<button id="change" class="k-button">Change selected</button>
</div>
<div>
Click for displaying modified rows:
<button id="show" class="k-button">Show dirty</button>
<pre id="logger"></pre>
</div>
<div id="grid"></div>
</div>