We Keep Coding

Issue passing value from textbox to jquery function and onto controller function

I came across an issue with passing values to jQuery where I want to pass the value from a textbox.
Here is the .cshtml:
#Html.TextBoxFor(m => m.OrderNumber, new { #class = "form-control", id = "orderNumber" })
My script:
function maintenance_tapped(e) {
var data = $('#orderNumber').val();
$("#SapPopUp")
.dialog({
width: 600,
height: 420,
model: true,
buttons: {
"OK": function() {
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: data,
type: "POST"
}).done(function() {
$(this).dialog("close");
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
Code in my controller:
[HttpPost]
public async Task<ActionResult> RetrieveOrder(string number)
{
if (_sapHelper == null)
{
_sapHelper = new Helper();
}
return View();
}
My issue is that if I put a breakpoint in the RetrieveOrder function and I check the value of number i get null.
Then if go into Chrome->inspect element->Console and type $('#orderNumber').val(), I get the value I entered into the textbox.
It also seems like its not passing the value into the function.

Try this
dataType :'json',
data: {number: data},

Fixed this thanks to Aleksander Matic and Rob Lang.
Soloution
function maintenance_tapped(e) {
//var data = $('#orderNumber').val(); <------- Remove from here
$("#SapPopUp")
.dialog({
width: 600,
height: 420,
model: true,
buttons: {
"OK": function() {
var data = $('#orderNumber').val(); //<--------- Place here
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: data,
type: "POST",
dataType :'json', //<-------- Added
data: {number: data}, //<-------- Added
}).done(function() {
$(this).dialog("close");
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}

You can have the value in a javascript object and match the key to your action's parameter name.
This should work.
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: {
number: $('#orderNumber').val()
},
type: "POST"
}).done(function() {
$(this).dialog("close");
});
Also, I see you are returning a viewresult from the action method, but not using that in your ajax method call's done/success event handler. What is the point of doing that?

Auto Complete in Razor MVC.NET [duplicate]

I am using ASP.NET MVC3 with EF Code First. I have not worked previously with jQuery. I would like to add autocomplete capability to a dropdownlist that is bound to my model. The dropdownlist stores the ID, and displays the value.
So, how do I wire up the jQuery UI auto complete widget to display the value as the user is typing but store the ID?
I will need multiple auto complete dropdowns in one view too.
I saw this plugin: http://harvesthq.github.com/chosen/ but I am not sure I want to add more "stuff" to my project. Is there a way to do this with jQuery UI?

Update
I just posted a sample project showcasing the jQueryUI autocomplete on a textbox at GitHub
https://github.com/alfalfastrange/jQueryAutocompleteSample
I use it with regular MVC TextBox like
#Html.TextBoxFor(model => model.MainBranch, new {id = "SearchField", #class = "ui-widget TextField_220" })
Here's a clip of my Ajax call
It initially checks its internal cached for the item being searched for, if not found it fires off the Ajax request to my controller action to retrieve matching records
$("#SearchField").autocomplete({
source: function (request, response) {
var term = request.term;
if (term in entityCache) {
response(entityCache[term]);
return;
}
if (entitiesXhr != null) {
entitiesXhr.abort();
}
$.ajax({
url: actionUrl,
data: request,
type: "GET",
contentType: "application/json; charset=utf-8",
timeout: 10000,
dataType: "json",
success: function (data) {
entityCache[term] = term;
response($.map(data, function (item) {
return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
}));
}
});
},
minLength: 3,
select: function (event, result) {
var id = result.item.id;
var code = result.item.code;
getEntityXhr(id, code);
}
});
This isn't all the code but you should be able to see here how the cache is search, and then the Ajax call is made, and then what is done with the response. I have a select section so I can do something with the selected value

This is what I did FWIW.
$(document).ready(function () {
$('#CustomerByName').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
}
})
);
},
});
},
select: function (event, ui) {
$('#CustomerID').val(ui.item.id);
},
minLength: 1
});
});
Works great!

I have seen this issue many times. You can see some of my code that works this out at cascading dropdown loses select items after post
also this link maybe helpful - http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

Uncaught TypeError : cannot read property 'pager' of undefined In KendoGrid

