We Keep Coding

Confirm user from a remote api url in AngularJS?

so, I have this bug in my code, that I can't quite figure it out. So, my app needs to do is to click on the confirm button to remove that user from its list within the remote api url. So, when I click on confirm button, it removes the user from console.log but it does not update the view. So, please check out my code and I will be thankful for your help.
if you are visiting my plunker, please write comments here, so I can know where was the bug fixed. Thanks for your time.
Here is a full plunker: https://plnkr.co/edit/nWFi81KannLcQfratr0t
PS: in the plunker, there is a UI-Bootstrap that it need it to work with it, but plunker did not run with it so, I have comment UI-Bootstrap.
Here is some code
$scope.confirmedAction = function(person) {
var index = $scope.userInfo.lawyers.map(function(e) {
return e.id;
}).indexOf(person.id);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
// console.log($scope.userInfo);
$window.location.href = '#/lawyer';
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
//console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});

The user isn't removed because you are removing it form client side but you didn't update the sever with the changes so after the delete the the page is reloading the data again from the server which will be the full array.
You should send this removed user back to server
Notice: the UI-Bootstrap you removed prevent the modal from injecting, but i can see the value throw the console.log

This is a full sample acutlly i used bootstrap framework in the view to handle the confirm dialog.
When user click on a item we should select it as target in this sample
our target detect by $scope.selectUser() function, after that and
when delete is confirmed we use splice the target from our array
by detect the index of the target
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", function($scope) {
$scope.users = [{
name: "John"
},
{
name: "Mike"
}
];
$scope.selectUser = function(user) {
$scope.userIs = user;
}
$scope.deleteConfirmed = function() {
$scope.users.splice($scope.users.indexOf($scope.userIs), 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div ng-app="app" ng-controller="ctrl">
<br />
<div class="col-lg-4 col-lg-offset-4">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in users">
{{user.name}}
<a data-toggle="modal" data-target="#myModal" class="text-danger pull-right" ng-click="selectUser(user)">Delete</a>
</li>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete...</h4>
</div>
<div class="modal-body">
Are you sure want delete user "{{userIs.name}}"?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="deleteConfirmed()" data-dismiss="modal">do it</button>
</div>
</div>
</div>
</div>
</div>

How to get the id and name of an object on button click and display them in a modal in asp.net view

I have a strongly typed view in which I am looping over some objects from a database and dispaying them in a jumbobox with two buttons in it. When I click one of the buttons I have a modal popping up. I'd like to have somewhere in this modal the name and the id of the corresponding object, but I do not really know how to do this. I am a bit confused where to use c# and where javascript. I am a novice in this, obviously.
Can someone help?
This is the code I have so far. I don't have anything in relation to my question, except the code for the modal :
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" 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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>

I think your confusing the server side rendering of Razor and the client side rendering of the Modal. The modal cannot access your Model properties as these are rendered server side before providing the page to the user. This is why in your code <h4 class="modal-title">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4> this does not work.
What you want to do is capture the event client side in the browser. Bootstrap allows you to achieve this by allowing you to hook into events of the Modal. What you want to do is hook into the "show" event and in that event capture the data you want from your page and supply that to the Modal. In the "show" event, you have access to the relatedTarget - which is the button that called the modal.
I would go one step further and make things easier by adding what data you need to the button itself as data-xxxx attributes or to DOM elements that can be easily access via JQuery. I have created a sample for you based on what you have shown to give you an idea of how it can be achieved.
Bootply Sample
And if needed... How to specify data attributes in razor

First of all
you will need to remove the data-toggle="modal" and data-target="#myModal" from the button, as we will call it manually from JS and add a class to reference this button later, your final button will be this:
<button type="button" class="btn btn-default btn-lg modal-opener">Had role in the past</button>
Then
In your jumbotron loop, we need to catch the values you want to show later on your modal, we don't want to show it, so we go with hidden inputs:
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
For each information you want to show, you create an input referencing the current loop values.
Now you finally show the modal
Your document.ready function will have this new function:
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
It simply grab those values we placed in hidden inputs.
Your final code
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" 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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>

Knockout Component View Not Updating When Its ViewModel Observable Changes

I have a component setup to use AMD to get the html template and viewmodel code. Everything works fine. The component loads when it is supposed to and behaves fine with the params passed to it. The problem is I defined an observable in the viewModel whose value shows up in the template view, but when the observable's value changes the text on the view does NOT change. Can anyone explain what is going on here? The text I am trying to bind to is modalTitle. When the modal loads its title is 'TEMP' but if I go to the console and type 'window.modalTitle()' I get 'CREATE REPORT SCHEDULE'. It's like the view is getting the first value of the observable and then ignoring it after that. Is there anyway I can force it to look for updates?
ViewModel: (schedules.component.js)
define(['knockout'], function (ko) {
console.log('schedules hit');
loadCss('schedules');
function SchedulesViewModel(params) {
this.scheduledItems = params.scheduledItems;
this.itemName = params.itemName;
this.modalTitle = ko.observable("TEMP");
window.modalTitle = this.modalTitle;
}
SchedulesViewModel.prototype.initiateAddScheduledItem = function () {
this.modalTitle("CREATE " + this.itemName + " SCHEDULE");
$('#schedulesModal').modal('show');
};
SchedulesViewModel.prototype.removeSelectedScheduledItem = function () {
this.chosenValue('dislike');
};
window.ReportsApp.SchedulesViewModel = SchedulesViewModel;
return SchedulesViewModel;
});
View Template
<div id="schedulesModal" class="modal fade lcmsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
<img src="/Content/images/modalASLogo.png" style="float: right;" />
<h4 class="modal-title" data-bind="text: modalTitle()">Test Title</h4>
</div>
<div class="modal-body">
<p>One fine body ...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
<button type="button" class="btn btn-primary">SAVE</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /Bootstrap Modal -->

It does not get changed because this.itemName has not been defined as an observable. it is better to define a computed observable which will automatically update whenever any observables change.
Instead of using prototype to add methods, you can use knockout function which foes it for you.
Example :https://jsfiddle.net/kyr6w2x3/34/
function SchedulesViewModel(params) {
var self = this ;
self.scheduledItems = ko.observable(params.scheduledItems);
self.itemName = ko.observable(params.itemName);
self.modalTitle = ko.observable("TEMP");
self.chosenValue= ko.observable();
self.modalTitle = ko.computed(function() {
return "CREATE " + self.itemName() + " SCHEDULE" ;
}, self);
// you can change below to show your modal whenever you want
$('#schedulesModal').modal('show');
self.removeSelectedScheduledItem = function (){
self.chosenValue('dislike');
}
}
ko.applyBindings(new SchedulesViewModel({scheduledItems:"scheduledItems" ,itemName : "itemName" }));
Update : yes you can have multiple view models or better to say nested view models. Look at the new example and see how you can communicate between your models.https://jsfiddle.net/kyr6w2x3/35/

Unable to pass AngularJS variable to div modal in Bootstrap

I'm trying to build an image gallery where any image when clicked, opens up in an expanded modal box (Bootstrap 3). I've created the div that handles the thumbnail view and the modal dialogue as a template wherein the values are filled using a custom script written in AngularJS.
The problem is, I'm unable to pass the values into the modal dialogue. The thumbnail part of the code works fine but upon clicking the individual images, the values aren't read from the script. This is the HTML code I'm working with:
<div class="isotope-container row grid-space-20">
<div class="col-sm-6 col-md-3 isotope-item int-design" ng-repeat="photopost in postCntrl.posts">
<div class="image-box">
<div class="overlay-container">
<img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
<a class="overlay" data-toggle="modal" data-target="#project-1">
<i class="fa fa-search-plus"></i>
<span>{{photopost.photoCategory}}</span>
</a>
</div>
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
</div>
<!-- Modal -->
<div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="project-1-label">{{photopost.photoCaption}}</h4>
</div>
<div class="modal-body">
<img ng-src="{{photopost.photoSrc}}"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</div>
</div>
This is the script written using Angular:
(function(){
var postGeneratorApp = angular.module('PhotoPostGenerator', []);
postGeneratorApp.controller('PhotoPostController', function() {
this.posts = photoposts;
this.numOfPosts = 20;
});
var photoposts =
[
{
photoCaption: "This is an image",
photoSubTitle: "Tree",
photoTimestamp: 'Aug 23, 2015',
photoCategory: "landscape",
photoSrc: "../images/gallery/img1.jpg",
photoThumbnailSrc: "../images/gallery/img1_th.jpg",
},
{
photoCaption: "This is also an image",
photoSubTitle: "Bird",
photoTimestamp: 'Sep 23, 2015',
photoCategory: "bird",
photoSrc: "../images/gallery/img2.jpg",
photoThumbnailSrc: "../images/gallery/img2_th.jpg",
},
{...} //more entries such as these
];
})();
This is what the gallery thumbnails look like (please ignore the captions on the thumbnails, they are from an earlier snapshot):
And this is what the modal dialogue looks like, when clicked:
As you can see the caption and the expanded image are missing (photoCaption and photoSrc). When looking for answers I came across AngularUI for Bootstrap but wasn't sure how to use this or if there was a simpler fix available for my current code.

EDIT 1
Look this: http://jsfiddle.net/mamor/4KBWj/embedded/
In the controller main, when opener the modal use the parameter 'resolve' for pass values between conttroler main and modal. In the modal use the name parameter passed in modalInstance when open.
myApp.controller('MainController', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalInstanceCtrl',
resolve: {
params: function () {
return {
key: 'value',
key2: 'value2'
};
}
}
});
modalInstance.result.then(
function (result) {
console.log('called $modalInstance.close()');
alert(result);
},
function (result) {
console.log('called $modalInstance.dismiss()');
alert(result);
}
);
};
});
Now uses de params in modal controller for obtains values of main controller.
myApp.controller('ModalController', ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
console.log(params); /* This params of MainController */
$scope.ok = function () {
$modalInstance.close('this is result for close');
};
$scope.cancel = function () {
$modalInstance.dismiss('this is result for dismiss');
};
}]);
EDIT 2
Add in the element call this: "ng-click='clickedElement = photopost'"
<div class="image-box">
<div class="overlay-container">
<img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
<a class="overlay" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">
<i class="fa fa-search-plus"></i>
<span>{{photopost.photoCategory}}</span>
</a>
</div>
<a class="btn btn-default btn-block" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
</div>
After, in the modal acess metada of target use 'clickedElement' for acess the data.
<div class="modal-header">
{{clickedElement}}
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="project-1-label">{{clickedElement.photoCaption}}</h4>
</div>

PHP jQuery load data into bootstrap modal box

I need to load dynamic data into bootstrap modal box.
JS:
$(function() {
$('.push').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: '../controller/booksdetails.php', // in here you should put your query
data: 'cmid=' + id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function(r) {
// now you can show output in your modal
$('#cm').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
PHP file :
if(isset($_POST['cmid'])){
$DB = mysqli::f("SELECT * FROM " . BOOKS . " WHERE id = ?",filter_var($_POST['cmid'], FILTER_VALIDATE_INT));
print_r($DB);
}
and print data into modalbox div with class="something". this method true worked and print all php array result.
now I need to work with php array aftar load data into modalbox(work with php class, secure data, ....). I mean is: load php data into modalbox (ie : json) not print result into modalbox.
how do can I generate this?

Hi man here an example: http://jsfiddle.net/leojavier/kwh2n00v/1/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="insert">
insert data
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS
$('#insert').on('click', function (){
// This should be on your AJAX Success
var data="some dynamic data";
$('.modal-body').html(data);
$('#myModal').modal('show');
//--------------------------------------
})
I hope this helps...
http://jsfiddle.net/leojavier/kwh2n00v/1/