I have a scenario like this:
Display Ngb Bootstrap carousel and control the slide images by two buttons: Previous and Next.
When Previous button was clicked then show previous slide image and Next button was clicked then show next slide image.
Unfortunately, my code doesn't work. Someone can help me. Below are my code:
HTML code:
<div class="wrapper-md">
<div class="modal-header">
<h5 class="modal-title">TITLE HERE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel #carousel *ngIf="images" [showNavigationArrows]="false" [showNavigationIndicators]="false" [keyboard]="false">
<ng-template ngbSlide *ngFor="let image of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Guide image">
</div>
<div class="carousel-caption">
<h4>Slide {{i}}</h4>
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
<button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
<button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
</div>
</div>
TypeScript code:
images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/900/500`);
#ViewChild('carousel', {static: true}) carousel: NgbCarousel;
isPrevious: boolean = false;
isNext: boolean = false;
constructor(public modal: NgbActiveModal){
}
skip()
{
this.modal.close();
}
previousStep()
{
this.isPrevious = true;
this.carousel.prev();
}
nextStep()
{
this.isNext = true;
this.carousel.next();
}
Any idea in my case.
Thank in advance!
Remove [showNavigationArrows]="false" this attribute
explain---if youuse ngb-carousal this attribue is false then your next and pre event is not work by default it is true
and inside ngb-carouse you can use next and pre button
<div class="wrapper-md">
<div class="modal-header">
<h5 class="modal-title">TITLE HERE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel #carousel *ngIf="images" [showNavigationIndicators]="false" [keyboard]="false">
<ng-template ngbSlide *ngFor="let image of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Guide image">
</div>
<div class="carousel-caption">
<h4>Slide {{i}}</h4>
</div>
</ng-template>
<div class="row justify-content-center">
<button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
<button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
<button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
</div>
</div>
</ngb-carousel>`
</div>
Related
I want to make an approve and reject button in foreach loop.
Approve button use only item's ID. So I have no problem.
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
But in reject button, I have to take explanation from text area to send web service.
So I added a bootstrap modal;
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Rejet</button>
And this is my modal ;
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation .. </label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
I have to get value from explanation text area and add to url action in modal.
How can I get textarea value in url action ?
My view form is here ;
<form method="post">
<section class="section">
<div class="row">
<div class="col-lg-12">
#foreach (var item in Model)
{
<div class="card">
<div class="card-body">
<h5 class="card-title">#item.NameSurname - #item.Section</h5>
<h6 class="card-subtitle mb-2 text-muted">#item.StartDate / #item.EndDate</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Days gün #item.Hours saat</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Type #item.PriceState</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Expression</h6>
<p class="card-text">#item.CompExplain</p>
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Reject</button>
</div>
</div>
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation..</label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
}
</div>
</div>
</section>
</form>
First, you should post your question with "actual" code. if you are using jQuery you can use JS to pull the value from the textarea or any input by using its id:
<script>
$('#btnReject').click(function() {
$.ajax({
url: #Url.Action("Reject", "Home", {page="leave/st/reject/", id=#item.ID, actionName = "LeaveRequests"}) + '?exp=' + $("#explanation").val()
type: 'POST',
// ... other ajax options ...
});
});
</script>
otherwise you can use form element and use "submit" buttons to submit values to form action. You may have to adapt this code to your project.
<form method="get" action="#Url.Action("MyAction", "MyController")" >
#Html.Textbox("toPay")
<input type="submit" value="Pay"/>
</form>
I would suggest using JS to pull this off.
I have got the following code.
Here I need to pass the angular js variable, which is the id of repeating list.
Here the button is the deactivate button and on-click a confirmation box is shown. On confirm click, a function needs to run with the passing id.
But I am not able to send id long with data-target & data-toggle
In the code, I need to sent {{key.id}} to the confirmation box
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="deactivate(1)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>
Thanks in advance!
you need to set a variable for future use like
HTML
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button ng-click="selectedServiceId=key.id" type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="deactivate(selectedServiceId)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>
I've got a shop page that is meant to pop up a modal when clicking on a "More Details" button that offers the "name" and "description" from a JSON file. So far, I've only been able to get the name and description for the first item of the JSON array, regardless of which button I click. HTML looks like so:
<div ng-controller="myController" class="container-fluid">
<div class="row clear-fix">
<div ng-repeat="product in shop" class="col-md-4">
<div class="panel-heading">
<h1>{{product.name}}</h1>
</div>
<div class="panel-body">
<div>
<img ng-repeat="image in product.images" ng-src='{{image.full}}' />
</div>
<h2>{{product.price | currency}}</h2>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">More Details</button>
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{product.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{product.description}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Purchase</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
THis is my html code with the modal function
<div class="modal fade" id="listSensorModal" tabindex="-1" role="dialog" aria-labelledby="listSensorModal">
<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="deviceModal">Followers List</h4>
</div>
<div class="modal-body">
<br>
<div class="row form-group has-feedback" ng-repeat="sensors in listedSensors">
<div class="col-md-6">
{{sensors.id}}
</div>
<div class="col-md-3">
<!-- <input type="checkbox" ng-model="devices.deviceActive" bootstrap-switch class="make-switch" data-on="success" data-off="warning" ng-change="changeStatus(devices)"> -->
</div>
<!-- <div class="col-md-3">
<button type="button" class="btn btn-primary" ng-click="editSensors(sensors)"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-primary" ng-click="removeSensor(sensors.id)"><i class="fa fa-trash"></i></button>
<button type="button" class="btn btn-primary" ng-show="!sensors.deviceId" ng-click="linkToDevice(sensors)"><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-primary" ng-show="sensors.deviceId" ng-click="UnlinkDevice(sensors)"><i class="fa fa-minus"></i></button>
</div> -->
</div>
<div class="row form-group has-feedback" ng-show="listedSensors.length==0">
<h3 align="center">No Sensors here</h3>
</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="showAddSensorModal()">Add a New Sensor</button> -->
</div>
</div>
</div>
</div>
</div>
This is my Js code which shows the modal.Am getting data here but not the modal.
$scope.launchSensorModal = function(){
// $rootScope.showLoadingMessage('Please Wait');
API.followers().
then(function(responseData){
if(typeof responseData === 'object'){
// $rootScope.hideLoadingMessage('Please Wait');
$scope.listedSensors = responseData.data[0];
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
$('#listSensorModal').modal('show');
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
}
else{
console.log("Failed to get Listed Sensor. Please try again",responseData);
}
},function(responseData){
console.log("Failed to get Listed Sensor. Please try again",responseData);
})}
my console looks like this:
Sensor [Object]0: Objectfull_name: "Skater Gal"id: "2351640229"profile_picture: "https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xft1/t51.2885-19/11906329_960233084022564_1448528159_a.jpg"username: "_skaterg1rl"__proto__: Objectlength: 1__proto__: Array[0]
navbar.js:45 Sensor Skater Gal
navbar.js:47 Sensor [Object]
navbar.js:48 Sensor Skater Gal
Am not getting the data to the list in my modal.
can anyone help me??
Allright i want to make my bootstrap modal dynamic but not sure how to do it.. I know i need to use #PredictioItems.Name But not sure where :(
Code:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
<hr />
}
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
Some one that can tell me what to replace to make it work? Thank you :)
Something like this should do it - as #vel says, each possible modal "instance" has to have a unique id and the button to open it should reference that id:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal#(PredictioItems.Id)">View full description & Livestream!</button>
<hr />
}
<div id="myModal#(PredictioItems.Id)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>