I've created a directive with that contains a button and it's modal. Because it's used twice on the same page I've had to set some additional attributes that are passed to the template so I can set unique IDs. However when I click the button to display the modal, it only changes the div to use backdrop. It doesn't show the modal.
Directive
<div class="col-md-4">
<qas-modal-find-postcode address="record.Address" town="record.Town" county='record.County' post-code="record.Postcode" div="#contactDetailsPostcode" id="contactDetailsPostcode"></qas-modal-find-postcode>
</div>
Yu can see that I am passing a string with a # and one without, I am going to use these scope variables in the HTML of the directive.
myAppModule.directive('qasModalFindPostcode', ['genericService', 'commonUtilities',
function (genericService, commonUtilities) {
return {
templateUrl: 'Scripts/app/shared/qas/tmplModalQasPostcode.html',
scope: {
postCode: '=',
address: '=',
town: '=',
county: '=',
id: '#',
div: '#',
},
controller: [
'$scope', function ($scope) {
$scope.doSearch = function () {
genericService.doQueryByObj("qas", "postcode", null, null, { Address: $scope.address, Town: $scope.town, County: $scope.county }).then(function (data) {
$scope.addresses = data;
if ($scope.addresses == 0 || $scope.addresses == undefined) {
commonUtilities.addAlert('No Postcodes Found', 'info');
}
});
}
$scope.selectPostcode = function (postcode) {
$scope.postCode = postcode;
}
}
]
}
}]);
})();
HTML
<div tooltip="Find Postcode Requires Address, Town & Country">{{id}}{{div}}
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="{{div}}" ng-disabled="
address == undefined || address.length == 0 ||
county == undefined || county.length == 0 ||
town == undefined || town.length == 0" />
<div class="modal fade" id="{{id}}" 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>
<h4 class="modal-title" id="myModalLabel">Postcodes for {{address}} <span class="glyphicons glyphicons-home"></span></h4>
</div>
<div class="modal-body">
<ul ng-repeat="item in addresses">
<li class="btn-link list-unstyled">
{{item.Address}}, {{item.Town}}, {{item.Postcode}}
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>
</div>
</div>
</div>
</div>
I want to set in my button data target = "#string" then in my modal it has "string" without the hash.
However it doesn't work and I don't understand why.
If Id is static , then it should be written as 'Id'
HTML
<div class="modal fade" id="id" tabindex="-1" role="dialog">
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#id" ng-disabled="/>
If Id is dynamic , as id={{id}}
HTML
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#{{id}}" ng-disabled="/>
although , id is always static .
HTML
data target = "#id" as modal div has id ={{id}}
Related
I have a component where I'm handling all the errors / error message. I debug it and successfully passed the error string in variable, but I can't display in template
Here is my code
export class ErrorHandlerComponent {
get ComponentName() {
return "error-handler";
}
constructor() {
this.errorMessage = ko.observable();
if (!ko.components.isRegistered(this.ComponentName)) {
ko.components.register(this.ComponentName, {
viewModel: ErrorHandlerComponent,
template:
`
<div class="modal fade" id="modalError" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop='static' data-keyboard='false'>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-exclamation-circle"></i> Error occurred</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body" data-bind="text: errorMessage">
</div>
<div class="modal-footer modal-btn">
<button type="button" class="btn btn-warning btn-lg" data-bind="click: ClickRefreshPage">Refresh</button>
</div>
</div>
</div>
</div>
`
});
}
}
Show(msg) {
this.errorMessage(msg);
$('#modalError').modal('show');
}
Close() {
$('#modalError').modal('hide');
$(".modal-backdrop").remove();
$("body").css({ 'padding-right': '0px' });
}
ClickRefreshPage() {
alert('refreshing...');
}
}
when I call Show function, the parameter is passed and this.errorMessage() had a value, but in text: errorMessage I can't display it.
john is right though, this refers to the ErrorHandlerComponent at the time of components.register and that is obviously always empty.
What I'm missing is an observable parameter passed through from the parent via the components' param property. if you put that in your constructor, ko will link everything through and passing a validationmessage to the component will be displayed.
https://jsfiddle.net/ezw9q02x/1/
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>
My code only show first row in my modal. I don't know how to show in modal all rows:
PHP:
$sql2="SELECT nombre, dias, COUNT(dias) as count FROM usuarios WHERE usuarios.id = '$id_user';
if ($stmt2 = $mysqli->query($sql2)){
$array = mysqli_fetch_array($stmt2, MYSQLI_ASSOC);
echo '<a data-toggle="modal" data-target="#exampleModal" data-whatever="'.$array["nombre"].'" data-dia="'.$array["dias"].'" href="#">'.$array["count"].'</a>';
}
HTML & Javascript
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">;
<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="exampleModalLabel">New message</h4>;
</div>;
<div class="modal-body">;
<form class="form-inline">;
<div class="form-group">;
<input type="text" class="form-control" id="recipient-name">;
</div>;
<div class="pull-right">;
<button type="button" class="btn btn-danger">Eliminar</button>;
</div>;
</form>;
</div>;
<div class="modal-footer">;
<button type="button" class="btn btn-active" data-dismiss="modal">Tancar</button>;
</div>;
</div>;
</div>;
</div>;
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
var dia = button.data('dia')
var modal = $(this)
modal.find('.modal-title').text('Dies personals: ' + recipient)
modal.find('.modal-body input').val(dia)
})
</script>
This code work, but only show in modal 1 DATE, and i want to show all DATES from a USER
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/
I am using bootstrap to invoke a simple modal form which contains only a textarea field and couple of buttons. I am setting some custom text (variable length) in the textarea while invoking the modal form. What I want is to focus on the textarea field after the custom text so the user can start typing after that. I have mentioned my implemenation of this below. Can anyone tell how to achieve this?
Here is the Fiddle: http://jsfiddle.net/jLymtdg8/
A bit explanation here as well -
Here is my modal (all bootstrap stuff)-
<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
And here is how it gets invoked -
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
This is how I am prefilling the textarea and setting focus, but this is only setting cursor on first line rather than after screen_name -
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
Sam you can try the following javascript code:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
Let me explain why i have used this code. From the js fiddle link that you have provided what i understand is you are using the bootstrap 2 version, but the code that you are using
$("#msg").on('shown.bs.modal', function(){
...
}
was introduced only in bootstrap 3. so I have changed it to
$("#msg").on('shown', function(){
...
}
and the line
$("#Message").focus().val(new_message + " ");
is used so that you can set the focus after the custom text.I hope this will resolve your issue.
You can take reference of this link : http://jsfiddle.net/3kgbG/433/
It is working for me.
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.on('')
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
//alert('confirmed');
} else {
//alert('canceled');
}
});
});
$('#confirm').on('shown', function () {
$('#txtDemo').val($('#txtDemo').val());
$('#txtDemo').focus();
// do something…
})
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top{
overflow-y: visible;
}
}
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
<input id="txtDemo" type="text" value="Jayesh" class="form-control"/>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>