I have a main template to do some wizard like stepping through some templates:
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
However when I click on the first button to render the next template I get the error
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found
When I look at the source after clicking the button the ng-switch div tag is there so I am not sure why it is not working.
I'm pretty sure you're missing some closing elements. I reformatted the code as written.
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
With the missing elements
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
</div>
The issues is that in the incorrect code, the second and third ng-switch-when elements are not directly below the ng-switch element. ng-switch-when looks at it's parent element for the ng-switch statement, which is missing.
Related
I'm working with Bootstrap5 and Vue 3. I have multiple buttons and each of them is triggering one collapse.
What I want is that if I open one collapse all other collapse should be closed. But now every collapse will be shown and the other ones are not closing.
I've tried to use data-parent and data-bs-parent but non of this is working.
How can I achive that? Thank You!
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
Button 2
</button>
</div>
</div>
</div>
<div>
<div class="collapse" id="collapse-b1">
<div class="mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2">
<div class="mt-3">
Text 2
</div>
</div>
</div>
A few minor changes to make it work
Your code requires some minor fixes to work correctly. Add the data-bs-parent="#myGroup" attribute to each collapse. And then assign the same id to the parent element of the collapsible elements, i.e., the container.
Note that attribute name has been changed from data-parent in Bootstrap 4 to data-bs-parent in Bootstrap 5. And the parent is the element that contains the collapsible elements and NOT the container of the buttons and links used to toggle.
Additionally, buttons need to have the correct classes applied, e.g., btn-primary and btn-success.
Related SO Question: Collapse other sections when one is expanded
Run the snippet to see how it works:
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-success" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2">
Button 2
</button>
</div>
</div>
</div>
<div id="myGroup"> <!-- Add the parent id here -->
<div class="collapse" id="collapse-b1" data-bs-parent="#myGroup">
<div class="alert alert-success mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2" data-bs-parent="#myGroup">
<div class="alert alert-primary mt-3">
Text 2
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
Hello guys I have some code:
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?
If you click the button, you only want to add class to the buttons in the same group?
If so do this:
$('.btn-group .btn').click(function(){
$(this).parent().children('.btn').addClass('disabled');
});
.disabled {
color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
You just have to change your selector and make it more general to include your .a class:
$(".a > .btn-group > button.btn.approve").addClass("disabled");`
Select buttons only within the div has class a by updating the selector.
$("div.a button.btn.approve").addClass("disabled");
Try something like this :
$(".a button.btn.approve").addClass("disabled");
.b>.button.btn.approve
You need to define exact element because
button.btn.approve
Matches all buttons, you can add additional class or ID too
I'm making out a ticket system for a repair shop with an option to update the status of the repair with canned responses. you can click a button, it opens a modal with canned response options, you click insert, and it inserts the response into the textarea below the button. everything works as it should on desktop, however, on mobile, the button for canned responses is not clickable, and the textarea can't be clicked either.
Button and textarea:
<div class="col-xs-12">
<div class="form-group">
<label for="message">Status Update Message:
<button type="button" class="btn btn-secondary text-left" data-toggle="modal" data-target="#myModal"><i class="fa fa-file-text" aria-hidden="true"></i></button></label>
<textarea class="form-control" required rows="8" maxlength="750" name="message" id="message"></textarea>
</div>
</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">Canned Responses</h4>
</div>
<div class="modal-body">
<div class="col-xs-12">
<div class="col-xs-3">
<p>Diagnosing</p>
</div>
<div class="col-xs-7">
<p id="Dingmess">Hi, Thanks for coming in. We are currently diagnosing your machine...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Diagnosing"class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Diagnosis</p>
</div>
<div class="col-xs-7">
<p id="Dmess">Hi, We took a look at your device, and the issue is *. It will be $...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Diagnosis" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Repair Approved</p>
</div>
<div class="col-xs-7">
<p id="Appmess">Thanks for your approval. We will proceed with the fix and let you know when it's ready to pick...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Approved" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<div class="col-xs-3">
<p>Repair Declined</p>
</div>
<div class="col-xs-7">
<p id="Decmess">Your repair has been marked as declined. Please let us know...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Declined" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Parts Ordered</p>
</div>
<div class="col-xs-7">
<p id="Partmess">Parts have been ordered. We will notify you when we begin...</p>
</div>
<div class="col-xs-2">
<button type="button" id="Parts" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>In Progress</p>
</div>
<div class="col-xs-7">
<p id="Progmess">Your repair is in progress. We will notify you when complete</p>
</div>
<div class="col-xs-2">
<button type="button" id="Progress" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Completed</p>
</div>
<div class="col-xs-7">
<p id="Compmess">Your repairs are complete, and your device is ready!</p>
</div>
<div class="col-xs-2">
<button type="button" id="Completed" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
<br>
<div class="col-xs-3">
<p>Closed/Invoiced</p>
</div>
<div class="col-xs-7">
<p id="Closedmess">The ticket has been closed. Thank you.</p>
</div>
<div class="col-xs-2">
<button type="button" id="Closed" class="btn btn-default" data-dismiss="modal">Insert</button>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-12">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Javascript for insertion:
$(document).ready(function(){
$("#Diagnosing").click(function(){
$('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.');
});
$("#Diagnosis").click(function(){
$('#message').html('Hi, We took a look at your device, and the issue is *. It will be $ +tax to repair. Shall we proceed with the fix?');
});
$("#Approved").click(function(){
$('#message').html('Your device has been marked as approved! We will proceed with the fix and let you know when it\'s ready to be picked up!');
});
$("#Declined").click(function(){
$('#message').html('Your repair has been marked as declined. Please let us know if there is anything we can do to change your mind!');
});
$("#Parts").click(function(){
$('#message').html('Your parts have been ordered. We will let you know when we receive the parts and begin installing them.');
});
$("#Progress").click(function(){
$('#message').html('We are currently working on your repair. We will notify you when it is done!');
});
$("#Completed").click(function(){
$('#message').html('Hey there - your repair is all set! We just finished cleaning it up so you can come pick it up and pay at your earliest convenience. We *** and tested ***.');
});
$("#Closed").click(function(){
$('#message').html('The ticket has been closed. Thank you.');
});
});
Any thoughts as to why it wont work on mobile? i've looked for an hour or so, and i haven't found anyone with the same issue.
This code works for me. I'd make sure my scripts are in the following order and version:
<script type="text/javascript" src="scripts/jquery-2.2.3.js"></script>
<script type="text/javascript" src="scripts/bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Diagnosing").click(function(){
$('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.');
});
........
</script>
</body>
I am using bootstreap3 popup(model) to select image from computer.
I want when user select one or more image then popup should be closed and image uploading preview should be display in main page (below the <i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>).
My code is
<div class="form-group">
<div class="controls form-inline">
<i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>
<div id="myModal" class="modal fade">
<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>Upload Images</h4>
</div>
<div class="modal-body">
<div class="modal-title">
</div>
<div id='content' class="tab-content">
<div class="tab-pane active" id="uplod">
<h1>Drag and Drop files using Dropzone.js</h1>
<form action="upload.php"
class="dropzone"
id="my-awesome-dropzone"></form>
</div>
</div>
</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>
</div>
</div>
My code is here .
How to do this
document.getElementById("imageid").src="../template/save.png";
So what I'm trying to do is, load a payment modal (which will have a payment/credit card form), and dynamically load the "selected plan" into the modal.
Below is the "Choose a Plan" HTML - what I'm trying to do/need help with is a jQuery function that opens the modal and loads "You selected this plan".
PS. Here is a fiddle if it's easier http://jsfiddle.net/9xyJn/
This is what I have on the JS side so far:
$(".planSelector").click(function() {
console.log("got that clcik.");
var selectedPlan = //Get the selected plan
$("#paymentModal").modal("show");
});
HTML:
<div class="container">
<div class="row">
<hr>
<div class="span12 pick-plan-intro">
<h2>Great sales teams come in all sizes</h2>
<h6>All plans are including all features</h6>
</div>
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="freePlan">Free</h4>
<p>Free</p>
<p>Up to 5 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="smallPlan">Small</h4>
<p>$99</p>
<p>Up to 15 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="mediumPlan">Medium</h4>
<p>$199</p>
<p>Up to 30 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
</div>
</div>
I have modified your code a little and added id to your <a> attributes.
Here's the jsfiddle update: http://jsfiddle.net/saurabhsharma/9xyJn/1/