My partial view has a table with multiple rows with a button in each row (unique across each). When the button is pressed a jquery modal dialog is opened and the user can enter a value in a text box. That value is what i'm not able to get into a jquery variable to send to my MVC controller. All the jquery code is executed from the partial view.
I've tried every example I've seen on the web. I have code already that works, just not through a partial view.
CSHTML:
<form>
<div id="currentandnewtipamount">
<div>@Html.Label("Current Tip Amount: $")
<label for="CurrentTipAmount" ></label>
</div>
<br />
@Html.Label("Tip Edit Amount")
<input type="text" name="NewTipEditAmount" id="NewTipEditAmount" >
</div>
</form>
JQuery:
var TipEditDialog, RRN;
NewTipEditAmount = $("#NewTipEditAmount");
function SubmitTipEditAmount() {
NewTipEditAmount = $("#NewTipEditAmount").val().toString();
{
$.ajax({
type: "POST",
url: "/MyTransactions/UpdateTipAMT",
data: { 'NewTipEditAmount': NewTipEditAmount },
success: function (bool) {
//alert(bool);
}
});
}
}
Below is a working example in another part of the site that does not use a partial view.
JQuery:
var Logindialog, form;
loginusername = $("#loginusername"),
loginpassword = $("#loginpassword"),
loginnewpassword = $("loginnewpassword"),
loginconfirmnewpassword = $("loginconfirmnewpassword"),
allFields = $([]).add(loginusername).add(loginpassword);
function LoginUser() {
loginusername = $("#loginusername").val().toString();
loginpassword = $("#loginpassword").val().toString();
{
$.ajax({
type: "POST",
url: "/User/Login",
data: { 'loginusername': loginusername, 'loginpassword': loginpassword },
success: function (response) {
if (response === true) {
$("#Logindialog-form").dialog("close");
RunPasswordCheck(loginusername, loginpassword);
}
else {
alert("Something is not correct, try again please");
Logindialog.dialog("close");
}
}
});
}
}
CSHTML:
<div id="Logindialog-form" title="Log In" class="divloginformcontent">
<form class="loginformcontent">
<div id="usernameAndpassword" class="Usernamepassword">
<label for="username" class="loginfieldtext">Username</label>
<input type="text" name="loginusername" id="loginusername" class="loginfields" />
<br /><br />
<label for="password" class="loginfieldtext">Password</label>
<input type="password" name="loginpassword" id="loginpassword" class="loginfields" />
<br /><br />
</div>
<input type="submit" tabindex="-1" style="position: absolute; top: -1000px" id="LoginSubmit" /> @*tab index and style allows for the enter button to be used without messing up anything*@
</form>
Below is the code which ended up working for my situation. I seemed to need to have an 'id' for every element and reference them throughout the nesting in the jquery.
CSHTML:
<div id="EditTip-form" title="Edit Tip Amount" class="divloginformcontent">
<form class="loginformcontent" id="form">
<div id="currentandnewtipamount">
@Html.Label("Current Tip Amount: $") <label for="CurrentTipAmount" ></label>
<br />
@Html.Label("Tip Edit Amount")
<input type="text" name="NewTipEditAmount" id="NewTipEditAmount" class="forminput">
</div>
</form>
</div>
JQUERY:
function SubmitTipEditAmount() {
NewTipEditAmount = $('#EditTip-form #form #currentandnewtipamount #NewTipEditAmount').val();
{
$.ajax({
type: "POST",
url: "/MyTransactions/UpdateTipAMT",
data: { 'RRN': RRN, 'NewTipEditAmount': NewTipEditAmount },
success: function (bool) {
//alert(bool);
}
});
TipEditDialog.dialog("close");
}
}