Im trying to keep option "All" for showing all the data in grid by using following code.
but when the code reaches grid.pager.element its showing error as "pager" undefined.
at first when i click on search with group "TBU" there is no option for All.When i click again "All" appears as how many times i have clicked.
$.ajax({
type: "POST",
url: "Report_Services/Report.asmx/BindKendoAvailableList",
data: "{'groupId':" + $('#cboGroupName option:selected').val() + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
data = result.d;
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(data);
}
},
schema: {
type: "xml",
data: "/NewDataSet/myTable",
model: {
// configure the fields of the object
fields: {
AssetCode: "AssetCode/text()",
AssetName: "AssetName/text()"
AssetStatusName: "AssetStatusName/text()"
}
}
},
pageSize: 10
},
sortable: true,
filterable: true,
reorderable: true,
navigatable: true,
selectable: "multiple",
columnMenu: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 8
},
columns:
[{
field: "AssetCode",
title: "Asset Id"
}, {
field: "AssetName",
title: "Asset Name"
},{
field: "AssetStatusName",
title: "Status"
}]
});
}
});
debugger;
var grid = $("#grid").data("kendoGrid");
var dropdown = grid.pager.element
.find(".k-pager-sizes [data-role=dropdownlist]")
.data("kendoDropDownList");
var item = {};
item[dropdown.options.dataTextField] = "All";
item[dropdown.options.dataValueField] = 1000000;
dropdown.dataSource.add(item);
dropdown.bind("change", function (e) {
if (this.text() == "All") {
grid.one("dataBound", function () {
setTimeout(function () {
dropdown.span.text("All");
});
});
}
});

In your case it sounds like the grid variable is undefined not the pager. Make sure that you execute this code after the Grid is actually initialized and also make sure the selector is right.

Kendo UI Scheduler: Delete/Edit/Update only specified events

