How to pass the value to URL from dropdown item? - javascript

I am asking this question again....because I am not getting correct answer...
answers which I get is incorrect.
I am developing MVC application and I am using razor syntax. I am trying to get the selected item from dropdown list value and to pass it to the controller method.
but I am getting error.
$("#btnForword").click(function(){
d = document.getElementById("HODList").value;
var url2 = "#Html.Raw(Url.Action("SendPaymentAdviceForApproval", "PaymentAdvice", new { paymentAdviceId = "idValue" , nHOD = "d" }))";
url2 = url2.replace("idValue",'#Model.Id');
url2 = url2.replace("d",'#d');
$.ajax({
url: url2, type: "POST", success: function (data) {
$("#btnForword").css("display","none");
}
});
return false;
});
I think error in this line...
url2 = url2.replace("d",'#d');
Issue solved Issue solved
The problem in variable 'D' yes in "D".
I checked using inspect element property of Google chrome, when I saw it in console window....
When I click on the button , I can see the string formed in below way
http://localhost:54255/PaymentAdvice/SendPaymentAdviceForApproval?paymentAdviceId=304&nHO8=D
jquery-1.7.1.min.js:4
see the last character in the above link, it should not be come as a "=D" isnt it ?
I used the below code...and it works perfectly.
$("#btnForword").click(function(){
var url2 = "#Html.Raw(Url.Action("SendPaymentAdviceForApproval", "PaymentAdvice", new { paymentAdviceId = "idValue" , nHOD = "HODId" }))";
url2 = url2.replace("idValue",'#Model.Id');
url2 = url2.replace("HODId",$('#HODList').val());
$.ajax({
url: url2, type: "POST", success: function (data) {
$("#btnForword").css("display","none");
}
});
return false;
});
Is this a bug in Jquery ?

Your variable d is not a server variable that can be called with "#" but a client variable set in javascript, so it should be user like :
$("#btnForword").click(function(){
d = document.getElementById("HODList").value;
var url2 = "#Html.Raw(Url.Action("SendPaymentAdviceForApproval", "PaymentAdvice", new { paymentAdviceId = Model.Id , nHOD = "d" }))";
url2 = url2.replace("d",d);
$.ajax({
url: url2, type: "POST", success: function (data) {
$("#btnForword").css("display","none");
}
});
return false;
});
(and the "#Model.Id" can be called directly in the Url.Action method).

Yes it is. The problem is that the js replace function replaces every "d" character contained in the url2 string with your #d variable!!!
You need to replace the "d" identifier with something that does not appear twice (or more) in the url string. Besides, I think is better if you create the url directly using javascript and not the Razor helper. You can do this in one line of code instead of three. Regards.

Related

calling action with string type parameter from JavaScript in MVC

I have bellow action in my controller:
public ActionResult ShowContactTel(string tel)
{
return PartialView("ContactInfoView", tel);
}
And I call above action by JavaScript like this: (It is fired by clicking on a button)
function ShowTel(){
var e="#Model.TelShow";
$.get("ViewProfile/ShowContactTel", e).then(
function (r) {
$('#divTel').innerHTML = r;
});
}
But input argument of action receives null value (by setting break-point) and so return undesirable output.
Remark 1:
I tried bellow code for ShowTel() function but result not changed:
var str = "#Model.TelShow";
$.ajax({
type: 'GET',
url: '#Url.Content("~/ViewProfile/ShowContactTel")',
data: str,
success: function (dd) {
$('#divTel').innerHTML = dd;
}
});
And
var str = "#Model.TelShow";
$.ajax({
url: "ViewProfile/ShowContactTel",
type: 'GET',
data: str
}).then(function (r) {
$('#divTel').innerHTML = r;
});
I also tried type: 'POST' but it not working too.
Remark 2:
Using debugger command in ShowTel() function, I see #Model.TelShow has true value.
What is the problem?
Your current code (first approach) is passing the value of e variable as the data parameter for the $.getcall. jQuery $.get method will send that as query string values. So your code is making a get call like the below URL.
/ViewProfile/howContactTel?testValue
Assuming testValue is the value of variable e
Your action parameter name is tel. So send an js object with a property with that name.
Also use the jquery html method to update the inner html of your div.
$.get("/ViewProfile/ShowContactTel", { tel: e })
.then(function (r){
$('#divTel').html(r);
});
I would also recommend using the Url helper methods to generate the correct relative URLs to the action method.
var url = "#Url.Action("ShowContactTel","ViewProfile");
$.get(url, { tel: e }).then(function (r){
$('#divTel').html(r);
});

