How can I get/check SelectIndexChange() or Blur() event In Jquery AutoComplete Combobox in MVC4 ?
You can bind on event Close ( it same blur ) and Select with call action through ajax request
View
$( ".selector" ).autocomplete({
select: function( event, ui ) { $.post(urlSelect); },
close: function( event, ui ) { $.post(urlClose); }
});
Controller
public ActionResult OnSelect()
{ // something }
public ActionResult OnClose()
{ // something }
Related
I want the back button to toggle div for example.
How I can override the device back button event action?
I tried
document.addEventListener('backbutton', function() {
return false;
});
and the following code to evaluate after the page change
$(window).on("navigate", function (event, data) {
alert('abc');
event.stopImmediatePropagation();
return false;
});
Below are the jQuery versions that I am referencing in my ASP MVC view
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
Using the autocomplete widget, I would like the form to fill out a separate text box based on the user's selection from the autocomplete list. On this page, the user will begin typing a bank name. Once the user selects which bank they need, another field by the name of Dynamics ID needs to be populated with the appropriate value. Here is the jQuery as it's written right now
$(function () {
$("#BankNameAuto").autocomplete({
source: '#Url.Action("GetBanks", "AgentTransmission")',
minLength: 1,
onComplete: function (data) {
$.getJSON('#Url.Action("GetDynamicsId", "AgentTransmission")', data, function (result) {
$('Dynamics').val(result);
})
}
});
});
And here are the two controller methods that are called in the above jQuery
//GET
public JsonResult GetBanks(string term)
{
var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(term))
select c.BankName;
banks = banks.Distinct();
return Json(banks, JsonRequestBehavior.AllowGet);
}
//GET
public JsonResult GetDynamicsId(string term)
{
var dynamics = from c in db.BankListMaster.Where(n => n.BankName.Equals(term))
select c.LinkRepsToDynamicsUniqueId;
dynamics = dynamics.Distinct();
return Json(dynamics, JsonRequestBehavior.AllowGet);
}
Once the user has made a selection from the list, I wanted to be able to send back the ID value to that bank. That serves as the primary key for the BankListMaster table, of which BankName and DynamicsId are both fields. I'm still new to jQuery, however, so I may not be able to do this.
Right now, I've set a breakpoint in the first line of both controller methods. The GetBanks breakpoint fires everytime, however I cannot get the GetDynamicsId to fire at all.
EDIT
Since I'm only selecting the BankName field in the first query, I adjusted the GetDynamicsId method to use the bank name as the parameter.
I do something similar by handling the "select" event. It's not "onComplete" as you had in your example. Your code with this change would be:
$(function () {
$("#BankNameAuto").autocomplete({
source: '#Url.Action("GetBanks", "AgentTransmission")',
minLength: 1,
select: function (event, ui) {
$.getJSON('#Url.Action("GetDynamicsId", "AgentTransmission")', { term: ui.item.value }, function (result) {
$('Dynamics').val(result);
})
}
});
});
So i have a button in a view that opens up a modal pop up form. This modal pop up form is a partial page. My issue with this is that:
Whenever I don't fill up the required fields on the form, the TryUpdate check will obviously fail, but it will just refresh the whole page cuz of the line "window.location.reload" on the jquery. What I wanted to do is that instead of refreshing, it would still stay as it is (the page with the modal showing) and validation summary or validations will show up saying, this and that are required. Is this possible or am I complicating stuff with it?
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#modal-link').click(function () {
var href = this.href;
$('#load-modal').dialog({
modal: true,
draggable: false,
position: "top",
open: function (event, ui) {
$(this).load(href, function (result) {
$('#new-academy-form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
window.location.reload(true);
},
error: function (data) {
var errmessage = '<div class="error-repo">Error</div>';
$('#messages').html(errmessage);
}
});
return false;
});
});
}
});
return false;
});
});
});
</script>
This is the button:
<div class="width3">
<%: Html.ActionLink("Submit New", "Create", "Propose", null, new { #class = "results", id = "modal-link" })%>
</div>
This is the action:
public ActionResult Create()
{
return PartialView(Propose.LoadDetails(context, null));
}
[HttpPost]
public ActionResult Create(FormCollection formCollection)
{
Propose propose= new Propose ();
if(TryUpdateModel(propose, "Propose ")){
context.Propoe.Add(propose);
context.SaveChanges();
var proposals = new System.Text.StringBuilder();
return Json(new { propose= proposals});
}
return PartialView(Propose.LoadDetails(context, null));
}
You can return a flag from your action.
var data = new {isSuccess, new { propose= proposals}};
return Json(data , JsonRequestBehavior.AllowGet);
and then use it in jquery like
success: function (data) {
if(data.isSuccess){
window.location.reload(true);
}
else{
// write code to show validation summary and no reload.
}
}
I am working on project using MVC 3.0(Razor framework). I am trying to get values from controller to view using Viewdata on Button click in Javascript Method.Its coming on document.ready but not on Button click.So please help to get the viewdata value on button click.
Following is my code
[HttpPost]
public ActionResult Update()
{
ViewData["myInfo"] = "my info";
return View();
}
And my JAvascript code:
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$.post("/ImportCSV/Update", {},
function ()
{
var g = '#ViewData["myInfo"]';
});
});
});
</script>
I want to show Viewdata value on button click
You'd better return a JSON result in this case. ViewData is bad. Don't use it. In your case it doesn't work because you need to define a corresponding view of this controller action that will interpret the ViewData and it is the final HTML fragment that you will get in the AJAX success callback. Using JSON you can directly send some data to the calling script:
[HttpPost]
public ActionResult Update()
{
return Json(new { myInfo = "my info" });
}
and then send an AJAX request to this controller action:
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
var url = #Url.Action("Update", "ImportCSV");
$.post(url, {}, function (result) {
var myInfo = result.myInfo;
alert(myInfo);
});
});
});
</script>
Here is my problem:
Inside a jQuery dialog I have the following code:
<%:Ajax.ActionLink("Yes", "SendClaim", "Claim", new { id = Model.ExpenseId }, new AjaxOptions { UpdateTargetId = "dialog" }, new { #class = "button" })%>
When stuff fails in the controller based on roles I return a partial view that replaces the existing dialog (see UpdateTargetId = "dialog").
When everything works I want to do a redirect to another page (an index of all claims) to stop the user performing additional actions but this entire page is rendered inside the jQuery dialog due to it being an ajax request with an update id.
What is the correct way to approach the problem?
I'm a bit of a novice, but I find I have more control with the following approach instead of using Ajax.ActionLink. Hopefully it helps and I have understood what you want to do correctly.
Claim Controller:
[AcceptVerbs(HttpVerbs.Post)]
public Json Send(int expenseId)
{
// Check user stuff
if(valid)
// do stuff
return new Json(true, JsonRequestBehavior.AllowGet);
else
return new Json(false, JsonRequestBehavior.AllowGet);
}
jQuery
function submitClaim() {
$.ajax({
url: "/Claim/Send",
type: "POST",
dataType: "json",
data: { 'expenseId': <%=Model.ExpenseId> },
success: function (data) {
if(data) { // if successful, redirect
document.location = "Claim/Index";
}
else { //load your partial view into your dialog
$("#idOfYourDialog").load('Claim/Error/');
}
},
error: function (xhr) { }
});
}
html
Submit
Returned an 'All OK' dialog and had the following javascript when the user clicks the ok button:
function redirect() {
document.location = "<%:(String)ViewBag.Redirect %>";
}
$(document).ready(function() {
$(".ui-dialog-titlebar-close").click(function() {
redirect();
});
});
Seems unavoidable - you can't seem to do an RedirectToAction when the controller action has been called from Ajax.ActionLink as the response will be stuck into the updatetargetid.