Issue with JQuery, asp.net-MVC controller
asp.net-mvc, jquery
Solution
this is why you shouldn't hardcode urls in an asp.net mvc app. your problem is that your ajax url is a relative url. when you load the page using url http://example.com/TestInput/ the ajax url ends up being something like http://example.com/TestInput/TestInput/listTestCases or maybe http://example.com/TestInput/listTestCases
When you use the url http://example.com/TestInput/Index your ajax url ends up being http://example.com/TestInput/Index/TestInput/listTestCases
Insetead you should use one of the Html helpers to declare your ajax url like this. (using razor syntax)
<script>
$(document).ready(function() {
$('select#testCategoriesUniqueId').change(function() {
var testCategory = $(this).val();
$.ajaxSetup({ cache: false });
alert ("AAA");
$.ajax({
url: "@Url.Action("listTestCases")"+ "/" + testCategory,
dataType: "json",
type: 'post',
success: function(data) {
$("#testCasesUniqueId").removeOption(/./);
for (var i = 0; i < data.length; i++) {
var val = data[i].Value;
var text = data[i].Text;
$("#testCasesUniqueId").addOption(val, text, false);
}
}
});
});
});
</script>
Update for ASPX View Engine:
If you are using the ASPX view engine insted of Razor use this syntax.
<script>
$(document).ready(function() {
$('select#testCategoriesUniqueId').change(function() {
var testCategory = $(this).val();
$.ajaxSetup({ cache: false });
alert ("AAA");
$.ajax({
url: "<%=Url.Action("listTestCases")%>"+ "/" + testCategory,
dataType: "json",
type: 'post',
success: function(data) {
$("#testCasesUniqueId").removeOption(/./);
for (var i = 0; i < data.length; i++) {
var val = data[i].Value;
var text = data[i].Text;
$("#testCasesUniqueId").addOption(val, text, false);
}
}
});
});
});
</script>
Be sure to use Firebug or F12 dev tools to double check the exact url you need.
Problem
I am having a (I think stupid) problem. I have a controller, Index method, and its view has some JQuery functions. It works fine, and the JQuery methods work perfectly. the link I use is ``` http://localhost:54209/TestInput/ ``` but if I put ``` http://localhost:54209/TestInput/Index ``` the JQuery functions do not work. From what I know they should act exactly the same. That is the only thing that I change I really appreciate your help. This has been driving me crazy during the last couple of hours! For example, This is my script ``` <script> $(document).ready(function() { $('select#testCategoriesUniqueId').change(function() { var testCategory = $(this).val(); $.ajaxSetup({ cache: false }); alert ("AAA"); $.ajax({ url: "TestInput/listTestCases/" + testCategory, dataType: "json", type: 'post', success: function(data) { $("#testCasesUniqueId").removeOption(/./); for (var i = 0; i < data.length; i++) { var val = data[i].Value; var text = data[i].Text; $("#testCasesUniqueId").addOption(val, text, false); } } }); }); }); ``` In both cases, I get an alert, but In the second link, I can not call the controller. It doesn't call the listTestCases method of my controller. Update: So I tried to use parameters instead of the exact link, I still have the problem, I got both sources, and got a diff, the only difference is ``` <form name="aspnetForm" method="post" action="Index" id="aspnetForm"> ``` vs. ``` <form name="aspnetForm" method="post" action="TestInput" id="aspnetForm"> ``` and ``` <form action="/TestInput/Index" method="post"> ``` vs. ``` <form action="/TestInput" method="post"> ``` Which I beleive has nothing to do with the jQuery. I still see the laert in both cases. but the JQuery works in ~/TestInput and not with the ~/TestInput/Index.