Use JavaScript variable as route argument

I try to add $(this).prev("input").val() in my id argument for an API route, but I don't know how to stop the C# part , I thought about <text></text> or #: but doesn't work like this.
Anyone has a trick ? (thought about writting the URL instead of using the RouteURL function but I don't think it's a good way to program)
$.ajax({
url: '#Url.RouteUrl("IsTranslated", new { id = <text>$(this).prev("input").val()</text> }, new {market=#ViewBag.market })
// [...]
})
You can't inject a JavaScript value like that (remember, the Razor code is evaluated server-side). What you can do is use your helper to build a "template" string, and replace the id value:
var template = '#Url.RouteUrl("IsTranslated", new { id = 0 }, new { market=#ViewBag.market })';
var id = $(this).prev("input").val();
var url = template.replace('id=0', 'id='+id);
$.ajax({
url: url
// [...]
})
This assumes, of course, that a querystring value is generated by the helper. If not, this might work:
var template = '#Url.RouteUrl("IsTranslated", new {}, new { market=#ViewBag.market })';
var id = $(this).prev("input").val();
var url = template.replace('IsTranslated', 'IsTranslated?id='+id);
$.ajax({
url: url
// [...]
})

recaptcha responded, but Ajax not getting it

So I'm having some trouble with my code. It seems that when I get the reCAPTCHA response it loads when I alert the variable, but AJAX isn't wanting to get it.
var url="";
if (DEPOSIT) {
url = "/get_inv?" + opts;
} else {
var g = grecaptcha.getResponse();
url = "/get_bank_safe?g-recaptcha-response=" + g;
}
alert(url);
$.ajax({
"url": url,
success: function(data) {
try {
alert(data);
data = JSON.parse(data);
Yes I've gotten a valid response from the URL variable itself, but when announcing the AJAX variable 'data', nothing is persevered. Therefore JSON cannot parse 'data'.
It even states that "url" : url.
So I'm not sure how to go about this. If there is any solution please alert me of so.
Thanks! ~LTn | mrgreen33gamer

Empty Array AJAX

So I have searched around a bit in hopes of finding a solution to my problem, but have had no luck.
I am basically trying to pass data into the ajax function, but when it passes it to my php file it only returns an empty array (Yes there are a few topics on this, couldn't find any to fit my needs) , here is the console output: Array ()
Its odd because just before the ajax function I log the data, and it prints out each section with no problems.The posting URL is accurate, works fine straight from my form. I have tried to use response instead of data passed through the function, but no luck their either.
Thanks in advance!
Here is the JS file
$(document).ready(function() {
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = [];
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data); /////THIS LINE HERE ACTUALLY PRINTS DATA
$.ajax({
url: url,
type: type,
data: data,
success: function(data) {
console.log(data);
}
});
return false;
});
});
And here is my PHP
<?php //removed the issets and other checkers for ease of readability
print_r($_POST);
?>
UPDATE: I have tried to add method:"POST" to my ajax function and it still seems to be printing out blank arrays... Maybe I should convert everything to GET?
jQuery ajax() uses GET as default method. You need to mention method: POST for POST requests.
method (default: 'GET')
$.ajax({
url: url,
method: "POST",
type: type,
data: data,
success: function(data) {
console.log(data);
}
});
Or you can also use post().
EUREKA!!! Wow, the mistake was much simpler than I thought, figured it out solo! Thank you everyone for the tips! Finally got it
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {}; // THIS NEEDS TO BE CHANGED TO BRACKETS!!

Ajax Prototype To Jquery Conversion For Innerhtml Updates

I am attempted to use jquery instead of prototype for the first time. I have a form, when you change the country on my dropdown I would like to then call another script that will bring up the appropriate list of states/provinces. In prototype I would have just used:
function getstates(form) {
document.getElementById("stateresult").innerHTML="<img src='images/ajaxshippingload.gif' border='0'> Processing...";
var checkingurl="shopgetstates.asp";
var pars = 'country=' + form.country.value + '';
var url = checkingurl + '?' + pars;
var target = 'stateresult';
var myAjax = new Ajax.Updater(target, checkingurl, {method: 'post',parameters: pars});
}
I am attempting to convert this into query with little success. I have come up with:
function getstates() {
$.ajax({type:'POST', url: 'shopgetstates.asp', data:$('#ListingForm').serialize(), success: function(response) {
$('#ListingForm').find('.stateresult').html(response);
}});
return false;
}
But I think this is overkill considering I only need to grab the selected value of 1 dropdown. Is there any easier way to accomplish what I am looking to do?

Categories

Resources