Below jquery ajax call is not working properly. IF I am directly passing values for city/area/vendortype then its working correctly. However below ajax call is not taking values from respective control.
public void GetVendors(int pageNumber, int pageSize, string city, string area, string vendortype)
{
List<VendorData> listVendors = new List<VendorData>();
string cs = ConfigurationManager.ConnectionStrings["Connectionstr"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("spGetVendorbyFilter", con);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#PageNumber", pageNumber);
cmd.Parameters.AddWithValue("#PageSize", pageSize);
cmd.Parameters.AddWithValue("#city", city);
cmd.Parameters.AddWithValue("#area", area);
cmd.Parameters.AddWithValue("#vendortype", vendortype);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
VendorData vendor = new VendorData();
vendor.pID = Convert.ToInt32(rdr["VendorID"]);
vendor.pvendorname = Convert.ToString(rdr["VendorName"]);
vendor.pcoverimage = Convert.ToString(rdr["CoverImage"]);
vendor.pcategory = Convert.ToString(rdr["Category"]);
listVendors.Add(vendor);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listVendors));
}
}
<script type="text/javascript">
$(document).ready(function () {
var currentPageNumber = 1;
loadData(currentPageNumber);
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
currentPageNumber += 1;
loadData(currentPageNumber);
}
});
function loadData(currentPage)
{
var parCity = $("#lblCityParameter").val();
var parArea = $("#lblAreaParameter").val();
var parCategory = $("#lblVendortype").val();
$.ajax({
type: 'POST',
url: 'WebService/VendorService.asmx/GetVendors',
**data: { pageNumber: currentPage, pageSize: 6, city: parCity, area: parArea, vendortype: parCategory }**,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data)
{
var vendorRepeater = $('#repdata');
$(data).each(function (index,ven)
{
vendorRepeater.append('<div class="col-md-4 wow fadeInLeft animated" data-wow-delay="0.4s" style="text-align:center"><div id="Div1" class="living_boxauto" runat="server"><a href="VendorDetails.aspx?VendorId='+ven.pID+'"><div class="media"><img runat="server" class="img-responsive" src="images/'
+ ven.pcoverimage +
'" style="width:300px;height:200px;" /><div class="media__body"><h2>Image Title</h2><p>Description</p></div></div></a><div id="Div2" class="living_desc" runat="server"><h3><a href="VendorDetails.aspx?VendorId='
+ven.pID+
'"><asp:Label ID="lblVendorName" runat="server" Text="'
+ ven.pvendorname +
'" CssClass="lblVendorName"></asp:Label></a></h3><p></p></div></div></div>');
});
}
});
}
});
</script>
Related
My default start page has no data
Then filter out the data in the database after the two drop-down list
I hope that the filtered data can be displayed in pagination if there are more than ten records.
But I don't know how to do.
I'm new in this.
Here is my javascript
<script type="text/javascript">
$(document).ready(function () {
$("#CITY").change(function () { ChangeCity(); });
$("#AREA").change(function () { ChangeArea(); });
$(document).on('submit', '#ButtonSubmit', function () {
return false;
});
})
function SetareaEmpty() {
$('#CITY').empty();
$('#CITY').append($('<option></option>').val('').text('select'));
}
function ChangeCity() {
var selectedCity = $.trim($('#CITY option:selected').val());
if ($.trim(selectedCity.length) > 0) {
ChangeArea(selectedCity);
}
else {
SetareaEmpty()
}
}
function ChangeArea(selectedCity) {
$.ajax({
type: "POST",
url: '#Url.Action("GetSecondDDL", "Getarea")',
dataType: "json",
data: { cityName: selectedCity },
success: function (mems) {
if (mems.length > 0) {
$('#AREA').empty();
$('#AREA').append($('<option></option>').val('').text('select'));
}
$.each(mems, function (i, member) {
$("#AREA").append($('<option></option>').val(member).text(member));
});
}
});
}
function SerchallData(selectedCity) {
var selectedCity = $('#CITY option:selected').val();
var selectedValue = $('#AREA option:selected').val();
if ($.trim(selectedValue).length > 0) {
$.ajax({
url: '#Url.Action("Getmap", "Getarea")',
data: { cityName: selectedCity, areaName: selectedValue },
type: 'POST',
dataType: 'json',
success: function (data) {
$('#Mytable>tbody').empty();
for (var i = 0; i < data.length; i++) {
var row = $('<tr><td>'>+</td><td>' + data[i].ID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Address + '</td><td>' + data[i].Phone + '</td><td>' +'</td></tr>');
$('#Mytable>tbody').append(row);
}
$('#Mytable').show(); //show filter data
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});
}
}
my dropdownlist is use js to connection
filter data also
that's means after user selected city and area
data will be displayed
here is my html:
<form>
<div class="row well">
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">City</span>
<p>
#Html.DropDownList("City", (IEnumerable<SelectListItem>)ViewBag.Allcity, "Please select", new { id = "CITY" })
</p>
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">Area</span>
<p> <select id="AREA" name="AREA"><option>Please select</option></select></p>
</div>
</div>
<div class="col-lg-2">
<button type="button" onclick="SearchallData()" id="ButtonSubmit" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>search
</button>
</div>
</div>
<table id="Mytable" class="table table-bordered table-hover" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
//first page table will not show any data so is null
</tbody>
and my controller
public async Task<ActionResult> Index()
{
var b = new GetCollection();
var areasource = await b.GetInserchdata();
ViewBag.AllCity = areasource.Select(s => s.City).Distinct().Select(item => new SelectListItem()
{
Text = item,
Value = item
});
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(connstr))
{
con.Open();
string q = "Select * from Shopmap";
SqlDataAdapter da = new SqlDataAdapter(q, con);
da.Fill(dt);
}
return View(dt);
}
//js for first selected dropdownlist
[HttpPost]
public async Task<JsonResult> GetSecondDDL(string cityName)
{
var CitySlectList = this.GetSelectList(await GetCity(), cityName);
if (string.IsNullOrEmpty(cityName))
{
return Json(new EmptyResult());
}
var AreaSlectList = await this.GetArea(cityName);
return Json(AreaSlectList);
}
//js for selected second dropdownlist then search data
[HttpPost]
public JsonResult GetShopmap(string cityName, string areaName)
{
var b = new GetCollection();
List<Inserch> shop = b.GetDBdata();
var a = shop.FindAll(x => x.Address.Contains(cityName));
var Alldata = a.FindAll(x => x.Address.Contains(areaName)).AsEnumerable();
if (string.IsNullOrEmpty(areaName))
{
return Json(new EmptyResult());
}
return Json(Alldata);
}
I think it will use js to do what I want
then maybe c# code will put in
[HttpPost]
public JsonResult GetShopmap(string cityName, string areaName)->this function
please tell me what to do
I desperately need.
thank's.
Pagination for Dropdownlist filter data in ASP.NET MVC
You can achieve that in following way:
HTML
<table id="userTable_info">
<thead>
<tr>
<th>Id </th>
<th>Controller </th>
<th>Page_name</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tBody"> </tbody>
</table>
Script:
#section scripts {
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#userTable_info').hide();
//On Submit Method
$("#Submit").click(function () {
var ddlCategory = parseInt($("#ddlCategory").val());
var ddlSubCategorie = parseInt($("#ddlSubCategorie").val());
$.ajax({
type: "POST",
url: 'http://localhost:5094/Member/GetShopmap',
dataType: "json",
data: { cityName: ddlCategory, areaName: ddlSubCategorie },
success: function (response) {
console.log(response);
$.each(response, function (index, value) {
var tr = "<tr>";
tr += "<td>" + value.ulogo_id + "</td>";
tr += "<td>" + value.controller + "</td>";
tr += "<td>" + value.page_name + "</td>";
tr += "<td>" + "<input type='button' id='" + value.id + "' class='btn btn-warning' onclick='EditFunc(" + value.id + ")' value='Edit'>" + " " + "<input type='button' id='" + value.id + "' class='btn btn-danger' onclick='DeleteFunc(" + value.id + ")' value='Delete'>" + "</td>" + "</tr>";
$("#tBody").append(tr);
});
$("#userTable_info").DataTable();
$('#userTable_info').show();
}
});
});
});
</script>
}
Output:
Note: Based on your table defination please implement the neccessary chnages. It ill work as expected.
i want to replacement character from data loop ajax (data[i]) to some values,
i have this js
<script type="text/javascript">
$(document).ready(function() {
$('select[name="parameter"]').on('change', function() {
var idpar = $(this).val();
var subdir = $('input[name="subdirid"]').val();
var year = $('input[name="added_year"]').val();
var i = 0;
if (idpar != '') {
$.ajax({
url: "{{URL::to('myform/myformColaborate')}}/" + idpar + "/" + subdir + "/" + year,
type: "GET",
dataType: "json",
success: function (data) {
$.each(data, function (key, city2) {
$('select[name="type2"]').empty();
$('select[name="type2"]').append(
'<option disabled selected>Select Request Colaborate</option>'
);
for (var i = 0; i < data.length; i++) {
$('select[name="type2"]').append(
'<option value="'+ data[i] +'">Request Colaborate with '+ data[i] +'</option>'
);
}
});
}
});
}
});
});
</script>
and the controller
public function myformColaborate($idpar, $subdir, $year) {
$cities = DB::table("pra_kpis")
->where('subdir_colaborate','like','%'.$subdir.'%')
->where('added_year',$year)
->where('kpi_parameters_id',$idpar)
->distinct()
->pluck("subdirs_id");
return response()->json($cities, 200);
}
for example , i have script replacement outside js like this, how to define it inside js
<?php
$roles = DB::table('pra_kpis')->where('id','=',$l->id)->pluck('subdir_colaborate');
$dir2 = DB::table('subdirs')->select('name')->pluck('name');
$iddir = DB::table('subdirs')->select('id')->pluck('id');
?>
#foreach($roles as $drop)
{{$drop = str_replace($iddir, $dir2, $drop)}}
#endforeach
Try this:
Do it from front-end only,
Use data[i].replace('search string', 'replace string');
RoleListand EmpListwe having two arraylist how to return two array list in JSON and how to view in data table rows.
I need to return return Json(EmpList,RoleList, JsonRequestBehavior.AllowGet);
[HttpPost]
[MyExceptionHandler]
public ActionResult ViewModules(int id)
{
Domain_Bind();
dynamic mymodel = new ExpandoObject();
userType type = new userType();
List<ViewRoleModules> EmpList = type.GetRoleModulesViews(id);
string sRptModuleIDs = string.Empty;
foreach (ViewRoleModules emp in EmpList)
{
sRptModuleIDs += emp.ModuleID + ",";
}
if (sRptModuleIDs != "")
{
sRptModuleIDs = sRptModuleIDs.Remove(sRptModuleIDs.Length - 1, 1);
}
List<ViewRoleModules> RoleList;
foreach (var rid in sRptModuleIDs.Split(','))
{
string RID = rid;
RoleList = type.GetSiteRoleModulesViews(rid);
}
return Json(EmpList, JsonRequestBehavior.AllowGet);
}
Scripts:
<script>
$(document).ready(function () {
$("#DomainID").change(function () {
var id = $(this).val();
$("#example tbody tr").remove();
$.ajax({
type: 'POST',
url: '#Url.Action("ViewModules")',
dataType: 'json',
data: { id: id },
success: function (data) {
var items = '';
$.each(data, function (i, item) {
$("#findValue").show();
var rows = "<tr>"
+ "<td>" + i + "</td>"
+ "<td>" + item.ModuleName + "</td>"
+ "<td>" + item.Url + "</td>"
+ "<td>" + item.RoleName + "</td>"
+ "</tr>";
$('#example tbody').append(rows);
});
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
return false;
})
});
</script>
Cshtml:
<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>S#</th>
<th>Module Name</th>
<th>Url</th>
<th>Roles</th>
#*<th>Action</th>*#
</tr>
</thead>
<tbody>
</tbody>
</table>
in my code return only one array list..
I need to display to array list
public List<ViewRoleModules> GetRoleModulesViews(int id)
{
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Admin"].ConnectionString))
{
List<ViewRoleModules> EmpList = new List<ViewRoleModules>();
SqlCommand com = new SqlCommand("MEDEIL_Modules_SelectDomainModules", conn);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.AddWithValue("#DomainID", id);
SqlDataAdapter da = new SqlDataAdapter(com);
DataTable dt = new DataTable();
conn.Open();
da.Fill(dt);
conn.Close();
foreach (DataRow dr in dt.Rows)
{
EmpList.Add(
new ViewRoleModules
{
ModuleID = Convert.ToInt32(dr["ModuleID"]),
CompanyTypeID = Convert.ToInt32(dr["CompanyTypeID"]),
DomainID = Convert.ToInt32(dr["DomainID"]),
ParentModuleID = Convert.ToInt32(dr["ParentModuleID"]),
ModuleName = Convert.ToString(dr["ModuleName"]),
FolderName = Convert.ToString(dr["FolderName"] == DBNull.Value ? null : dr["FolderName"].ToString()),
Url = Convert.ToString(dr["Url"]),
TabOrder = Convert.ToInt32(dr["TabOrder"]),
Style = Convert.ToString(dr["Style"]),
Status = Convert.ToString(dr["Status"]),
IsTab = Convert.ToString(dr["IsTab"]),
ApprovalProcess = Convert.ToString(dr["ApprovalProcess"]),
CreatedBy = Convert.ToInt32(dr["CreatedBy"] == DBNull.Value ? null : dr["CreatedBy"].ToString()),
CreatedDate = Convert.ToDateTime(dr["CreatedDate"]),
ModifiedBy = Convert.ToInt32(dr["ModifiedBy"] == DBNull.Value ? null : dr["ModifiedBy"].ToString()),
ModifiedDate = Convert.ToDateTime(dr["ModifiedDate"] == DBNull.Value ? null : dr["ModifiedDate"].ToString())
}
);
}
return EmpList;
}
}
public List<ViewRoleModules> GetSiteRoleModulesViews(string rid)
{
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Admin"].ConnectionString))
{
List<ViewRoleModules> RoleList = new List<ViewRoleModules>();
SqlCommand com = new SqlCommand("MEDEIL_SiteRoleModules_SelectOne", conn);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.AddWithValue("#ModuleID", Convert.ToInt32(rid));
SqlDataAdapter da = new SqlDataAdapter(com);
DataTable dt = new DataTable();
conn.Open();
da.Fill(dt);
conn.Close();
foreach (DataRow dr in dt.Rows)
{
RoleList.Add(
new ViewRoleModules
{
RoleID = Convert.ToInt32(dr["RoleID"]),
RoleName = Convert.ToString(dr["RoleName"])
}
);
}
return RoleList;
}
}
You can easily combine the two with an anonymous type:
var data = new {EmpList = EmpList, RoleList = RoleList};
return Json(data, JsonRequestBehavior.AllowGet);
And on the client side just use the property you need:
success: function (data) {
// do something with role list
$.each(data.RoleList, function (i, item) {
...
// do something else with employee list
$.each(data.EmpList, function (i, item) {
you can try the simple way with dictionary.
public ActionResult ViewModules(int id)
{
Domain_Bind();
dynamic mymodel = new ExpandoObject();
userType type = new userType();
Dictionary<string, object> dList = new Dictionary<string, object>();
List<ViewRoleModules> EmpList = type.GetRoleModulesViews(id);
string sRptModuleIDs = string.Empty;
foreach (ViewRoleModules emp in EmpList)
{
sRptModuleIDs += emp.ModuleID + ",";
}
if (sRptModuleIDs != "")
{
sRptModuleIDs = sRptModuleIDs.Remove(sRptModuleIDs.Length - 1, 1);
}
List<ViewRoleModules> RoleList;
foreach (var rid in sRptModuleIDs.Split(','))
{
string RID = rid;
RoleList = type.GetSiteRoleModulesViews(rid);
}
dList.Add("EmpList", EmpList);
dList.Add("RoleList", RoleList);
return Json(dList, JsonRequestBehavior.AllowGet);
}
With the help of dictionary, you can bind n number of object together.
Ok i have some search results from input box. I used keyup to get results. Then tis results send to AJAX, and i want to append it to table. My problem is because i use append i will get more than one table headers if i have more results, on the other side i cant use html() because script use for loop so i will only get one result. Can someone help me to solve this problem. I try something like this...
$("#search").keyup(function ()
{
var value = $(this).val(); // varijabla iz input polja
// provera za minimalnu duzinu pretrage
if(value.length > 3)
{
$.ajax({
type: "POST",
url: "crud/searching/",
data: { 'var' : value },
dataType: "json",
success: function(response)
{ alert(response);
$('#warning').html(response.msg);;
$('#result').html('');
for(var i=0; i<response.result.length; i++) //petlja za pristup json
{
$('#result').append('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody><tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr> </tbody></table> ' );//dodavanje rezultata u div
}
}
})
}
});
Just create the table once and then append trs in the loop to its tbody
$('#warning').html(response.msg);
if (response.result.length) {
var $table = $('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody></tbody></table>').appendTo($('#result').html(''));
var $tbody = $table.find('tbody');
for (var i = 0; i < response.result.length; i++) //petlja za pristup json
{
$tbody.append('<tr><td>' + response.result[i].id + '</td><td>' + response.result[i].naslov + '</td><td>' + response.result[i].autor + '</td><td>' + response.result[i].cena + '</td><td>' + response.result[i].valuta + '</td></tr> '); //dodavanje rezultata u div
}
} else {
$('#result').html('')
}
Try this :
$("#search").keyup(function ()
{
var value = $(this).val(); // varijabla iz input polja
// provera za minimalnu duzinu pretrage
if(value.length > 3)
{
$.ajax({
type: "POST",
url: "crud/searching/",
data: { 'var' : value },
dataType: "json",
success: function(response)
{ alert(response);
$('#warning').html(response.msg);
// Store jQuery objects if used more than once
var $table = $('<table class="page-list">').appendTo($('#result')),
$thead = $('<thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead>').appendTo($table),
$tbody = $('<tbody>').appendTo($table);
innerHTML = '';
for(var i=0; i<response.result.length; i++) //petlja za pristup json
{
innerHTML += '<tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr>' );//dodavanje rezultata u div
}
// Append to HTML only once, when you have the full HTML to append
$tbody.append(innerHTML);
}
})
}
});
I am some what new to javascript and mvc3 just for your information.
I have been having troubles trying to figure out multiple payment models on one view without the javascript getting all messed up.
What I am trying to do:
Create a parent model so that all the children models will have one or two attributes from the parent model.
Use javascript in order to get data from the server to gather and post data without messing up each other payments on the view already.
If there is an easier way to collect multiple payments and return them to the control please give me a link or some information to research... Thank you!
In the main view all I do is display the first partial view and two buttons(post, add new payment) the post button submits the payment to the server, and the new payment adds another partial view payment model.
the issue I am having is getting the partial views to work with the javascript, which only targets the first payment. I have been looking up this issue for a few days now and can't find a good answer. The only answer that makes sense to me is to change the id's of all the elements on the partial view and have my javascript reference the updated id's but I don't know how to change the id's dynamically in order for the javascript to change with it.
I apologize if I am missing anything, I am new to this stuff.
Payment Partial View:
#model SBTools.Models.Payment
#*AJAX TO RETRIEVE BILLING COMPANY LIST DATA*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: '#Url.Content("~/AddPayments/GetBillingCompanies")',
type: 'POST',
data: {},
success: function (data) {
var items = "<option>Select Billing Company</option>";
$.each(data, function (i, item) {
var val = item.OCN;
var txt = item.OCNDescription;
items += "<option value=" + val + ">" + val + " " + txt + "</option>";
});
$('#OCN').html(items);
}
});
});
</script>
#*AJAX TO RETRIEVE CARRIERNAME LIST
PARAM1: Billing Company OCN*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#OCN').on("change", function () {
var OCN = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetConnectionString")',
type: 'POST',
data: { OCN: OCN },
success: function (data) {
$('#connectionString').val(data);
connectionString = data;
$.ajax({
url: '#Url.Content("~/AddPayments/GetGLAccounts")',
type: 'POST',
data: { connectionString: connectionString, OCN: OCN },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=" + item.ID + "/" + item.AccountNumber + ">GL:" + item.AccountNumber +
"  " + item.AccountName + "</option>";
});
$('#GLAccount').html(items);
}
});
}
});
$.ajax({
url: '#Url.Content("~/AddPayments/GetCarriers")',
type: 'POST',
data: { OCN: OCN },
success: function (data) {
var items = "<option>Select a Carrier</option>";
$.each(data, function (i, item) {
if (item.CIC) {
items += "<option value=" + item.CarrierId + ">" + item.CIC + " CIC " + item.CarrierName + "</option>";
} else if (item.OCN) {
items += "<option value=" + item.CarrierId + ">" + item.OCN + " OCN " + item.CarrierName + "</option>";
}
});
$('#CarrierName').html(items);
}
});
});
});
</script>
#*AJAX TO RETRIEVE BAN/INVOICE/AMOUNT DATA
PARAM1: Billing company ocn
PARAM2: Carrier ID*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#CarrierName').on("change", function () {
var isZeroBalanceShowing = false;
if ($('#isZeroBalanceShowing').prop("checked"))
isZeroBalanceShowing = true;
var carrierID = $('#CarrierName').val();
var ocn = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetAccount")',
type: 'POST',
data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
var inv = item.Invoice;
var ban = item.BAN;
var initAmnt = item.InitAmount;
var amnt = item.Amount;
var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();
items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
});
$('#BAN').html(items);
}
});
});
});
</script>
#*AJAX TO SHOW ZERO BALANCES IN INVOICE DROPDOWN*#
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#isZeroBalanceShowing').click(function () {
var isZeroBalanceShowing = false;
if ($('#isZeroBalanceShowing').prop("checked"))
isZeroBalanceShowing = true;
if ($('#CarrierName').val() != null) {
var carrierID = $('#CarrierName').val();
var ocn = $('#OCN').val();
var connectionString = $('#connectionString').val();
$.ajax({
url: '#Url.Content("~/AddPayments/GetAccount")',
type: 'POST',
data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
success: function (data) {
var items = "";
$.each(data, function (i, item) {
var inv = item.Invoice;
var ban = item.BAN;
var amnt = item.Amount;
var initAmnt = item.InitAmount;
var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();
items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
});
$('#BAN').html(items);
}
});
}
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var amnt = "";
$('#Amount').blur(function () {
if ($('#Amount').val().toString().charAt(0) === '$') {
amnt = $('#Amount').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#Amount').val()).toFixed(2);
}
$('#Amount').val(amnt);
});
$('#Deposit').blur(function () {
if ($('#Deposit').val().toString().charAt(0) === '$') {
amnt = $('#Deposit').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#Deposit').val()).toFixed(2);
}
$('#Deposit').val(amnt);
});
$('#CheckAmount').blur(function () {
if ($('#CheckAmount').val().toString().charAt(0) === '$') {
amnt = $('#CheckAmount').val();
amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
} else {
amnt = parseFloat($('#CheckAmount').val()).toFixed(2);
}
$('#CheckAmount').val(amnt);
});
});
</script>
#*DATEPICKER FOR DATE RECIEVED*#
<script>
$.datepicker.setDefaults({
constrainInput: true,
dateFormat: 'yyyy/mm/dd',
gotoCurrent: true,
hideIfNoPrevNext: true,
minDate: '-3m',
maxDate: 0,
showOn: 'both'
});
#*DATEPICKER FOR CHECKDATE*#
// To date - default to today's date
$(document).ready(function () {
$('#Date').datepicker({
maxDate: '0',
defaultDate: new Date(),
onSelect: function (dateStr) {
$('#CheckDate').datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
}
});
});
$(document).ready(function () {
$('#CheckDate').datepicker({
maxDate: '0',
defaultDate: new Date(),
onSelect: function (dateStr) {
$('#Date').datepicker("option", "maxDate", '+0m +0w');
}
});
});
</script>
<h3>Payment #Html.DisplayFor(x => x.AccountID):</h3>
#Html.HiddenFor(x => x.AccountID, new { id = "ID" })
#Html.HiddenFor(x => x.connectionString, new { id = "connectionString" })
<table id="tblAcct" class="display">
<tr class="spacer" />
<tr>
<td>Billling Company (First**):#Html.ValidationMessageFor(model => model.OCN, " *Select a Value")</td>
<td>Carrier Company (Second**):#Html.ValidationMessageFor(model => model.CarrierName, " *Select a Value")</td>
<td>Deposit Amount:#Html.ValidationMessageFor(model => model.Deposit, " *Enter a Value") </td>
</tr>
<tr>
#*OCN*#
<td>
<select required id="OCN" name="OCN" style="width: 200px;" tabindex="0" ></select></td>
#*CarrierName*#
<td>
<select required id="CarrierName" name="CarrierName" style="width: 200px;"></select></td>
#*DEPOSIT*#
<td>$#Html.TextBoxFor(a => a.Deposit, new { style = "width:200px;" })</td>
</tr>
<tr class="spacer" />
<tr>
<td>Check Date:</td>
<td>Check Amount:#Html.ValidationMessageFor(model => model.CheckAmount, " *Enter a Value")</td>
<td>Check Number:#Html.ValidationMessageFor(model => model.CheckNumber, " *Enter a Value")</td>
</tr>
<tr>
#*CHECKDATE*#
<td>#Html.EditorFor(model => model.CheckDate, new { id = "CheckDate" })
#Html.ValidationMessageFor(model => model.CheckDate, "mm/dd/yyyy")</td>
#*CHECKAMOUNT*#
<td>$#Html.TextBoxFor(a => a.CheckAmount, new { style = "width:200px;" })</td>
#*CHECKNUMBER*#
<td>#Html.TextBoxFor(a => a.CheckNumber, new { style = "width:200px;" })</td>
</tr>
</table>
<table id="tblAcctInvoice" class="display">
<tr class="spacer" />
<tr>
<td>Invoice:
#Html.CheckBoxFor(model => model.isZeroBalanceShowing, new { id = "isZeroBalanceShowing" }) Zero Balances
#Html.ValidationMessageFor(model => model.Invoice, " *Select a Value")</td>
<td>Payment Date:</td>
<td>Payment Amount:#Html.ValidationMessageFor(model => model.Amount, " *Enter a Value")</td>
<td>GL Account:#Html.ValidationMessageFor(model => model.GLAccount, " *Select a Value")</td>
</tr>
<tr>
#*BAN*#
<td>
<select required id="BAN" name="Invoice" style="width: 351px;"></select></td>
#*PAYMENT DATE*#
<td>
<div class="Date">
#Html.EditorFor(model => model.Date, new { id = "Date" })
#Html.ValidationMessageFor(model => model.Date, "mm/dd/yyyy")
</div>
</td>
#*PAYMENT AMOUNT*#
<td>
<div class="currency">
$#Html.TextBoxFor(a => a.Amount, new { style = "width:150px;", id = "Amount" })
</div>
</td>
#*GLACCOUNT*#
<td>
<select required id="GLAccount" name="GLAccount" style="width: 200px;"></select></td>
</tr>
</table>
<table id="tblAcctComment" class="display">
<tr>
<td>Comments:
#*ISSERVICEBUREAU*#
#Html.CheckBoxFor(a => a.isServiceBureauCollection, new { #checked = "checked" }) Service Bureau Collection:</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(a => a.Comment, new { style = "width:99%; height: 20px;" })
</td>
</tr>
</table>
This is happening because you are dynamically loading html(partial Views) in your pages and the new html element added to the page are not binded with any javascript events.
jquery always work only on those element that are loaded in HTML dom. To get your page working
you have to call all your jquery event for that partial page on success callback.