I'm trying to remove my entry to my table but when I press the remove button nothing happends, I know it goes into the remove method as it hits my Alert I did set there.
This is my Script to open a dialog:
function OpenDialog2(id, projectId, startDate, endDate, pct) {
ClearDialog();
$('#projectList').val(projectId);
$('#startDate').val(startDate);
$('#endDate').val(endDate);
$('#pct').val(pct);
$('#sId').text(id);
$('#dialog').dialog('open');
}
This is my method trying to remove it:
'Ta bort': function () {
alert("Ta bort");
var sid = $('#sId').text();
if (sid !== "") {
locstring = "#Url.Action("Index")/Delete/" + sid;
$.ajax({
type: "GET",
url: locstring,
dataType: "html",
success: function (data) {
$('#dialog').dialog('close');
reloadTable();
}
});
}
This is my Partial View:
#foreach (var project in ViewData["times"] as List<ConsultantProjectTime>)
{
<tr>
<td>
<a href="javascript:OpenDialog2('#project.ID','#project.FK_ProjectID','#project.StartDate.ToShortDateString()','#project.EndDate.ToShortDateString()','#project.Pct');">
#project.Project.ProjectName
</a>
</td>
<td>#(project.StartDate.ToShortDateString() + " - " + project.EndDate.ToShortDateString())</td>
<td>#(project.Pct)%</td>
<td>
#if (project.Project.StartDate.HasValue && project.Project.EndDate.HasValue)
{
#(project.Project.StartDate.Value.ToShortDateString() + " - " + project.Project.EndDate.Value.ToShortDateString())
}
</td>
</tr>
}
Related
I have a MVC web app, in one section i manage the permission for users (such as decide which information the user can see/edit/add/delete ecc...).
For prevent some errors, if the checkbox in the column Admin is checked the others in the row will be disabled, because the group Admin can do everything, same thing with the Manager column, but in this case only the checkboxes on his right will be disabled.
Afeter many researches, i didn't find anything which can be useful for my case
This is my View code:
<body>
<div class="limiter">
<br />
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<table id="tablePermission">
#{
CEG_dev_labelsEntities db = new
CEG_dev_labelsEntities();
int countY = 1;
//get all groups
var groups = from g in db.Groups
orderby g.group_name
select new
{
g.group_name,
g.group_description
};
<thead>
<tr class="table100-head">
<th class="column1">Username</th>
#foreach (var item in groups)
{
<td><button>#item.group_name</button</td>
}
</tr>
</thead>
foreach (var item in db.Users)
{
<tbody id="myTable">
#{
//get all user's group
var group_list = from g in db.Groups
join ug in
db.UserGroups on g.id_group equals ug.id_group
join u in db.Users on
ug.id_user equals u.id_user
where u.username ==
item.username
select new
{
g.group_name
};
//save the single values in a list
//so all information are more accesible
List<string> group_user_list = new
List<string>();
foreach (var item_ug in group_list)
{
group_user_list.Add(item_ug.group_name);
}
<tr style="cursor:default">
<tdclass="column1">
#Html.DisplayFor(model =item.username)
</td>
#foreach (var itemG in groups)
{
//check the corresponding
//checkbox if user is a member
//of a specific group
if(group_user_list.Contains(itemG.group_name))
{
<td style="padding-left:80px"><input
type="checkbox" checked="checked"
class="chkclass" username="#item.username"
groupname="#itemG.group_name" id="#countY" /></td>
}
else
{
<td><input type="checkbox" class="chkclass"
username="#item.username"
groupname="#itemG.group_name"
id="#countY" />
</td>
}
countY++;
}
</tr>
}
</tbody>
}
}
</table>
</div>
</div>
</div>
</div>
</body>
This is the table:
Any suggestion is appreciate.
Leo.
EDIT
I have this click event on checkboxes for managing user's permissions
$(document).ready(function () {
$('.chkclass').click(function () {
var getchkid = $(this).attr('id');
var isChecked = $('#' + getchkid).is(':checked');
if ($('#' + getchkid).is(':checked') == true) {
// to be send to your call
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
//here put your call ajax to your action
$.ajax({
type: 'Post',
url: '/UserGroups/AddPermission',
dataType: 'json',
data: {
'usr': username,
'grp': groupname
},
success: function (result) {
$('#' + getchkid).prop('checked', true);
},
error: function (jqxhr, status, exception) {
alert('Exception:', exception);
}
})
}
else {
if ($('#' + getchkid).is(':checked') == false) {
// to be send to your call
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
//here put your call ajax to your action
$.ajax({
type: 'Post',
url: '/UserGroups/DeletePermission',
dataType: 'json',
data: {
'usr': username,
'grp': groupname
},
success: function (result) {
if (result.error == true) {
alert('Error, must be there at least one
admin');
$('#' + getchkid).prop('checked', true);
}
else {
$('#' + getchkid).prop('checked', false);
}
},
error: function (jqxhr, status, exception) {
alert('Exception:', exception);
}
})
}
}
});
});
Since you're doing a loop where everything is the same, you could do something like this:
https://jsfiddle.net/z2mf8314/1/
$('.chkclass').click(function () {
var getchkid = $(this).attr('id');
var isChecked = $('#' + getchkid).is(':checked');
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
(getchkid == "1" && isChecked) ? $(this).closest('tr').find('input').not('#1').prop({'disabled': true, 'checked': false }) : $(this).closest('tr').find('input').prop('disabled', false);
if (isChecked) {
// to be send to your call
//here put your call ajax to your action
}
else {
// to be send to your call
//here put your call ajax to your action
}
});
I am currently trying to use .html() to display out the resident id, name and telephone number. However, there is nothing appearing on my page. When I check my console for any errors, there were none. There is no error with the php and residentid is in the localstorage.
html
<div role="main" class="ui-content" id="main-ui">
<div id="txtresidentid"></div>
<div id="txtresident_name"></div>
<div id="txtresident_telephone_home"></div>
</div>
javascript
(function () {
var residentid;
var resident_name;
var resident_telephone_home;
$(document).ready(function () {
getProfile();
});
function getProfile() {
var url = serverURL() + "/getresidentprofile.php";
var JSONObject = {
"residentid": localStorage.getItem("residentid")
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_getProfileResult(arr);
},
error: function () {
validationMsg();
}
});
}
function _getProfileResult(arr) {
residentid = arr[0].residentid;
resident_name = arr[0].resident_name;
resident_telephone_home = arr[0].resident_telephone_home;
$("#txtresidentid").html("Residentid : " + residentid);
$("#txtresident_name").html("Name: " + resident_name);
$("#txtresident_telephone_home").html("Telephone(Home): " + resident_telephone_home);
}
})();
Try this:
$("#txtresidentid").append("Residentid : " + residentid);
$("#txtresident_name").append("Name: " + resident_name);
$("#txtresident_telephone_home").append("Telephone(Home): " + resident_telephone_home);
I have partial view that loading data from database table. I need from a partial view to transfer data to a function that is located on the layout and calling it. However, I heard that render sections do not work in asp.net core in the partial representations. But I really need to call function from layout.
The general logic is this. The partial view is loaded, the field of which the user selects the line, presses the delete button. The delete button sends data to the controller, the controller deletes the entry and returns the json object. Then the code is called from the layout.
My code, layout footer:
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/respond.min.js"></script>
<script src="~/js/bootstrap-combobox.js"></script>
<script>
$(document).ready(function () {
function AjaxLoad(data) {
console.log(data);
console.log('*********');
if (data.action == "error") {
alert(data.message);
return;
}
else if (data.action == "load") {
CurrentTable = data.table
}
if (data.page != null || data.page != undefined) {
PageIndex = data.page;
}
$.ajax({
url: "/Admin/ListView",
type: "POST",
data: {
Table: CurrentTable,
Page: PageIndex
},
dataType: "html",
beforeSend: function () {
$('#PartialViewId').html("<p>" + "#NanoWiki.Resources.Translations.Loading" + " \"" + LangCurrentTable + "\"...</p>");
},
success: function (data) {
$("#TableId").html("<p>" + LangCurrentTable + "</p>");
$("#PartialViewId").html(data);
},
error: function () {
$("#PartialViewId").html("#NanoWiki.Resources.Translations.Error" + ":" + LangCurrentTable);
}
});
$("#AddId").css("visibility","visible");
};
});
</script>
#if (IsSectionDefined("EtcScripts"))
{
#RenderSection("EtcScripts")
}
Delete button (link):
<a asp-action="Delete" asp-controller="Admin" asp-route-Id="#record.Id" asp-route-Table="#ViewBag.Table"
asp-route-Page="#ViewBag.Page" data-ajax="true" data-ajax-method="POST" data-ajax-failure="onFailed" data-ajax-success="AjaxLoad" data-ajax-update="#PartialViewId">
#NanoWiki.Resources.Translations.Delete
</a>
Contoller method:
[HttpPost]
public ActionResult Delete(string Table, int? Id, int? Page)
{
pageIndex = Page.HasValue ? Convert.ToInt32(Page) : 1;
if (!Id.HasValue)
{
obj = new { message = Resources.Translations.UpsErrorMessage, action = "error" };
return Json(obj);
}
var result = Connector.SQLQuery("DELETE FROM " + Table + " WHERE Id = " + Id);
if (result == false)
{
obj = new { message = Resources.Translations.UpsErrorMessage, action = "error" };
return Json(obj);
}
obj = new { table = Table, page = pageIndex, action = "load" };
return Json(obj);
}
How can I send data from AjaxLoad to the layout?
This is how my webpage looks like:
As can be seen in the picture I have I have search on the top right, in the bottom right I have the amount of pages etc..
But as I add another project here by clicking "Lägg till ny" and add a project for some reason my page will end up like this:
http://puu.sh/kKSZz/387c71f487.png
As can be seen the table "Breaks" the search field gets removed and so does the pages. Same things happens when I chose to edit or delete a project I've already added.
This is my view:
<div id="tabs-current">
<div id="ConsultantTimes">
#{
Html.RenderAction("ConsulantTimes");
}
</div>
<a href="javascript:OpenDialog()" class="btn btn-primary">
Lägg till ny
</a>
</div>
As can be seen the table is a partial view and here it is:
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th>Projekt</th>
<th>Mitt Datum</th>
<th>%</th>
<th>Projektdatum</th>
</tr>
</thead>
<tbody>
#foreach (var project in ViewData["times"] as List<ConsultantProjectTime>)
{
<tr>
<td>
<a href="javascript:OpenDialog2('#project.ID','#project.FK_ProjectID','#project.StartDate.ToShortDateString()','#project.EndDate.ToShortDateString()','#project.Pct');">
#project.Project.ProjectName
</a>
</td>
<td>#(project.StartDate.ToShortDateString() + " - " + project.EndDate.ToShortDateString())</td>
<td>#(project.Pct)%</td>
<td>
#if (project.Project.StartDate.HasValue && project.Project.EndDate.HasValue)
{
#(project.Project.StartDate.Value.ToShortDateString() + " - " + project.Project.EndDate.Value.ToShortDateString())
}
</td>
</tr>
}
</tbody>
And this is my script I run when I choose to add another project:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 220,
width: 305,
modal: true,
buttons: {
'Spara': function() {
if (!validate()) {
alert('Procent måste vara mellan 0-100');
return false;
}
locstring = "#(Url.Action("Index"))/Update/?";
locstring += '&projectId=' + $('#projectList').val();
locstring += '&startDate=' + $('#startDate').val();
locstring += '&endDate=' + $('#endDate').val();
locstring += '&pct=' + $('#pct').val();
var sid = $('#sId').text();
if (sid != "") {
locstring += '&id=' + sid;
//locstring = "/Delete/" + sid;
}
//window.location = locstring;
$.ajax({
type: "GET",
url: locstring,
dataType: "html",
success: function(data) {
//alert(locstring);
$('#dialog').dialog('close');
ReloadTable();
}
});
},
'Avbryt': function() {
$(this).dialog('close');
},
'Ta bort': function() {
var sid = $('#sId').text();
if (sid != "") {
locstring = "#(Url.Action("Index"))/Delete/" + sid;
//locstring += '&delete=true&id=' + sid;
$.ajax({
type: "GET",
url: locstring,
dataType: "html",
success: function(data) {
$('#dialog').dialog('close');
ReloadTable();
}
});
Note, when this happends I have no errors in my console.
Found the error but not sure how to solve it, it's my ReloadTable function:
function ReloadTable() {
if (navigator.appName == "Microsoft Internet Explorer") {
//alert('suck..');
window.location.reload();
} else {
$.ajax({
type: "GET",
url: '#(Url.Action("ConsulantTimes"))',
dataType: "html",
success: function(data) {
$('#dialog').dialog('close');
$('#ConsultantTimes').html(data);
}
});
}
}
What you are doing is replacing the entire contents of #ConsultantTimes and replacing it with the data variable. Use $( "sample_1" ).replaceWith(data); instead, or maybe prepend or append.
I have a textbox in my view page. when i click on imageIcon,it will take data from db and return in alert successfully. But, when i try to bind this response data to textbox, it is not binded correctly. My code in view page is as following :
#foreach (var dateitem in list)
{
<td id="HoursTxt">
#Html.TextAreaFor(modelitem => dateitem.Hours, new { id = string.Format("txtHours"), style = "width:50%;height:70%;" })
#Html.Hidden("CuDate", dateitem.Date)
<img src="~/Images/comment.png" class="prevtest" />
<div style="border:solid;display:none;">
<input type="text" id="TxtNotess" />
<input type="button" id="BtnComment" value="Save" />
</div>
</td>
}
In my onclick event of imageIcon jquery is following:
$('.prevtest').on('click', function () {
var Cudate = $(this).prev('#CuDate').val();
var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
var TskId =parseInt($(this).parents('tr').find('td').find('#testTaskId').val());
$.ajax({
type: "POST",
url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
success : function(data)
{
alert(data);
$('#TxtNotess').val(data);
alert('success');
},
error:function()
{
alert('Error');
}
});
$(this).next().toggle();
});
the text box with id TxtNotess not bind with response value
Can anyone help me to do this..
Thanks in advance..
First: ID of an element must be unique so use class for the textfield TxtNotess.
<input type="text" class="TxtNotess" />
Then, in the success handler find the textfild with class TxtNotess inside the next sibling of the clicked element
$('.prevtest').on('click', function () {
var Cudate = $(this).prev('#CuDate').val();
var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
var TskId = parseInt($(this).parents('tr').find('td').find('#testTaskId').val());
$.ajax({
type: "POST",
url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
context: this,//pass a custom context to the ajax handlers - here the clicked element reference
success: function (data) {
alert(data);
$(this).next().find('.TxtNotess').val(data);//find the target textfield
alert('success');
},
error: function () {
alert('Error');
}
});
$(this).next().toggle();
});
$('.prevtest').on('click', function () {
var Cudate = $(this).prev('#CuDate').val();
var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
var TskId = parseInt($(this).parents('tr').find('td').find('#testTaskId').val());
$.ajax({
type: "POST",
url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
context: this,//pass a custom context to the ajax handlers - here the clicked element reference
success: function (data) {
alert(data);
$('.TxtNotess').val(data);//find the target textfield
alert('success');
},
error: function () {
alert('Error');
}
});
$(this).next().toggle();
});
I gets resolved by using class name for textbox..