I would like to disable actions on JQGrid like clicking on checkbox, scrolling down the page when ajax operation is going on. I have tried to use loadui: 'block' in JQGrid but is not working. Any other set of code that needs to be added ?
Your question is not clear to me. But, if you want to block screen when you call an ajax function, you can do it on beforeSend and unblock it on complete :
$.ajax({
//type, url, etc.
beforeSend: function(){
$.blockUI.defaults.applyPlatformOpacityRules = false;
$.blockUI({
message : "Loading...",
centerY: 0,
baseZ: 2000,
css: { top: '0px', left: '', right: '512px' }
});
},
complete: function(xmldata, stat){
$.unblockUI();
}
});
But, if you're trying to make it on add/edit/delete event of jqGrid, you should block on onclickSubmit: function(params, postdata) { //block screen } and unblock it on afterSubmit: function(response, postData) { //unblock screen }. You can find more info about jqGrid events at this link and this one
Thanks for the reply. Couldn't make it work though.
Solved with below piece of code.
loadBeforeSend: function(){
var $gbox = $("#list").closest('.ui-jqgrid');
$gbox.block({
message: "<h1>Loading...</h1>",
css: { border: "3px solid #a00" }
});
},
loadComplete: function(data) {
var $gbox = $("#list").closest('.ui-jqgrid');
$gbox.unblock();
},
Related
:-)
I think I encountered probably a bug on jqGrid 5.8.3 js I am using, but I am not sure…I wrote this code to refresh grid after submit the formedit:
ondblClickRow: function(rowid) {
jQuery(this).jqGrid(‘editGridRow’,
rowid,
{
editCaption: “Update”,
recreateForm:true,
dataheight: 180,
height: 270,
width: 350,
top: 40,
left: 170,
onclickSubmit : function (options, postdata) {
if( confirm(‘Update this record (Y/N)?’) ) {
//var rowid = postdata[this.id];
console.log( JSON.stringify(postdata) );
return {
// myParam: $(this).jqGrid(“getCell”, rowid, “URL”)
// test : “bla bla”
returndata : JSON.stringify( postdata )
//returndata : postdata
};
}
},
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
},
closeOnEscape: true,
closeAfterEdit: true,
afterSubmit : function() { $(“#grd-points_registry”).jqGrid(‘setGridParam’,{datatype:’json’}).trigger(‘reloadGrid’); }
//reloadAfterSubmit: false,
//aftersavefunc : function() { setTimeout( function() { $(“#grd-points_registry”).trigger(“reloadGrid”); }, 10); }
}
);
}
since I found searching on the web about .trigger(‘reloadGrid’) to force reloading after edit/add but the editform won’t close after triggered the reloadGrid thing and in debug on Chrome I see this:
jquery.jqGrid.min.js?ver=5.8.3:652 Uncaught TypeError: Cannot read properties of undefined (reading ‘0’)
at Object.complete (jquery.jqGrid.min.js?ver=5.8.3:652:172)
at fire (jquery.js?ver=3.6.0:3500:31)
at Object.fireWith (jquery.js?ver=3.6.0:3630:7)
at done (jquery.js?ver=3.6.0:9811:21)
at XMLHttpRequest.<anonymous> (jquery.js?ver=3.6.0:10057:9)
but all fields are numbers in this case …. same thing occurs also on edit and add inside navgrid pager…. any idea?
Thanks! Cheers!
Luigino
You do not need to do reloadGrid in afterSubmit, since the grid do reloading automatically after the data is posted to the server. In your case you do two reloading one after other which causes unexpected behavior
Actually reloading in form editing is option and you can disable and enable it. By default the reloading is on.
In your case I suggest you to set Json datatype in onclickSubmit event (if no errors) and not reload the grid, since the parameter is set and when you submit the data it is reloaded (because of json datatype already).
I highly recommend you first to read the docs.
I am facing with overlapping problem after Ajax Call. I am using a plug-in called "Nerve Slider" for my grid layout(as you see in here (on the far right)).
After I did this:
<script type="text/javascript">
$(function(){
$('.kategori-link').click(function(){
$.ajax({
type: 'POST',
url: '<?php echo base_url('tr/main/index'); ?>',
data: {kategori:'ucak-bileti'},
dataType: 'html',
success: function(data){
var result = $('<div />').append(data).find('.iAmTest').html();
$('.iAmTest').html(result);
//console.log(result);
},
error: function(){
alert("Sorry! Something went wrong!");
}
});
return false;
});
});
All grids (Each grid has Image, Header, Info as you see in the link above) which I got after database interaction are overlapped! What do you think causes this to happen?
Thank you!
EDIT
Plug-in Scripts:
$(function(){
$(".slider-wrapper").nerveSlider({
sliderWidth: "100%",
slideTransitionSpeed: 700,
slideTransitionEasing: "easeInOutExpo",
slidesDraggable: true,
sliderResizable: true,
sliderFullscreen: false
});
});
$(function(){
$(".cnt-slider-wrapper").nerveSlider({
sliderAutoPlay: false,
slideTransitionSpeed: 700,
slideTransitionEasing: "easeInOutExpo",
slidesDraggable: true,
sliderResizable: true,
sliderFullscreen: false,
showPause: false
});
$(".iAmTest").puzzleGrid({
// options...
});
});
This may or may not work, I have not tested this.
While not a clean solution, you can call $(window).trigger("resize"); after your $('.iAmTest').html(result); line. The plugin script has a function called setuppanels(); that is attached to the window resize event. That re-initialises the content.
I have created an application server side that will create a pdf of a report when requested. Then the link of that report can then be sent back to the client.
My question is how do I hook this up to a button click event in my asp.net mvc website. So the scenario is:
User fills in a few boxes.
Clicks the generate report button.
A little loading feedback indicator is shown.
A request is sent to the server, the server then generates the PDF report and sends back a url link to the pdf that is being hosted on the server.
The pdf will then be shown in the users browser (maybe in a new window).
Is this possible and is there any examples around that show how to do it?
Thanks in advance
I've done something similar.
When the user clicks the button it send an ajax request to the server passing some data:
$.ajax({
type: 'POST',
dataType: 'json',
url: '<%=Url.Action("GenerateReport", "MyController")%>',
data: { Param1: $('#Param1').val() , Param2: $('#Param2').val() },
beforeSend: function(xhr) {
$.blockUI({ message: '<h1> printing ...</h1>', css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'} });
},
success: function(result) {
if (result.Success) {
FetchPdfDocument('<%=Url.Action("GetPdfReport", "MyController", New With {.id = "/"})%>' + result.Guid);
}
else {
alert("Problems!");
}
},
complete: function() {
$.unblockUI();
},
error: function(req, status, error) {
alert(error);
}
});
The controller writes the document on the disk and sends back a guid which is the name of the PDF document.
This is the other bit of javascript which opens the file creating an IFRAME:
function FetchPdfDocument(UrlToPdf)
{
$('#ifPdfReport').remove();
$(document.body).append('<IFRAME id="ifPdfReport" style="display:none;">');
$('iframe#ifPdfReport').attr('src', UrlToPdf);
// $('#ifPdfReport').load(function () { });
}
I've used jQuery BlockUI as loading feedback indicator.
Hope it helps.
I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:
#using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
{
#Html.ValidationSummary(false, "Please fix these errors.")
When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??
Really needs help here... Thanks...
UPDATE (add in the script for my dialog)
$createdialog.dialog("option", "buttons", {
"Cancel": function () {
//alert('Cancel');
$createdialog.dialog('close');
},
"Submit": function () {
var frm = $('#formData');
$.ajax({
url: '/Food/CreateFood',
type: 'POST',
data: frm.serialize(),
success: $createdialog.dialog('close')
});
}
});
Once dropped, open dialog:
// Once drop, open dialog to create food
options.drop = function (event, ui) {
// Get the ContainerImgName which food dropped at
var cimg = $(this).attr('id');
// Pass in ContainerImgName to retrieve respective ContainerID
// Once success, set the container hidden field value in the FoodForm
$.ajax({
url: '/food/getcontainerid',
type: 'GET',
data: { cImg: cimg },
success: function (result) { $('#containerID').val(result); }
});
clear();
$.validator.unobtrusive.parse($createdialog);
$createdialog.dialog('open');
};
I've faced the same problem, solved with:
$(name).dialog({
autoOpen: true,
width: options.witdth,
heigth: options.height,
resizable: true,
draggable: true,
title: options.title,
modal: true,
open: function (event, ui) {
// Enable validation for unobtrusive stuffs
$(this).load(options.url, function () {
var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));
});
}
});
of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)
For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.
I'm trying to disable a button after it's clicked. I have tried:
$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
error: errorhandler,
dataType: 'json'
});
$("#ajaxStart").attr("disabled", false);
});
but the button is not getting disabled. When I remove $("#ajaxStart").attr("disabled", false); the button gets disabled.
While this is not working as expected, I think the code sequence is correct. Any help will be appreciated.
Put $("#ajaxStart").attr("disabled", false); inside the success function:
$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
$("#ajaxStart").attr("disabled", false);
},
error: errorhandler,
dataType: 'json'
});
});
This will ensure that disable is set to false after the data has loaded... Currently you disable and enable the button in the same click function, ie at the same time.
In your code, you just disable & enable the button on the same button click,.
You have to enable it inside the completion of AJAX call
something like this
success: function(response){
$("#ajaxStart").attr("disabled", false);
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
I have solved this by defining two jquery functions:
var showDisableLayer = function() {
$('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
$("#loading").height($(document).height());
$("#loading").width($(document).width());
};
var hideDisableLayer = function() {
$("#loading").remove();
};
The first function creates a layer on top of everything. The reason the layer is white and completely opaque, is that otherwise, IE allows you to click through it.
When doing my ajax, i do like this:
$("#ajaxStart").click(function() {
showDisableLayer(); // Show the layer of glass.
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
hideDisableLayer(); // Hides the layer of glass.
},
error: errorhandler,
dataType: 'json'
});
});
I solved this by using global function of ajax
$(document).ajaxStart(function () {
$("#btnSubmit").attr("disabled", true);
});
$(document).ajaxComplete(function () {
$("#btnSubmit").attr("disabled", false);
});
here is documentation link.
The $.ajax() call "will not block" -- that means it will return immediately, and then you enable the button immediately, so the button is not disabled.
You can enable the button when the AJAX is successful, has error, or is otherwise finished, by using complete: http://api.jquery.com/jQuery.ajax/
complete(XMLHttpRequest,
textStatus)
A function to be
called when the request finishes
(after success and error callbacks are
executed). The function gets passed
two arguments: The XMLHttpRequest
object and a string categorizing the
status of the request ("success",
"notmodified", "error", "timeout", or
"parsererror"). This is an Ajax Event.