Forum
Log In
Home
Topic RSS
15:56
23/07/2008
Offline
Tony,
I've been using IE to develop our website. We now are ensureing it works for FF2 and Chrome.
We are using jqGrid V3.2.4.
We have an inline edit jqgrid. After I have edited the data in the row I try to retreive it using the $("#LIST).getRowData(rowNum) function. When using IE everything works, it returns the data with the changes I made. When using FF2 I get strange resutls. Instead of getting the modified data, I get the original data.
Have you seen this before? Has anyone else seen this before?
I ended up writing a function that uses the rowNumber, Column name, and Element type to get the value. I added element type because I was having issues with getting the selected value from the dropdownlist. This function will properly grab the cell's value for both IE and FF2.
if (rowNum) {
this.each(function() {
var $t = this, nm;
$('#' + rowNum + ' td', $t.grid.bDiv).each(function(i) {
nm = $t.p.colModel[i].name;
if (nm == columnName) {
//FF2
if (type == "select") {
var res1 = this.lastChild;
res = res1.value;
//IE
if (res == "")
//parses the html to find the element in the '<selected>' tags
res = getSelected(this.innerHTML);
}
else {
var res1 = this.lastChild;
res = res1.value;
}}
I shouldn't need this function, am I doing something wrong somewhere?
Thanks
Brad
03:10
Moderators
30/10/2007
Offline
Hello,
Could you plese post your code. It is important to known,
that the inline edit is not compatibale with getRowData. You can use
this method (getRowData) after the row is saved and not when you edit it.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
08:19
23/07/2008
Offline
ere is my function that sets the values in the jqGrid
//Get all subjobs for the given JobID
function getSubJobsInformation() {
$("#subJobGridErrDiv").text("");
$.blockUI();
$.ajax({
cache: false,
url: '/UpdateJobStatus/GetJobs/',
dataType: "json",
success: function(result) {
$("#list").clearGridData(); //version 3.2
$("#subJobGridErrDiv").text("");
// populate the table.
for (var i = 0; i < result.JobInfo.length; i++) {
with (result.JobInfo[i]) {
var TMCheckBox = (TM) ? "checked='checked'" : "";
TMCheckBox = "<input type='checkbox'" + TMCheckBox + " DISABLED/>";
var editImg = document.createElement("img");
$(editImg).attr({ id: "editBtn", name: "editBtn", src: "../../Content/Images/newedit.gif" });
editImg.onclick = new Function("editJob(" + (i + 1) + ");");
var promiseDate = PromiseDate;
if (PromiseDate == "")
promiseDate = "Click to Set";
if (Bid == null || Bid == "")
Bid = "0";
Bid = Bid + ".00";
var note = document.createElement("textarea");
$(note).attr({ id: "Notes", name: "Notes", rows: 3, cols: "27", readonly: "true" });
$(note).html(StatusNote);
var row = { Edit: editImg, JobName: JobName, JobID: JobID, Customer: Customer, Lead: Lead, Status: Status, StatusList: Status, TM: TMCheckBox, Promised: promiseDate, Bid: formatNumber(Bid), DateChanged: DateChanged, Notes: $(note) };
//only add the row if the status isn't completed
if (Status != "Completed")
$("#list").addRowData(i + 1, row);
}
}
$.unblockUI();
},
error: function(errorData) {
ErrorPopUp(errorData.responseText);
}
}
);
}
08:37
23/07/2008
Offline
Here is the function we use to set the row so the user can edit/ update
//The users clicked the edit button. Hide and show the proper column and format the column the data
function editJob(rowNum) {
var rowData = $("#list").getRowData(rowNum);
$("#subJobGridErrDiv").text("");
jQuery("#list").hideCol(["JobID", "Customer", "Edit", "Status", "DateChanged"]);
jQuery("#list").showCol(["Lead", "Promised", "Save", "Cancel", "StatusList"]);
$.blockUI();
$.ajax({
cache: false,
url: '/UpdateJobStatus/GetEditInfo/',
dataType: "json",
type: "post",
success: function(result) {
//getCellData gets the object in each cell. Using the object can find the value of the data. (simular to getHtmlText)
var note = $("#list").getCellData(rowNum, "Notes", "textArea");
//set the text box back to a string. before 'editRow'
jQuery("#list").setRowData(rowNum, { Notes: note });
$('#list').editRow(rowNum);
//remove $,',' and ending .00
var bidValue = $("#list").getCellData(rowNum, "Bid", "text");
bidValue = unFormatNumber(bidValue);
var bid = document.createElement("textarea");
$(bid).attr({ id: "bidBx", name: "bidBx", align: "right", editable: true, rows: "1", cols: "11" });
$(bid).text(bidValue);
$(bid).keypress(function(event) { $("#list").preventLetterEnter(event, $(bid).val()) });
$(bid).keyup(function(event) { $("#subJobGridErrDiv").text(""); validateBid($(bid).val()); });
jQuery("#list").setRowData(rowNum, { Bid: bid });
note = document.createElement("textarea");
$(note).attr({ id: "Notes", name: "Notes", rows: 3, cols: "27" });
$(note).html($("#list").getCellData(rowNum, "Notes", "textArea"));
$(note).keyup(function() { verifyCommentCount($(note)) });
jQuery("#list").setRowData(rowNum, { Notes: note });
//set the TM check bx.
var tmCheckBox = $("#list").getCellData(rowNum, "TM", "checkBox");
tmCheckBox = (tmCheckBox) ? "checked='checked'" : "";
tmCheckBox = "<input type='checkbox' " + tmCheckBox + " />";
jQuery("#list").setRowData(rowNum, { TM: tmCheckBox });
//set the dropdown user list.
var userNameList = "<select name='userNameList' Enabled='true'>";
var uList = result.UserList;
for (var i = 0; i < uList.length; i++) {
var init = uList[i].substring(0, 1);
var name = uList[i].replace(init + ":", "");
if (init == "1")
userNameList += "<option selected> " + name + "</option>";
else
userNameList += "<option>" + name + "</option>";
}
userNameList += "</select>";
jQuery("#list").setRowData(rowNum, { Lead: userNameList });
//set the status list
var statusDropDown = "<select name='statusList' Enabled='true'>";
var sList = result.StatusList;
for (var i = 0; i < sList.length; i++) {
var name = sList[i];
if (name == rowData.Status)
statusDropDown += "<option selected> " + name + "</option>";
else
statusDropDown += "<option>" + name + "</option>";
}
statusDropDown += "</select>";
jQuery("#list").setRowData(rowNum, { StatusList: statusDropDown });
//the save button add events
var saveImg = document.createElement("img");
$(saveImg).attr({ id: "saveBtn", name: "saveBtn", src: "../../Content/Images/newCheck.gif" });
saveImg.onclick = new Function("updateJobStatus(" + rowNum + ");");
jQuery("#list").setRowData(rowNum, { Save: saveImg });
//cancel button & click events
var cancelImg = document.createElement("img");
$(cancelImg).attr({ id: "cancelBtn", name: "cancelBtn", src: "../../Content/Images/newdelete.gif" });
cancelImg.onclick = new Function("cancelEdit(" + rowNum + ");");
jQuery("#list").setRowData(rowNum, { Cancel: cancelImg });
//add a datepicker to the text box in the promised column.
jQuery("#" + rowNum + "_Promised", "#list").datepicker({ dateFormat: "mm/dd/yy" });
$.unblockUI();
},
error: function(errorData) {
ErrorPopUp(errorData.responseText);
}
}
);
}
08:38
23/07/2008
Offline
// save the updated job status
function updateJobStatus2(rowNum) {
$("#subJobGridErrDiv").text("");
//Using get row data will return values with the html. Wrote getHtmlText that parses the html to
// find the data.
var rowData = $("#list").getRowData(rowNum);
//set the data that will be passed down to the controller.
var data = {
TM: $("#list").getHtmlText(rowData.TM, "checkbox"),
Lead: $("#list").getHtmlText(rowData.Lead, "select"),
StatusList: $("#list").getHtmlText(rowData.StatusList, "select"),
Bid: $("#list").getCellData(rowNum, "Bid", "textarea"),
Promised: getHtmlText(rowData.Promised, "datepicker"),
JobID: getHtmlText(rowData.JobID, "textarea"),
Note: $("#list").getHtmlText(rowData.Notes, "textarea"),
OldStatus: getHtmlText(rowData.Status, "textarea"),
initials: $("#initialsDiv").text(),
Customer: getHtmlText(rowData.Customer, "textarea"),
JobName: getHtmlText(rowData.JobName, "textarea")
};
$.blockUI();
$.ajax({
//beforeSend: validateJobStatus(data),
data: data,
cache: false,
url: '/UpdateJobStatus/UpdateJobStatus/',
dataType: "json",
type: "post",
success: function(result) {
jQuery("#list").showCol(["JobID", "Customer", "Edit", "Status", "DateChanged"]);
jQuery("#list").hideCol(["TM", "Lead", "Promised", "Save", "Cancel", "StatusList"]);
//re-populates the grid
getSubJobsInformation();
var message = "The following users were notified by email that the job status was updated: " + result;
$.unblockUI();
},
error: function(errorData) {
ErrorPopUp(errorData.responseText);
}
}
);
}
08:13
23/07/2008
Offline
Tony,
When editing a row how would you get the value of a cell. If that is somewhere in the docs could you point it out.
Brad
02:11
Moderators
30/10/2007
Offline
Hello,
You can obtain the values this way:
If the name of column is 'myname' and is defined as text then after editing
you can do $("#"+rowid+"_"+myname).val() or this way
$("td:eq(n) > input", "#"+rowid) - where n is the index of the column.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
47 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
