Develop Reference

After modal dismiss some functions are not working

I've got this project, a counter for a game... The idea is that when I click the "#buttonplay", it runs the jQuery function and hides the modal. That is all right, but after the modal is hidden, the function DisplayMoreInfo doesn't work... That function has to, when the user clicks on a specific game, provide more info about it.
I've got a game done without the function that runs after the #buttonplay is clicked, and it shows the info before I create a new game... But after, doesn't do anything...
This is my HTML:
<div id="contentplays" style="display: none">
<button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
New Game
</button> <!--This button is to create a new play-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Game</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<!--Here it goes the info of the new game-->
</form>
</p>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submitnew" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!--This is the game WITHOUT the jQuery function of the #buttonplay-->
<div class="game done" onclick="DisplayMoreInfo(NewGame);">
<h1>NewGame</h1><br>
<p class="info">21&sol;01&sol;2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1&colon; Pirulo</p>
<p class="person">Player 2&colon; Zultano</p>
<p class="person">Player 3&colon; Mengano</p>
</div>
</div>
And this is my JavaScript:
//The jQuery function
$('#submitnew').click(function () {
$('myModal').modal('hide');
//Some code here
});
//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
$(game).toggle();
}
Thanks in advance for any answer!!!

You might have to change this line of code from
onclick='DisplayMoreInfo(NewGame)';
To:
onclick='DisplayMoreInfo("#NewGame")';
Why did not work?
You are trying to pass NewGame to the DisplayMoreInfo function, which is at that point undefined.
Next time try to debug your code better using Chrome!

Modal popup is opening even when button is disabled in angularjs

I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.

Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">

The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}

I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">

try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;

How do I open a modal onclick?

I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>

Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.

Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>

How to Submit other Modal form on Submit Button click of Current Modal

I have a Bootstrap Modal which contains a Submit Button.Apart from this Modal I have another one also which contains Form and other elements like Lables, Text boxes and a Submit button.Now I have a requirement where in a click Submit button of first Modal , it should submit the Form of the Second Modal..Below I am posting my First and Second Modal HTML Prototype ..
<div class="modal alert" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="DeleteModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-6 control-label">Are You Sure To Delete !!!</label>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</div>
</div>
</div>
</div>
and Here is the Second One..
<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</form>
</div>
</div>
Please suggest me How can this is possible.Thanks..

Adding a class to delete button
<button type="submit" class="btn btn-success delete"><i class="glyphicon glyphicon-trash"></i> Delete</button>
Write a click event.
$('.delete').on('click',function(){
$('#DeleteModal').modal('hide');
$("#frmStudent").submit();
});
Note : This is just a basic example. Now if you want to use ajax to submit the form then there are way different steps to achieve it.

Is Modal possible with <li> tag?

I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.
This is the code I'm using (and what I've tried so far)
Modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Are you sure you want to Add an Iteration?
</div>
<div class="modal-footer">
#using (Html.BeginForm("AddNewIteration", "Index"))
{
#Html.AntiForgeryToken()
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Add Iteration</button>
}
</div>
</div>
<li> in concern
<!-- Start of Add New Iteration -->
<li>
<a href="#myModal" data-toggle="#myModal">
<span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
<div class="ca-content">
<h2 class="ca-main"> Add new Iteration</h2>
<h3 class="ca-sub"> Add New Iteration to the Project!</h3>
</div> <!-- End of ca-content-->
</a>
</li> <!-- Add New Iteration -->
Thanks in advance

No Matter, I found what I was doing wrong.
Was declaring the tag wrong Had to change it to:
<a href="#" data-toggle="modal" data-target="#myModal">