Remove From My Forums

jQuery Function Not Executing In Edit Mode

Question
0

Sign in to vote

User9476687 posted

Hello everyone, i.m new to asp.net mvc and am currently facing a strange kind of behaviour of jQuery i.e.

I have a drop down which is populated through database containing the list of drivers. When i select any option from the dropdown there is a jQuery function which fetches the vehicle number according to the selected driver.

To achieve this i have used the Change() function which is working fine but there are two problems im facing right now.

1) The vehicle Number is not displaying when in edit mode even when the dropdown value is already selected and retrieved from db.

2) It does not get the vehicle number when data is retrieved for update in the same page, the jQuery.get() function doesn't execute.

The alert is popping properly but i wonder why the $.get() is not getting executed while update?

Please note that i'm using the same page for both create and Update/Edit.

The jQuery Function works fine when i create a new record but when i reopen the same record to update then the jQuery doesn't work. Below is my jquery code:

$(document).ready(function () {
$("#DriverId").change(function () {
var sVal = $(this).val();
if (sVal !== 0) {
$.get("GetData", { DriverId: $("#DriverId").val() }, function (data) {
var vNo = data.VehicleNo
parseFloat($("#VehicleNo").val(vNo));
})
}
})

});

Any help will be highly appreciated. Thanks.

Saturday, July 6, 2019 2:14 PM

All replies

0

Sign in to vote

User197322208 posted

1.

then the jQuery doesn't work.

Do you have a javascript error?

2. And I have many problems with this code:

if (sVal !== 0) {
$.get("GetData", { DriverId: $("#DriverId").val() }, function (data) {
var vNo = data.VehicleNo
parseFloat($("#VehicleNo").val(vNo));
})
}

2.1 Why the code check for sVal !== 0 if do not use sVal ?

2.2 Why the code makes parseFloat

3. You know that $.get is async ?

Sunday, July 7, 2019 2:05 AM
0

Sign in to vote

User9476687 posted

Hi Andrei, Thanks a lot for replying to my query. As i said in the start of my post im new to web development using asp.net mvc so i don't have much knowledge of jquery. below are the answers to your questions.

1 I don't get any error but when in debug mode i can see this in front of $.get() data = " ↵<!DOCTYPE html> ↵<html lang="en"> ↵<head> ↵ <" and further step in i see hooks = undefined, ret = undefined, valueIsFunction = undefined in jQuery.fn.extend( ) instead of values returned as i see when create new record.

2.1 Because i wanted to check the value of selection in debugging as it was not getting in to $.get().

2.2 yes it shouldn't as its a string value (removed it now but same result) but as it worked fine while Create New Record But not in case of update when all the data is dynamically loaded in the fields. none of my jquery $.get() work then.

2.3 Yes i recently came to know it both $.ajax and $,get are equivalent. i used ajax also but the results were same.

I hope i somehow clarified and answered to your questions. Please correct me where am wrong. Your help resolving this issue will be highly appreciated.

Regards.

Sunday, July 7, 2019 4:42 AM
0

Sign in to vote

User197322208 posted

Could you show also the

GetData

action?

Sunday, July 7, 2019 6:13 PM
0

Sign in to vote

User9476687 posted

Well i was debugging the issue and i came to know that the problem occurs when i pass the parameters from @html.Actionlink() on EDIT BUTTON And when i hard code the id value in Action() to open the edit page and don't pass it dynamically it solves the problem. So the Jquery is working fine but the problem is when parameters are passed dynamically.

I'm sharing both the get data and the actionlink for your kind consideration.

This is the Action for calling the Loading Data Into Edit Mode:

Action Method in controller

//View for update Record.
public ActionResult Edit(int id = 0)
{
if (id == 0)
{
return RedirectToAction("Index", "Home");
}
ViewModel vm = new ViewModel();
TripModel tripModel= dtvm.GetAllDetailsById(id);
return View("~/Home/TripInformation.cshtml", tripInformation);
}

ActionLink On Edit Button To open Edit View

@Html.ActionLink("Edit", "Edit", new { id = item.id}, new { @class = "btn btn-warning btn-sm" })

In above actionlink when i remove id and don't pass it to action and then hard code any value in edit action then jQuery works in edit mode as well. So i guess there is some problem with passing the parameter on edit button actionlink.

And the GetData() For Jquery

//Get Driver's Vehicle Number
public JsonResult GetData(int DriverId)
{
ViewModel vm = new ViewModel();
TripModel tripModel = dtvm.GetVehicleNumberByDriverId(DriverId);
return Json(tripModel , JsonRequestBehavior.AllowGet);
}

Hope it gives you some idea about the issue.

Monday, July 8, 2019 9:01 AM
0

Sign in to vote
User1520731567 posted

Hi ImOmer,

