jqGrid serializeDelData working but serializeEditData not - jqgrid

this delete working but edit doesn't where I am wrong?
jQuery.extend(jQuery.jgrid.del, {
serializeDelData: function (postdata) {
console.log("test");
return postdata;
}
});
jQuery.extend(jQuery.jgrid.edit, {
serializeEditData: function (postdata) {
console.log("edit");
return postdata;
}
});

Probably you inline editing (inlineNav for example and other) instead of form editing? serializeEditData works only with the form editing.

You can pass extra data with inline editing using serializeRowData event of grid.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow
serializeRowData: function (postData) {
return $.extend(true, {}, postData, {
account: jQuery('input[name=account]').val(),
code: jQuery('input[name=code]').val()
});

Related

jQuery dialog for a partial view is not opening modal

I have built a jquery dialog to show a partial view for entering data.
I have built the action link:
#Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null, new { #class = "addServiceProviderLink" })
I have the controller action:
public ActionResult PartialNewCust()
{
return PartialView();
}
And the div / jQuery code:
<div id="AddServiceProvDialog" title="Add Service Provider"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".addServiceProviderLink").button();
$('#AddServiceProvDialog').dialog(
{
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons:
{
"Add": function () {
$("#addProviderForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".addServiceProviderLink").click(function () {
linkObj = $(this);
var dialogDiv = $('#AddServiceProvDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#addProviderForm");
// Unbind existing validation
$form.unbind();
$form.data("validator", null);
// Check document for changes
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog('open');
return false;
});
});
});
The partial view renders fine but opens a new page and does not come up as a modal dialog.
What am I doing wrong.
On a side note: my autocomplete code is also not working by my jQuery datetime picker is...
$(document).ready(function()
{
$(".date").datepicker();
}
);
$(document).ready(function () {
$("#CustByName").autocomplete(
{
source: function (request, response) {
$.ajax(
{
url: "/Cases/FindByName", type: "GET", dataType: "json",
data: { searchText: request.term, maxResults: 10 },
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.CustomerName,
value: item.CustomerName,
id: item.CustomerID
}
})
);
}
});
},
minLength: 3
});
});
My guess is that you misplaced the return false statement in the button's click handler, thus the default behavior is not prevented as you expect, and the link is simply followed:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
dialogDiv.html(data);
...
dialogDiv.dialog('open');
// this return statement should be in the "click" handler,
// not in success callback of the .get() method !
return false;
});
});
Your code should then be:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
...
});
// return here to prevent default click behavior
return false;
});

fancybox: show partial view

I have the following js code:
function getSelectedPlace(form) {
var places = 1
$(form).find(":input").each(function () {
if ($(this).attr("name") === "Signed_Order_B64") {
$.ajax({
type: 'POST',
url: '/MyController/MyAction',
data: "id=" + places,
success: function (response) {
if (response.Result) {
ret = response.Message;
result = true;
$("input[type=hidden][name=email]").val(response.Email);
$("input[type=hidden][name=appendix]").val(response.Appendix);
} else {
// show fancybox
result = false;
}
},
error: function () {
result = false;
},
async: false
});
$(this).val(ret);
}
});
if (!result) {
$(submitButton).attr("value", btnText);
setStateFotBuyButton(false);
}
return result;
}
I have if statement in success block. I want show partial view in the fancybox in else block. How can I do this? Thanks
Not totally sure what you mean with "partial view" but you could do
} else {
$.fancybox(response,{
// fancybox options here
}); // fancybox
}
You could use the content switch which allows you to set the content of the fancybox to any html:
$.fancybox({
content: response
});

How can I validate form and then execute additional code if successful

I cannot figure out how to merge the following separate pieces of code:
$(document).ready(function () {
$("#signupForm").validate();
});
and
$(document).ready(function () {
$("#btnSignup").click(function () {
$.ajax({
type: "POST",
dataType: 'json',
url: "/Newsletter/Signup",
data: $('#signupForm').serialize(),
success: function (response) {
if (response.success) {
$('#signupMessage').show(0);
}
else {
showValidationErrors(response.Data);
}
}
});
return false;
});
I need the first part to execute first, and if it validates the form successfully, then I need to exectute the second part.
I believe that you can use valid().
Pseudo code;
$(document).ready(function () {
$("#signupForm").validate();
$("#btnSignup").click(function () {
if ($("#signupForm").valid()) {
// ajax query
}
return false;
});
});
Does that work? I haven't checked it.
Here is a somewhat general way I use.
$('form').submit(function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
});
Lastly, you could abstract the logic into an object for a more OOP approach
var formHandler = {
onSubmit: function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
}
}
$('form').submit(formHandler.onSubmit);

Acessing ViewData in javascript?

I want to access view data In Java script in following code
public virtual ActionResult Edit(MyModel _MyModel)
{
//some Code
if (true..)
{
ViewData["Messages"] = "Data Updated Sucessfully";
}
else
{
ViewData["Messages"] = "you cannot Updated data";
}
return View();
}
In javascript
function SaveData() {
$("#btnSave").click(function () {
// $('#divLoadImage').show();
// $('#divOverlay').show();
// debugger;
$.ajax({
type: "POST",
url: "Admin/Edit/",
data: "",
complete: function () {
alert(ViewData["Messages"]);
}
});
});
}
it give me no value in alert..
You need to encode it using for example the JavaScriptSerializer class:
function SaveData() {
$("#btnSave").click(function () {
$.ajax({
type: "POST",
url: "Admin/Edit/",
data: "",
complete: function () {
alert(#Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Messages"])));
}
});
});
}
or use simple quotes but be careful as this might break if the message contains quote so I wouldn't recommend you this:
alert('#ViewData["Messages"]');

Ajax Form Submit

the form is submiting as normal request instead of Ajax.
$(document).ready(function () {
StatusComments();
});
function StatusComments() {
$('.comment').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
var options = {
beforeSubmit: showRequest,
success: showResponse,
resetForm: true
};
function showRequest(formData, jqForm, options) {
var textbox = $('#StatusMessageReplyMessage').val();
alert(textbox);
}
function showResponse(responseText, statusText, xhr, $form) {
}
}
i have a similar one for Status update like this
function StatusUpdates() {
$('#updateStatus').submit(function () {
$(this).ajaxSubmit(options);
return false; // prevent a new request
});
var options = {
target: '.user-status',
// target element(s) to be updated with server response
beforeSubmit: showRequest,
// pre-submit callback
success: showResponse,
// post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
function showRequest(formData, jqForm, options) {
var textbox = $('#StatusMessageMessage').val();
if ((textbox == '') || (textbox == "What have you been eating ?")) {
alert('Please Enter Something and click submit.');
return false;
} else {
$('#StatusMessageMessage').attr('disabled', true);
}
}
function showResponse(responseText, statusText, xhr, $form) {
$('#StatusMessageMessage').attr('disabled', false);
$('.share').slideUp("fast");
$('#StatusMessageMessage').animate({
"height": "18px"
}, "fast");
}
}
Instead of
$('.comment').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
Try
$('.comment').click(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
return false;
});

Resources