Is Modal possible with <li> tag? - javascript

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">

Related

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!

editing a textarea value after posting a task on JS

im creating a task managment system and created a div which all tasks created by the user will append to right here:
</div><div id="ar_notes" class="ar_wrapper">
<button data-toggle="modal" data-target="#myModal" id="add_apt" ><i class="fa fa-pencil"></i></button>
</div>
and bootstrap modal that posts tasks right here:
<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>
</div>
<div class="modal-body">
<ul class="rslides">
<textarea id="put_note" autofocus></textarea>
<input onClick="addmore()" data-dismiss="modal" id="add_note" type="submit" value="הוסף משימה">
</ul>
</div>
</div>
</div>
</div>
this is my script that appends my notes on to the wrapping div:
function addmore() {
var newText = $('textarea').val();
$('#ar_notes').append('<br />');
$('#ar_notes').append('<article><div class="note"><p class="show_note">' +newText +'</p><button><i class="fa fa-trash-o"></i></button>').fadeIn(500);
$('textarea').filter('[id*=put_note]').val('');
}
my question is if i can click on the div of the task and get the modal with the same text in it to edit the task?
thanks!

Bootstrap Modal Scrolldown

I have a bootstrap modal and want to scroll down on button click:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"
data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
<i class="fa fa-times"></i><span class="hidden-xs">Close</span></button>
<button id="refresh" type="button" class="btn btn-primary pull-right">
<i class="fa fa-refresh"></i><span class="hidden-xs"> Refresh</span></button>
<h4 class="modal-title"> myTitle</h4>
</div>
<div class="modal-body">
<p id="verylongtext">Here is a very long text</p>
<p class="hidden" id="modal-bottom"></p>
</div>
</div>
</div>
JavaScript:
$('#refresh').click(function() {
$("#modal-dialog").animate({
scrollTop: $("#modal-bottom").offset().top
}, 1000);
});
This is my bootply so far. I tried several different ways but i don't get it working.
EDIT: I updated the snippet and bootply, but it still doesn't work...
So I played around with it, and you're missing stuff from the initial div for your modal header. I figured this out by copying the markup for a modal from the Bootstrap documentation and using your button to open it, which allowed the modal to scroll smoothly. I replaced the first line because I noticed items were missing, and that's the problem. The order the items is in might also be important, as I added them in various spots but still couldn't get it to work.
Make this the first line of your modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here it is running in a Bootply.
The solution was to put an extra container element within modal-body:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
<i class="fa fa-times"></i><span class="hidden-xs"> Close</span></button>
<button type="button" class="btn btn-primary pull-right" data-bind="click: refresh">
<i class="fa fa-refresh"></i><span class="hidden-xs"> Refresh</span></button>
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<div class="modal-body">
<div id="scrollContainer">
<p id="topAnchor"></p>
<pre data-bind="text: content"></pre>
<p id="bottomAnchor"></p>
</div>
</div>
</div>
</div>
The refresh-function does this:
$("#scrollContainer").animate({ scrollTop: $("#topAnchor").offset().top}, 0);
// some other stuff here...
$("#scrollContainer").animate({ scrollTop: $("#bottomAnchor").offset().top}, 500);
The animation is always from top to down this way. If only the scrolling to #bottomAnchor was called, the animation would jump up again from the bottom.

Dynamic bootstrap modal within a loop

I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;

pass a variable to a bootstrap modal

this title seems pretty common, but i can't find a correct answer for my problem from them.
I have a bootstrap template, and what i want to do is to pass some variable to a modal.
I'm using codeigniter and also smarty..
this is the code from my template:
<td><a class="btn mini red-stripe" href="#myModal3" data-id="{$frontuser->id}" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario "{$frontuser->username}"?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
i tried to find a JS file in order to analize it and see if i have to make some moedifications in there, but i didn't find a js that controls this. So, is this meaning that my modal is entirely managed by html?
if that's so..where do i put the variable in order to make the modal show this info?
thx
These look like PHP variables which you have to wrap in <?php [...] ?>.
Try this version
<td>
<a class="btn mini red-stripe" href="#myModal3" data-id=<?php echo $frontuser->id; ?>" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario <?php echo $frontuser->username; ?>?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
If you are using a specific template and wish to stick to the templates syntax, you may do so accordingly. The above snippet should work regardless.
Cheers

Categories

Resources