Im working with the Kendo Scheduler and users can create, delete, update, edit events to my local database. But I'm working with different users on this webapp so I only want those users to be able to edit, delete and update events that they personally created. So user 1 can delete events created by user 1 but can't delete events created by user 2 or 3 etc...
I thought I just modify the model/controller to check the userID of the logged in user against the userID in the db of the event.
public virtual JsonResult Meetings_Destroy([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
{
var userid = System.Convert.ToInt32(Session["userID"]);
if (ModelState.IsValid)
{
if (meeting.UserID== userid)
{
meetingService.Delete(meeting, ModelState);
}
else
{
"cant delete"
}
}
return Json(new[] { meeting });
}
But this doesn't seem to work, when click on delete the event dissapears but after reloading you see that it actually isn't really deleted from the db ... That of course isn't a good solution cause the goal is of course that that user just can't delete that event.
Any idea's?
VIEW
$(function () {
$("#scheduler").kendoScheduler({
date: new Date(Date.now()),
startTime: new Date(2013, 5, 13, 9, 0, 0, 0),
height: 800,
timezone: "Etc/UTC",
dataSource: {
transport: {
read: {
url: "#Url.Action("Meetings_Read", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
update: {
url: "#Url.Action("Meetings_Update", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
create: {
url: "#Url.Action("Meetings_Create", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
destroy: {
url: "#Url.Action("Meetings_Destroy", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation === "read") {
var scheduler = $("#scheduler").data("kendoScheduler");
var result = {
start: scheduler.view().startDate(),
end: scheduler.view().endDate()
}
return kendo.stringify(result);
}
return kendo.stringify(options);
}
},
error: error_handler,
schema: {
model: {
id: "MeetingID",
fields: {
MeetingID: { type: "number" },
title: { from: "Title", type: "string", defaultValue: "No title", validation: { required: true } },
description: { from: "Description", type: "string" },
start: { from: "Start", type: "date" },
startTimezone: { from: "StartTimezone", type: "string" },
end: { from: "End", type: "date" },
endTimezone: { from: "EndTimezone", type: "string" },
recurrenceRule: { from: "RecurrenceRule", type: "string" },
recurrenceId: { from: "RecurrenceID", type: "number", defaultValue: null },
recurrenceException: { from: "RecurrenceException", type: "string" },
isAllDay: { from: "IsAllDay", type: "boolean" },
Timezone: { type: "string" },
RoomID: { type: "number", defaultValue: null },
Attendees: { type: "object" }
}
}
}
},
});
});
JAVASCRIPT
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.one("dataBinding", function (e) {
e.preventDefault();
for (var error in e.errors) {
alert("can't delete")
}
})
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
CONTROLLER
public virtual JsonResult Meetings_Destroy([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
{
if (ModelState.IsValid)
{
if(meeting.UserID == System.Convert.ToInt32(Session["userID"]))
{
meetingService.Delete(meeting, ModelState);
}
else
{
ModelState.AddModelError("","cant delete");
}
}
return Json(new[] { meeting });
}

I have a similar situation with my project where I have users that have limited access to do things on the calendar. I have found that you have to prevent things like Adds, Edits, and Deletes, that a user should not do, you can do this with the JavaScript events. Then, in the JavaScript functions, if a condiation is met (or not), then call the e.preventDefault(); method. Here's the demo on Client Events.
View (HTML 5 snippet)
remove: RemoveMe,
edit: EditMe,
add: AddMe,
View (MVC version snippet)
.Events(events =>
{
events.Add("AddMe").Edit("EditMe").Remove("RemoveMe");
})
JavaScript
function AddMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
function EditMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
function RemoveMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
So, the good news is that this prevents the Calendar from showing updates (whether a Delete occurs or not), but it doesn't prevent the Delete Prompt (aka. "Are you sure you want to delete this event?"). Preventing the actions on the Client side is the way to go and you could extend it with alerts or notifications to the screen (since you would have the condition in the JavaScript function anyways), all to inform the user they can't do something.

ModelState.AddModelError("cant delete");
return Json(ModelState.ToDataSourceResult());
in the view
.Read("Grouping_Horizontal_Read", "Scheduler")
.Create("Grouping_Horizontal_Create", "Scheduler")
.Destroy("Grouping_Horizontal_Destroy", "Scheduler")
.Update("Grouping_Horizontal_Update", "Scheduler")
.Events(events => events.Error("error"))
.Events(events => events.Error("error")) is the trick and now importent the funktion for the error
function error(args) {
if (args.errors) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.one("dataBinding", function (e) {
e.preventDefault(); // cancel scheduler rebind if error occurs
for (var error in args.errors) {
alert(error + " args: " + args.errors[error].errors[0])
}
});
args.sender.cancelChanges();
}
}

It depends on how you are creating the meeting too.
Because to remove a task you just need a unique ID.
Right now it's just being deleted in JSON but not in the backend database, as I guess that meeting.id is not matching to the taskID generated when create event was fired.
I recommend to save taskID in ViewBag, SQL Table or somewhere, when task is created in the scheduler. Then pass this id as the parameter in your Meetings_Destroy method, when remove event is fired.
And [as mentioned in previous answer] use JavaScript remove event to validate logged in user, as e.preventDefault() can be used to restrict Meetings_Destroy method being fired if condition is not met. If debug is reached at Controller Method [Meetings_Destroy] it would remove event from scheduler [Either successfully removed in database or not], i-e from front end, but would bring it back on page refresh.

I have a same situation. I took a different approach to resolve it. In the edit function I compare task id and current userId and than I simply hide those button save, cancel and delete. These button will so only a user who created that.
function(e)
{
var customHide13= $(".k-scheduler-update, .k-scheduler-delete, .k-scheduler-cancel");
if (taskId == userId)
customHide13.show();
else
customHide13.hide();
},

fullcalendar: call web service function when next or prev button is pressed

I want to load events of only one month at a time. At first, show the event of one month in one page and when next or prev button is pressed, show the event of that month from database via web service (C#). How can I achieve that?
I also want to get data from one month only and I want to send the selected year, month value to the web service so it can send the data of only specific month.
My current jquery code is:
jQuery(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json",
url: "FullcalenderwithWebservice.asmx/GetEvents",
dataType: "json",
success: function (data) {
$("div[id=loading]").hide();
$("div[id=fullcal]").show();
$('div[id*=fullcal]').fullCalendar({
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
editable: false,
events: $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.EventID;
event.start = new Date(item.StartDate);
event.title = item.EventName;
event.className = item.className.toString()
return event;
})
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
also
$('.fc-button-prev span').click(function(){
alert('prev is clicked, do something');
});
is not working.

You might want to use viewdisplay e.g.
viewDisplay: function(view) { var next = view.title; alert(next); }
Here I am using that event to go and get the next batch of data from a webservice and render it.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
},
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}