I have a jqgrid with inline editing with custom buttons, I'm trying to show a custom message or popup if the save was unsuccesul:
editurl: '#Url.Action("UpdateMatrixData")',
datatype: "json",
postData: {
sp: function () { return getFilter(); }
},
postData: {
StartDate: function () { return $("#StartDate").val(); },
EndDate: function () { return $('#EndDate').val(); },
},
gridComplete: function ()
{
var ids = jQuery("#evGrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++)
{
var cl = ids[i];
be = "<input style='height:15px;width:15px;' title='Edit selected row' type='button' class='EditGridButton' onclick=\"jQuery('#evGrid').editRow('" + cl + "');\" />"
se = "<input style='height:15px;width:15px;' title='Save row' type='button' class='SaveButton' onclick=\"jQuery('#evGrid').saveRow('" + cl + "', '', '', '', reload());\" />" // dont Need to refesh grid after saving row - call reload function
ce = "<input style='height:15px;width:15px;' title='Cancel row editing' type='button' class='CancelButton' onclick=\"jQuery('#evGrid').restoreRow('" + cl + "');\" />";
jQuery("#evGrid").jqGrid('setRowData', ids[i], { act: be + se + ce });
}
},
function reload(rowid, response) {
alert(response)
$(this).jqGrid('setGridParam', { datatype: 'json' });
$(this).trigger('reloadGrid', [{ page: 1 }]);
}
the response is null however? and its being called before the updateMatrixData method gets called?
updateMatrixData returns Json(true) or Json(false)
return Json(isSucess);
Your main error in the usage of
onclick=\"jQuery('#evGrid').saveRow('" + cl + "', '', '', '', reload());\"
instead of
onclick=\"jQuery('#evGrid').saveRow('" + cl + "', '', '', '', reload);\"
reload is callback function which will be called by jqGrid. If you use reload(), then your code calls reload mit empty parameters, before jqGrid do that (jqGrid don't get the reference of the function at all and get undefined returned from reload() instead).
Related
JS function:
(function () {
//fix to dismiss tooltips of iOS Safari
if ('ontouchstart' in document.documentElement) {
$('body').css('cursor', 'pointer');
}
})();
function getOrderProgressBar(orderNumber) {
$('#order-status-container').hide();
$.ajax({
url: '/GetOrderProgressBar',
type: "POST",
data: {
orderNumber: orderNumber
},
success: function (data) {
if (data.Success) {
var activeStepTitle = "";
var stepsFraction = "";
$(".order-progress-bar-container").empty();
var html = '<div class="order-progress-bar" data-current-step-index="' + data.CurrentActiveStepIndex + '" data-current-step-description="' + data.CurrentActiveStepDesctiption + '">';
I am needing to get the value of the last line "data.CurrentActiveStepDescription" I have tried several different ways to put the value out but cannot get the program to recognize the function.
Any help is greatly appreciated!! Thank you
I have the following problem when creating an inline calendar in a popup in Framework7, in the first view it appears perfect, but when you close the modal and return to the home page and then return to the internal page and open the inline calendar again it does not appear.
I am creating a calendar inside a component called calendar that is imported by a modal-date.
mounted() {
const self = this;
const app = self.$f7;
var $$ = Dom7;
var selected;
var monthNames = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro",
];
var calendarInline = app.calendar.create({
containerEl: "#demo-calendar-inline-container",
value: [new Date()],
minDate: new Date(),
renderToolbar: function () {
return (
'<div class="toolbar calendar-custom-toolbar no-shadow">' +
'<div class="toolbar-inner">' +
'<div class="left">' +
'<a href="#" class="link icon-only"><i class="icon icon-back ' +
(app.theme === "md" ? "color-black" : "") +
'"></i></a>' +
"</div>" +
'<div class="center"></div>' +
'<div class="right">' +
'<a href="#" class="link icon-only"><i class="icon icon-forward ' +
(app.theme === "md" ? "color-black" : "") +
'"></i></a>' +
"</div>" +
"</div>" +
"</div>"
);
},
on: {
init: function (c) {
$$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
$$(".calendar-custom-toolbar .left .link").on("click", function () {
calendarInline.prevMonth();
});
$$(".calendar-custom-toolbar .right .link").on("click", function () {
calendarInline.nextMonth();
});
$$(".calendar-day-today").removeClass(
"calendar-day-selected calendar-day-disabled"
);
},
monthYearChangeStart: function (c) {
$$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
},
dayClick: function (calendar, dayEl, year, month, day) {
// SET IS LOADING
self.$store.commit('SET_IS_LOADING', true);
selected = {
day: day,
month: month,
year: year,
};
var currentDay = $$(".calendar-day-today"); //current day
currentDay.removeClass("calendar-day-disabled");
dateSelected(selected);
},
},
});
function dateSelected(selected) {
self.selected(selected);
}
}
There is an example on the website on how to construct child nodes from custom data:
$("#tree").dynatree({
[…]
onLazyRead: function(node){
$.ajax({
url: […],
success: function(data, textStatus){
// In this sample we assume that the server returns JSON like
// { "status": "...", "result": [ {...}, {...}, ...]}
if(data.status == "ok"){
// Convert the response to a native Dynatree JavaScipt object.
var list = data.result;
res = [];
for(var i=0, l=list.length; i<l; i++){
var e = list[i];
res.push({title: "" + i + ": " + e.fcurr + "-" + e.tcurr + ":" + e.ukurs,
icon: false});
}
// PWS status OK
node.setLazyNodeStatus(DTNodeStatus_Ok);
node.addChild(res);
}else{
// Server returned an error condition: set node status accordingly
node.setLazyNodeStatus(DTNodeStatus_Error, {
tooltip: data.faultDetails,
info: data.faultString
});
}
}
});
[…]
});
But there is no mention on how to do this for the initialization of the tree. I tried the following:
initAjax: {
type: "POST",
url: "/doSomething",
data: ...
contentType: "application/json; charset=utf-8"
success: function(data, textStatus){
// In this sample we assume that the server returns JSON like
// { "status": "...", "result": [ {...}, {...}, ...]}
if(data.status == "ok"){
// Convert the response to a native Dynatree JavaScipt object.
var list = data.result;
res = [];
for(var i=0, l=list.length; i<l; i++){
var e = list[i];
res.push({title: "" + i + ": " + e.fcurr + "-" + e.tcurr + ":" + e.ukurs,
icon: false});
}
// PWS status OK
node.setLazyNodeStatus(DTNodeStatus_Ok);
node.addChild(res);
}else{
// Server returned an error condition: set node status accordingly
node.setLazyNodeStatus(DTNodeStatus_Error, {
tooltip: data.faultDetails,
info: data.faultString
});
}
}
},
But then I get an error saying success doesn't work and to use some other method, but there is no documentation on how to use the other method? Can anyone help me out here? I tried using dataFilter to filter out my json string that is being returned, but that didn't work; I tried to use onPostInit and postProcess but don't know exactly what to do since there is no documentation: Do I return the data string after its been reformated, do I return the json version of the data? do I just do data = format(data)?
Any help would be greatly appreciated.
I will be having a lot of status codes and need to do different things based on the code; such as if I have code 1 it means I need to change the class of the node to have red text; or if I return code 2 it means there was an internal error and I need to add that to the node text; etc.
I'm a beginner in MVC. I have a column which must be shown as a picture (now it is a text) and also when user click to picture it shows the dialog with new view. As i googled, i can use formatter only one time, what should i use then to implement it?
{ name: 'SimType', label: 'SimType', template: columntemplates.textTemplate, width: 50, editable: true, editrules: { edithidden: false }, formatter: linkFormat2, unformat: linkUnFormat2, editoptions: { disabled: 'disabled' } },
function linkFormat2(cellvalue, options, rowObject)
{
var linkUrl = '#Url.Action("GetMobilePhoneModels", "MobilePhoneModel", new { phonenumber = "Id" })'.replace('Id', rowObject['PhoneNumber']);
return '<span class="MobilePhoneModel">' + cellvalue + '</span>';
}
OR
function linkFormat2(cellvalue, options, rowObject)
{
var cellValueInt = parseInt(cellvalue);
if (cellValueInt = "mobile")
return "<img src='../../Content/Images/Devices/mobile.png' width='11px' height='20.75px' alt='" + cellvalue + "' title='" + cellvalue + "' />";
}
it works separatly, but not possible together.
Any help is appreciated. Thanks.
i solved it by combining, if somebody need:
function linkFormat2(cellvalue, options, rowObject) {
var cellValueInt = parseInt(cellvalue);
if (cellValueInt = "mobile")
{
var linkUrl = '#Url.Action("GetMobilePhoneModels", "MobilePhoneModel", new { phonenumber = "Id" })'.replace('Id', rowObject['PhoneNumber']);
return '<span class="MobilePhoneModel"><img src="../../Content/Images/Devices/mobile.png" width="11px" height="20.75px" alt="' + cellvalue + '" title="' + cellvalue + '" /></span>';
}
}
I'm trying to add this short function - which swaps images according to the active tab in jQuery UI Tabs - below to the larger function below, which is the jQuery Address plugin that adds forward/back and #URL functions to UI Tabs: http://www.asual.com/jquery/address/
I need to add the shorter function so it fires when the tab changes - so it changes the image in #headerwrapper - but I can't quite tell exactly where the tab change is fired in the main address function. Any ideas on how to add this shorter function to jQuery Address?
Image change function I need to add to the main function below to run when the tab change fires:
var img = $(ui.panel).data("image");
$("#headerwrapper")
.animate({ opacity: 'toggle' }, function() {
$(this).css("background-image", "url(" + img + ")")
.animate({ opacity: 'toggle' });
});
}
Main jQuery Tabs Address function:
<script type="text/javascript">
var tabs,
tabulation = false,
initialTab = 'home',
navSelector = '#tabs .ui-tabs-nav',
navFilter = function(el) {
return $(el).attr('href').replace(/^#/, '');
},
panelSelector = '#tabs .ui-tabs-panel',
panelFilter = function() {
$(panelSelector + ' a').filter(function() {
return $(navSelector + ' a[title=' + $(this).attr('title') + ']').size() != 0;
}).each(function(event) {
$(this).attr('href', '#' + $(this).attr('title').replace(/ /g, '_'));
});
};
if ($.address.value() == '') {
$.address.value(initialTab);
}
$.address.init(function(event) {
$(panelSelector).attr('id', initialTab);
$(panelSelector + ' a').address(function() {
return navFilter(this);
});
panelFilter();
tabs = $('#tabs')
.tabs({
load: function(event, ui) {
$(ui.panel).html($(panelSelector, ui.panel).html());
panelFilter();
},
fx: {
opacity: 'toggle',
duration: 'fast'}
})
.css('display', 'block');
$(navSelector + ' a').click(function(event) {
tabulation = true;
$.address.value(navFilter(event.target));
tabulation = false;
return false;
});
}).change(function(event) {
var current = $('a[href=#' + event.value + ']:first');
$.address.title($.address.title().split(' - ')[0] + ' - ' + current.text());
if (!tabulation) {
tabs.tabs('select', current.attr('href'));
}
}).history(true);
document.write('<style type="text/css"> #tabs { display: none; } </style>');
</script>