I am developing MVC application.
I have shown the confirm modal box.
It works properly only at once.... If I open it again it didnt work at all...
check below picture....
when I put the entries in the dispatch text box(34), on blur event it multiplies bundle size value(60) and shows in Pisces text box (2040). its working fine,
when I close the box and open it again and put the values again in dispatch text box, its not working at all...
Here is my code...
<h2 style="font-size:22px;">Dispatch </h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Create", "Dispatch", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate" }))
{
#Html.ValidationSummary(true)
<div class="row-fluid">
<div class="span12 roundedDiv" >
<div class="span12" style="margin-left:0px; margin-bottom:10px;">
<legend style="color:#ee8929; font-size:16px;">Primary Information</legend>
</div>
<div class="span12" style="margin-left:0px; margin-bottom:10px;">
<legend style="color:#ee8929; font-size:16px;">Product List</legend>
<div class="row-fluid">
<table class="table table-striped table-hover" id="mytable">
<thead>
<tr >
<th>
Section Name
</th>
<th>
Section Code
</th>
</tr>
</thead>
<tbody id="tbody">
#foreach (var item in ViewBag.ProductList)
{
<tr id="tableRow" >
<td >
#item.SectionName
</td>
<td >
#item.SectionCode
</td>
<td id="editRow" >
Edit
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="span11" >
<div class="span3"> Order Date : #System.DateTime.Now.ToShortDateString()</div>
<div class="span9" style="text-align:right">
<button type="button" class="btn btn-primary" id="btnDispatch" >Dispatch</button>
<input class="btn btn-default" value="Back" style="width:40px;" onclick="window.location.href='#Url.Action("index") '"/>
</div>
</div>
</div>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('.editClass').click(function () {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose1"> × </button><h5 id="dataConfirmLabel">Edit </h5> </div><div class="modal-body" ><html><table style="width:530px"><tr> <th style="width:120px">Bundle Size</th><th>Count</th><th>Dispatch</th> <th> Pieces</th> </tr><tr> <td><div id="bundleSize1" >60 </div></td> <td><div id="count1">3</div></td> <td><input id="dispatchValue1" type="text" style="width:100px ;height:15px ;margin:1px" /></td> <td> <input id="pieces1" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td><div id="bundleSize2" >10</div></td> <td><div id="count2">8</div></td><td><input id="dispatchValue2" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces2" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr style="border-bottom:solid #e8eef4 thick;"> <td><div id="bundleSize3" >1</div></td><td><div id="count3">20</div></td><td><input id="dispatchValue3" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces3" class="txt" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td colspan="3" style ="text-align: right; border-right:solid white;"> Total</td> <td> <input id="total" type="text" value="0" style="width:100px ;height:15px ;margin:1px" disabled /></td></tr></table> </html></div> <div class="modal-footer"><button type="button" id="btnOk1" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> <button type="button" id="btnCancel1" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancel</button> </div></div> ');
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmModal').modal({ show: true });
});
$('body').on('click', '#btnOk1', function() {
});
$('body').on('click', '#btnCancel1', function() {
var url="#Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose1', function() {
var url="#Url.Action("DispatchNow")";
$(location).attr('href', url);
});
Below is the Blur event of textbox, where calculation take place. calculation is ok...but value dont assigned to Pieces textbox.
$('body').on('blur', '#dispatchValue1', function() {
var dispatchValue = $('#dispatchValue1').val();
var bundleSize = $('#bundleSize1').text();
var nPieces1 = dispatchValue*bundleSize;
$('#pieces1').val(nPieces1);
var ntotal= $('#total').text();
$('#supplyQuantity').val(sum);
if(ntotal > 0)
{
var ntotal = $('#total').val();
var sum = parseFloat(ntotal) +parseFloat(nPieces1);
$('#pieces1').val(sum);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
else
{
var sum = parseFloat(nPieces1);
$('#pieces1').val(sum);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
});
});
$(document).ready(function () {
$('#btnDispatch').click(function () {
$('body').append('<div id="dataConfirmModal1" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose"> × </button> <h5 id="dataConfirmLabel">Dispatch Alert</h5> </div><div class="modal-body"><h5>This order is dispatched.</h5><br/></div><div class="modal-footer"><button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> </div></div> <div class="modal-backdrop"></div>');
$('#dataConfirmModal1').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmModal1').modal({ show: true });
});
$('body').on('click', '#btnOk', function() {
var url="#Url.Action("index")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose', function() {
var url="#Url.Action("index")";
$(location).attr('href', url);
});
});
</script>
Can you please call alert in this code block;
$('body').on('blur', '#dispatchValue1', function() {
var dispatchValue = $('#dispatchValue1').val();
alert(dispatchValue );
var bundleSize = $('#bundleSize1').text();
alert(bundleSize);
var nPieces1 = dispatchValue*bundleSize;
$('#pieces1').val(nPieces1);
I think at second time one of that alert values is null or empty. Check that please. You lose the control of that field.
Related
I am trying to render partial view from controller on button click event to view the details. But unfortunately its not working.
My Controller Action
OwnerController.cs
public IActionResult ShowpopUp(int id) {
var venue = _context.Venues.FirstOrDefault(x=>x.Id==id);
return PartialView(venue);
}
My View All.cshtml
#model List<Venue>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<script>
function Details(id)
{
$.get("#Url.Action("ShowpopUp","Owner")/"+id,
function(data) {$('.modal-body').html(data);})
$("#myModal").modal("show");
}
$('#myModal').on('hidden.bs.modal', function(e){
$('.modal-body').html("");
})
}
</script>
myModal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The following example should help achieve your requirement of rendering partial view as modal popup using jQuery Ajax, please check it.
All.cshtml
#model IEnumerable<Venue>
#{
ViewData["Title"] = "All";
}
<h1>All</h1>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach (var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts{
<script>
function Details(id) {
$.get("#Url.Action("ShowpopUp","Owner")/" + id,
function (data) {
$('.modal-body').html(data);
});
$("#myModal").modal("show");
}
</script>
}
ShowpopUp action
public IActionResult ShowpopUp(int id)
{
var venue = _context.Venues.FirstOrDefault(x => x.Id == id);
//specify the name or path of the partial view
return PartialView("_VenueDetail", venue);
}
_VenueDetail.cshtml (partial view under Views/Shared folder)
#model Venue
<h1>Venue Details</h1>
<h2>Id: #Model.Id</h2>
<h2>Name: #Model.Name</h2>
Test Result
I'm trying to get to grips with ViewComponents but having trouble trying to get the ViewComponent to reload on a button click. Whats the correct way to handle this?
Initially on the page loading it looks OK like this
In my controller I have
public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
{
return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
}
and in my razor view I'm passing parameters to the ReloadViewComponent method
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
full razor view
<body>
<div class="row" style="margin-top:5px;">
<div class="col-lg-4 col-md-12">
<div class="card" style="margin-bottom:0; ">
<div class="header" style="margin-bottom:55px;">
<h2 class="text-primary">Blueprint Breakdown</h2>
</div>
<div class="body">
<div>
<h5 class="text-center">#Model.BlueprintName</h5>
</div>
<div class="row text-center">
<div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ImageUrl" alt="#Model.BlueprintName">
</div>
<div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ProductImageUrl" alt="#Model.BlueprintName">
</div>
</div>
<div class="text-center" style="margin-top:5px;">
<text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
<br />
<text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
<br />
<text style="font-size:small;">Current Region is <span class="text-green">#Model.CharacterRegionName</span></text>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-custom spacing5">
<thead>
<tr>
<th></th>
<th>Material</th>
<th>Quantity</th>
<th>Price</th>
<th>Market</th>
</tr>
</thead>
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
</div>
but when clicking the view button to reload the ViewComponent it is rendered like this.
Note by using the ViewComponent() controller method, your client only gets the component part of the view. So instead of changing the browser's current location, you should send an ajax request and dynamically replace the right side content.
Add an id='MarketOrderComponent'attribute so that we can reference this element later:
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
And change the button click event handler to send an ajax request. For example, in order to reload the market order component, you can change your code as below:
<script>
function reload(url){
return $.ajax({
method:"get",
url:url,
success:function(resp){ $('#MarketOrderComponent').html(resp);},
});
}
</script>
<div class="card" style="margin-bottom:0; ">
...
</div>
<div class="table-responsive">
...
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td>
<button class="btn btn-sm btn-outline-primary"
value="#material.MaterialTypeID"
onclick="var link='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)"
>
View
</button>
</td>
</tr>
}
</tbody>
...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
After clicking "Advanced search" button i want to open a modal from a partial view where i can apply custom search
Here is my Index.cshtml page for showing data table
#model SmartAdmission.Web.Areas.Admin.Models.InstituteViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Program Level List</h3>
</div>
<div class="box-body">
#if (TempData["Message"] != null)
{
<div class="alert alert-#TempData["alertType"]">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
#TempData["Message"]
</div>
}
#*<input type="hidden" id="hiddenProvinceId" />*#
<table id="instituteTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>
<button type="button"
class="btn btn-default btn-md" data-toggle="modal"
data-target="#advancedSearchModal"
id="advancedsearch-button">
<span class="glyphicon glyphicon-search"
aria-hidden="true"></span> Advanced Search
</button>
</th>
</tr>
<tr>
<th>Institute Name</th>
<th>Province</th>
<th>Course Name</th>
<th>Program Level</th>
<th>Tution Fee</th>
<th>Ielts</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#{
foreach (var institute in Model.Institutes)
{
<tr>
<td>
#Html.DisplayFor(m => institute.InstituteName)
</td>
<td>
#Html.DisplayFor(m => institute.Province.Name)
</td>
#foreach (var discipline in institute.Disciplines)
{
foreach (var course in discipline.Courses)
{
<td>
#Html.DisplayFor(m => course.CourseName)
</td>
<td>
#Html.DisplayFor(m => course.ProgramLevel.Name)
</td>
<td>
#Html.DisplayFor(m => course.TutionFeePerYear)
</td>
<td>
#Html.DisplayFor(m => course.IeltsMinRequirement)
</td>
}
}
<td>
<a href="#Url.Action("EditInstitute", "Institute" , new { id = institute.Id }, null)" class="btn">
<i class="glyphicon glyphicon-edit"></i>
</a>
<i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/Admin/Institute/DeleteInstitute" method="post">
<div class="modal-header">
<h5 class="modal-title">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to delete this record?</p>
<input type="hidden" id="id" name="id" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes, Delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
#section scripts
{
<script>
$(document).ready(function () {
$('#instituteTable').DataTable()
});
$(function () {
$("#mydialog").dialog({
modal: true,
width: "800px",
autoOpen: false
});
});
function ConfirmDelete(id) {
$("#id").val(id);
$('.modal').modal('show');
}
</script>
}
This is my partial view
#model SmartAdmission.Web.Areas.Admin.Models.AdvanceSearchModel
<div id="advancedSearchModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/Admin/Institute/GetCustomInstitute" method="post">
<div class="modal-header">
<h5 class="modal-title">Advance Search</h5>
#*<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>*#
</div>
<div class="modal-body">
#Html.TextBoxFor(m=>m.InstituteName)
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes, Delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
i have tried ajax call on button click and refer the url to the action which return a partial view but that didn't work for me.
I have a page ("mypage.cshtml") and two partial view page ( partial1.cshtml, partial2.cshtml )
when Im in mypage click a button and display a modal which call partial1 with #Html.Partial("patial1") in a modal(bootstrap modal). it consist of html. when I a click a button on this modal it calls another modal consist of partial2..
Here is the issue; When I load the page begining (in mypage ) I need to get the value of checkbox that standing in second modal, that is partial2.
During I view this modal I can get this value with this:
$("input[type='checkbox'][id='4']").val();
it gives me the value which I expect but at the begining(in mypage.cshtml) this returns "undefined" :S
I couldnt understand this stuation both of these modal located in mypage but why I cant get these elements values untill I reach them ?
here is view mypage:
<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<form id="formKaydet" method="post" action="../KurulusBilgileri/KurulusBilgileriniGuncelle">
<div class="row">
<div class="col-md-12">
#Html.Partial("KurulusBilgileriniGuncelle", Model)
</div>
<div class="modal-footer">
<input type="hidden" name="SANAYI_TIPI" id="input_id" />
<input type="hidden" name="SANAYI_TIPI_DIGER" id="input_sanayitipi" />
<button type="button" data-dismiss="modal" class="btn default">Geri</button>
<a class="btn orange" onclick="sanayitipleriKaydet()">Kaydet A</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="stack2" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
#Html.Partial("SanayiTipiSecim", Model.SanayitipiModel)
</div>
</div>
</div>
<div class="modal-footer">
#*<button type="button" data-dismiss="modal" class="btn">Close</button>
<button type="button" class="btn yellow">Ok</button>*#
</div>
</div>
</div>
</div>
and my second modal (SanayiTipiSecim)
<table class="table-full-width">
<thead>
<tr>
<th></th>
<th><strong>Sanayici Tipi</strong></th>
<th><strong>Açıklama</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(1)" id="1" value="Boya Sanayi">
</td>
<td>
Boya Sanayi
</td>
<td>
Boya üretimi yapan imalathaneler
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(2)" id="2" value="Enerji üretimi ve dağıtımı">
</td>
<td>
Enerji üretimi ve dağıtımı
</td>
<td>
Ör. Enerji üretim merkezleri, enerji ara istasyonları vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="3" onclick="javascript:sanayitipiTotextarea(3)" value="Elektrik ve Elektronik Mühendisliği">
</td>
<td>
Elektrik ve Elektronik Mühendisliği
</td>
<td>
Elektronik parçaların üretimi vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="4" onclick="javascript:sanayitipiTotextarea(4)" value="Genel Mühendislik, imalat ve montaj">
</td>
<td>
Genel Mühendislik, imalat ve montaj
</td>
<td>
Herhangi bir mühendislik aktivitesi, üretim veya montaj vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="5" onclick="javascript:sanayitipiTotextarea(5)" value="Gıda ve içecek">
</td>
<td>
Gıda ve içecek
</td>
<td>
Gıda, alkollü içki vb?
</td>
script blocks in first page:
<script src="~/Scripts/js/kurulusbilgileri.js"></script>
<script>
sanayitipleriKaydet = function () {
debugger
var data = new Object()
data.ISIM = $("input[name='ISIM']").val();
data.ADRES_METIN = $("input[name='ADRES_METIN']").val();
data.TELEFON = $("input[name='TELEFON']").val();
data.FAKS = $("input[name='FAKS']").val();
data.E_POSTA = $("input[name='E_POSTA']").val();
data.SORUMLU_ISIM = $("input[name='SORUMLU_ISIM']").val();
data.SORUMLU_SOYISIM = $("input[name='SORUMLU_SOYISIM']").val();
data.FAALIYET_ALANI = $("input[name='FAALIYET_ALANI']").val();
data.CEVRE_BILGI = $("input[name='CEVRE_BILGI']").val();
data.BELEDIYE_MUCAVIR_ALAN = $("input[name='BELEDIYE_MUCAVIR_ALAN']:checked").val();
debugger
data.OSB_YERLESIK = $("input[name='OSB_YERLESIK']:checked").val();
data.KIYI_TESISI = $("input[name='KIYI_TESISI']:checked").val();
data.VERSIYON = $("input[name='VERSIYON']:checked").val();
data.SANAYI_TIPI = window.localStorage.getItem("sanayitipiid");
window.localStorage.removeItem("sanayitipiid");
debugger
var jsondata = JSON.stringify(data);
$.ajax({
type: "POST",
contentType: 'application/json',
url: "/KurulusBilgileri/KurulusBilgileriniGuncelle",
data: jsondata,
success: function (result) {
debugger
var jsondata = JSON.parse(result)
if (jsondata.Passed) {
debugger
$('#tdISIM').empty();
$('#tdISIM').append(data.ISIM);
$('#tdADRES_METIN').empty();
$('#tdADRES_METIN').append(jsondata.data.ADRES_METIN);
$('#tdTELEFON').empty();
$('#tdTELEFON').append(jsondata.data.TELEFON);
$('#tdFAKS').empty();
$('#tdFAKS').append(jsondata.data.FAKS);
$('#tdE_POSTA').empty();
$('#tdE_POSTA').append(jsondata.data.E_POSTA);
$('#tdSORUMLU_ISIM').empty();
$('#tdSORUMLU_ISIM').append(jsondata.data.SORUMLU_ISIM);
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').empty();
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').append(jsondata.data.SANAYI_TIPI);//sanayitipi id si...
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').empty();
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').append(jsondata.data.FAALIYET_ALANI);
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').empty();
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').append(jsondata.data.CEVRE_BILGI);
debugger
if (jsondata.data.BELEDIYE_MUCAVIR_ALAN == "1") {
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked', true);
}
else
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked',false);
if (jsondata.data.OSB_YERLESIK == "1") {
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked', true);
}
else
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked',false);
if (jsondata.data.KIYI_TESISI == "1") {
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked', true);
}
else
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked',false);
if (jsondata.data.VERSIYON == "1") {
$("#tdVERSIYON > input[name='radioVersion']").prop('checked', true);
}
else
$("#tdVERSIYON > input[name='radioVersion']").prop('checked',false);
}
},
error: function () {
alert("ajax process in error");
}
});
}
</script>
kurulusbilgileri.js:
$(function () {
$("#btnSanayiTipiKaydet").on('click', sanayitipleriKaydet)
});
sanayiTipiTextGetir = function (id)
{
var text = $('input[id=' + id + ']').val();
debugger;
return text;
}
sanayitipilistesinigoster = function () {
$("#stack2").show();
}
sanayitipiTotextarea = function (id) {
$("#divSanayiTipi").show(600, null);
var sanayitipi = $("#" + id).val();
window.localStorage.setItem("sanayitipiid", id);
$("#input_sanayitipi").val(sanayitipi);
$("#input_id").val(id);
$("#stack2").modal('toggle');
}
Since you load your partial trough a modal, I'm assuming that the actual loading is done using AJAX. This means that when you first load your HTML page (the initial one), the partial is not yet part of the DOM (might have not been requested from the server). This in turn means that you checkbox is also not part of the DOM, and therefore is returned as undefined.
I have jQuery UI Tabs page:
<div class="addTheatreContainer">
<div class="addTheatreHeader">
<span class="txtLightboxTitle">ADD THEATRE</span>
</div><!--end/ .addTheatreHeader-->
<!-- Tabs -->
<div id="tabs">
<ul>
<li>
1 B.C.
</li>
<li>
2 Alberta
</li>
</ul>
<div id="#tabs-1">
<table class="table5">
<tr>
<td width="20">
<fieldset class="checkboxes">
<label class="label_check">
<input name="ctl10" type="checkbox" />
</label>
</fieldset>
</td>
<td width="40">ID</td>
<td width="120">Location</td>
<td width="120">Region</td>
<td width="120">City</td>
<td width="70">Province</td>
</tr>
</table>
</div>
<div id="#tabs-2">
<table class="table5">
<tr>
<td width="20"><fieldset class="checkboxes"><label class="label_check"><input name="ctl22" type="checkbox" /></label></fieldset></td>
<td width="40">ID</td>
<td width="120">Location</td>
<td width="120">Region</td>
<td width="120">City</td>
<td width="70">Province</td>
</tr>
</table>
</div>
</div><!--end/ #tabs-->
<div class="ButtonAlignRight">
<button id="btnAddAndCloseTheatre" runat="server" class="btnAddandCloseTheatre" >Add & Close</button>
<button id="btnAddTheatre" runat="server" class="btnAddTheatre" onclick="AddLocations()">Add</button>
<button id="btnClose" runat="server" class="btnClose">Close</button>
</div>
</div>
When I click the Add button. The whole page refreshes and I dont want it to since I am storing values in a global variable.
JS:
function AddLocations()
{
var allChecboxes = $("#tabs").tabs("options", "active").find(".checkboxes");
var allCheckedLocations = allChecboxes.find(".cbLocation").each(function () {
var checkbox = $(this);
if (checkbox.prop("checked") == true)
{
var checkboxId = checkbox.attr("id");
var locationId = parseInt(checkboxId.replace("cbLocation_", ""));
if (typeof (locationId) == "number" && isNaN(locationId) == false) {
AddedLocationsList.push(locationId);
}
//checkbox.parents(".row").fadeOut();
}
});
}
AddedLocationsList is a global variable.This function works perfectly but since the page is refreshed the variable is set back to []. I don't know why the page is being refreshed. Is there a jQuery UI callback?