2nd ng-repeat-modal-btn not working - javascript

I want to have an ng-repeat that contains 2 buttons that opens 2 different modals. My problem is the first button successfully opens its modal but the second one does not.
here is my html
<div class="column" ng-repeat="eventObj in events" ng-repeat-dimmer>
...
<button class="circular ui icon green button" id="edit-event" data-inverted="" data-variation="tiny basic" ng-click="getCurrent(eventObj)" ng-repeat-modal-btn></button>
<button class="circular ui icon red button" id="delete-event" data-inverted="" data-variation="tiny basic" ng-click="getCurrent(eventObj)" ng-repeat-modal-btn></button>
...
</div>
and here are my two modals
<div class="ui edit-event modal">
<i class="close icon"></i>
...
<form>
...
<div class="field">
<button class="ui button" type="submit" ng-click="editEvent()">Submit</button>
</div>
</form>
</div>
<div class="ui delete-event modal">
<div class="header">Delete Event</div>
<div class="content">
<div class="ui form content">
Are you sure you want to delete {{eventObj.eventName}}?
</div>
</div>
<div class="actions">
<div class="ui green button" ng-click="deleteEvent(eventObj,$event)">Delete Event</div>
<div class="ui black cancel button">Cancel</div>
</div>
Again, I'd like to know why my second button does not work while the first does, thank you!

Related

show and ng-show is not helping out for below div

when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()

When trying to use semantic ui I keep getting this error Uncaught TypeError: $(...).modal is not a function

Here is the the code. Below I have shown the js and html and when it runs I need to be able to click the "log in button" and open a semantic ui modal
$('.ui.basic.modal').modal('show');
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="modaldiv" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the gravatar image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
I need it so that a semantic modal opens when i click login
It does not look like you have included the required scripts for jQuery Modal.. (which I'm just guessing you're using..)
Adding the following to your HTML should fix this for you...
Note, that if you are not using jQuery Modal - you will need to include the appropriate scripts for the modal you are using...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
Demo:
$("#btn").on('click', event => {
$('#modaldiv').modal('show');
})
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div id="modaldiv" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the gravatar image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<button id="btn">Open Modal</button>

Open Modal in semantic-ui

I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.
Here is the button that I use to open the Modal:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
#include('auth.modals')
</div>
Here is my Modal:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"
correcting the attribute will do the job:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
#include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :)
Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.
Figured it out!
I guess the button that you open the modal with has to be a class?
<a class="item register">Register</a>
Then pass in JavaScript like this:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

Buttons inside bootstrap well don't work

So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!
Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.
Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle
<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>

toggling buttons and panels using twitter bootstrap

I have three buttons and each triggers showing a corresponding panel. I would like to only show one panel at a time, but right now a panel is shown per button clicked. So clicking all three buttons shows three panels at the same time.
I am using twitter bootstrap, and this is my code:
<span data-toggle="buttons-radio">
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content1"><i class="icon-sitemap"></i> Content1</a>
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content2"><i class="icon-user"></i> Content2</a>
<a class="btn btn-sm btn-primary pull-right m-r" data-toggle="class:show" href="#content3"><i class="icon-male"></i><i class="icon-female"></i> Content3</a>
</span>
<aside class="bg-white hide col-lg-6 b-l" id="content1">
<div>
<h2>This is content 1</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content2">
<div>
<h2>This is content 2</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content3">
<div>
<h2>This is content 3</h2>
</div>
</aside>
thanks
Thomas
In bootstrap, tabs work that way:
http://getbootstrap.com/javascript/#tabs
The tabs titles show up across the top and clicking them shows different content. Two tabs are never shown at once.
Try wrapping it in a .btn-group to your span.
<span class="btn-group">
//your buttons
</span>

Categories