$(document).ready(function () {
$("#DriverId").change(function () {
var sVal = $(this).val();
if (sVal !== 0) {
$.get("GetData", { DriverId: $("#DriverId").val() }, function (data) {
var vNo = data.VehicleNo
parseFloat($("#VehicleNo").val(vNo));
})
}
})

});

According to above code,this change() function never Executing in Edit Mode,

Because this function is in the initialization function,user can't change the dropdown list when edit page loading.

So,I suggest you could place this change function outside initialization function.

And you need put right url to action in $.get,like:

$.get("/YourControllerName/GetData", { DriverId: $("#DriverId").val()}, function (data) { ... });

In above actionlink when i remove id and don't pass it to action and then hard code any value in edit action then jQuery works in edit mode as well. So i guess there is some problem with passing the parameter on edit button actionlink.

Unclear,but you need to know if you click Edit button(@Html.ActionLink),the compiler will jump to Edit action and return TripInformation.cshtml with the object of a model named tripInformation.

If you use ajax,the compiler will jump to GetData action and return json and call back to $.get.

If you still have questions,please post more details and give some explanation.

Best Regards.

Yuki Tao
Wednesday, July 10, 2019 8:32 AM
0

Sign in to vote

User9476687 posted

Hi Yuki Tao, Thanks for your reply. Well i'm still unclear about how to place it outside initialization function? And the suggested url doesn't work in my scenario it doesn't navigate if i put it like

$.get("/YourControllerName/GetData", { DriverId: $("#DriverId").val()}, function (data) { ... });

so it is working fine with

$.get("GetData", { DriverId: $("#DriverId").val() }, function (data) {...});

And for the last part i was saying that if i give id in the edit function myself without passing it from actionLink like this

public ActionResult Edit(int id = 5)
{
if (id == 0)
{
return RedirectToAction("Index", "Home");
}
ViewModel vm = new ViewModel();
TripModel tripModel= dtvm.GetAllDetailsById(id);
return View("~/Home/TripInformation.cshtml", tripInformation);
}

it works fine.

Actually im new to Asp.Net MVC therefore sorry for any mistakes.

Can you please explain a little bit more that how it is not working in edit mode and works in create mode with given example please? actually its been more than a month im trying to fix this issue but still no luck.

Again Thank you very much for your valuable time and help.

Wednesday, July 10, 2019 9:11 AM
0

Sign in to vote
User1520731567 posted

Hi ImOmer,

Well i'm still unclear about how to place it outside initialization function?

I means that you don't need to put change() event in initialization function,change() event will not be triggered in the initialization function,

so you could code like:

$(document).ready(function () { $("#DriverId").change(function () { var sVal = $(this).val(); if (sVal !== 0) { $.get("GetData", { DriverId: $("#DriverId").val() }, function (data) { var vNo = data.VehicleNo parseFloat($("#VehicleNo").val(vNo)); }) } }) });

And for the last part i was saying that if i give id in the edit function myself without passing it from actionLink like this

public ActionResult Edit(int id = 5)
{
if (id == 0)
{
return RedirectToAction("Index", "Home");
}
ViewModel vm = new ViewModel();
TripModel tripModel= dtvm.GetAllDetailsById(id);
return View("~/Home/TripInformation.cshtml", tripInformation);
}

it works fine.

Do you mean you use @Html.ActionLink not work?

If so,I suggest check if item.id has value.

@Html.ActionLink("Edit", "Edit", new { id = item.id}, new { @class = "btn btn-warning btn-sm" })

If you are stuck in @Html.ActionLink or ajax to jump from veiw to controller,please refer to my below said.

Can you please explain a little bit more that how it is not working in edit mode and works in create mode with given example please? actually its been more than a month im trying to fix this issue but still no luck.

You could refer to this article about how to Call Controller Method from View using jQuery AJAX.（using ajax and return json）

And I also suggest you could create a scaffolded item to help your learn foundation CURD in mvc,you could refer to its structure.

You could follow the steps below:

Right click on Controllers -> Choose Add -> Choose 'MVC5 Controller with views, using Entity Framework', then Add-> Choose the Model you want to add CRUD to in 'Model class', then Add -> The controller with CRUD function is created.

Then the Index,Details,Edit ..pages will be automatically generated.(you could refer to how to use @Html.ActionLink in Index)

Best Regards.

Yuki Tao
Thursday, July 11, 2019 2:37 AM
0

Sign in to vote

User197322208 posted

public JsonResult GetData(int DriverId)
{
ViewModel vm = new ViewModel();
TripModel tripModel = dtvm.GetVehicleNumberByDriverId(DriverId);
return Json(tripModel , JsonRequestBehavior.AllowGet);
}

Who is dtvm ?

Also, it may help to use try/catch and log the error.

Tuesday, July 16, 2019 12:57 PM

Asked by:

jQuery Function Not Executing In Edit Mode

Question

All replies