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/01/2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1: Pirulo</p>
<p class="person">Player 2: Zultano</p>
<p class="person">Player 3: 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!
Related
I am writing a program with foundation reveal modal. When a modal is opened, the javascript need to stop executing until user has press the button in the modal, then only the javascript continue execute. This is more similar like Alert() function in javascript. Is it possible?
I need some guidelines, thanks!
Yes this is possible.
HTML:
<div id="modal_div" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="okbtn" type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<!-- end html-->
Javascript:
function hide_modal_on_click(top_level_modal_div, button) {
var top_level_modal_div = $("#modal_div").show();
var button = $("#okbtn").on('click', function() {
top_level_modal_div.hide();
})
}
hide_modal_on_click();
I'm trying quite hard, due to my inexperience, to popup a modal created with bootstrap.js on an onclick event on different cells in a table.
I put the onclick="openModal()" on the cell.
Then the script:
<script type="text/javascript">
function openModal(){
$('#modal').modal('show');} </script>
And then the div:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Of course, the script is before the </body> tag and the div outside the table.
Is there anything wrong? I know that the onclick event is not that great of a solution, but I'm still in the newbie phase!
Thanks you for your help
Luca
You forgot to add a id to your div modal.
<div id="modal" class="modal" tabindex="-1" role="dialog">
In Jquery you use '#' to select a id.
I am trying to do something which i think many people have done; and have read some examples etc; and have tried to piece together what i need but not having any luck. What I am trying to do is have a button pass a variable to a bootstrap modal. And then somehow echo or print the variable within the modal so i know it is working. I built some code from examples I found
here is my button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
I was not sure if i could echo the image id for the variable to be passed but have done a lot of stuff like that before so seems like it would be ok (this could be an issue though)
Secondly - here is my modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
A couple of notes on this. I was really uncertain where the script should be "placed" in relation to the modal. So I just placed in the modal body.
I tried to do an alert to see the variable that was passed. Nothing is happening though. So I am hoping someone can give me some pointers on what I am doing wrong.
Thanks so much,
Gerard
Your issue could be down to using a early version of bootstrap where relatedTarget is not passed.
As in regards to your js, put it in the bottom of the body or in a separate js file reference from the bottom of the body and after any libraries, ie jquery and bootstrap.
Here is your code working with the latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
i have $scope in function but this $scope cant show in html How To make it show ?
this code in fucntion
$scope.checkBrach = function(index) {
console.log($scope.dataBranch[index]);
$scope.branchCode = $scope.dataBranch[index].branch_code;
}
this code in HTML and {{branchCode}} dont show data for me
×
รายชื่อสาขา
choose
{{i.branch_code}}
{{i.branch_name}}
build
delete
Close
OK
<div aria-hidden="true" class="modal fade" id="delete-branch" role="dialog" tabindex="-1" ng-controller="contestCtrl">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Modal Title</h2>
</div>
<div class="modal-inner">
<p>
<strong>{{branchCode}}</strong>
</p>
</div>
<div class="modal-footer">
<p class="text-right">
<button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button>
</p>
</div>
</div>
</div>
</div>
In order to set the value for $scope.branchCode you must run the function $scope.checkBrach because the scope variable branchCode is being created inside that function or you could define your variable at the top of your controller like $scope.branchCode = "xyz branch code".
I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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-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" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});
$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.
Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<div class="modal fade" id="myModal" 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-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>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>