I have a gridview that contain lot of rows, the rows can assume two different meaning. Depending to the meaning of row I need to open a different modal poupup, someone could explain me how to do that?
This is the code of gridview:
<asp:GridView ID="grd_elenco" runat="server" data-toggle="modal" data-target="#myModal1">
this is how I create the modal-box:
<div id="#myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Titolo</h4>
</div>
<div class="modal-body">
<!--my content-->
</div>
<div class="modal-footer">
<asp:Button runat="server" type="button" Text="Chiudi" class="btn btn-default" data-dismiss="modal" />
</div>
</div>
</div>
</div>
So, I need to change programmatically and depending of content of rows the data-target of gridview, is it possible?
I solved my problem with this code:
VB.NET
Private Sub grd_elenco_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grd_elenco.RowDataBound
Dim variable As Integer = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "column_name")) 'take the value from column
e.Row.Attributes.Add("OnClick", "OpenModalBox(" + variable.ToString + ")")
End Sub
Javascript
function OpenModalBox(variable) {
if (variable==0){
$('#mymodal1').modal('show');
} else {
$('#mymodal2').modal('show');
}
}
Related
Hello guys I tried to create a pokedex by using pokeapi.
My modal looks like this:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"> #1 Pokemon-Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some information
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and the js like this:
const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");
And my question is how can I change the title and the description of the modal to bulbasaur ?
Full Code: https://www.codeply.com/go/qoCnPUDDxG
With plain javascript:
document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';
With jQuery:
$('#exampleModalLongTitle').html("Bulbasaur");
Do the same for whichever element contains your description.
For the modal title:
document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery
For the description, add a id attribute to your HTML element
<div id="modalDescription" class="modal-body">
Some information
</div>
document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery
you can get reference of div using id of and set content inside it.
//In Jquery
$('#exampleModalLongTitle').html("your text");
//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';
I have a icon of plus + sign which is supposed to open a modal form on click
but here modal form is not opening.
<td>
<a data-target="#myModal" data-toggle="modal" href="#myModal">
<span class="glyphicon glyphicon-plus"></span></a>
</p>
</td>
Above code represent + sign and click on it.
Model Form code is below:
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
What's wrong with it. I am unable to find it. Any help would be appreciated
The bootstrap.js library needs to be included in order for data-toggle to work.
I have the following DELETE button that I am passing $userid through the data-id
<a href='#myModal' class='trash' data-id='".$userid."' role='button'data-toggle='modal'>
Delete</a>
I have the following 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
And the following JS which gets the value of the DELETE button
$('.trash').click(function(){
var id=$(this).data('id');
$('#modalDelete').attr('href','delete_user.php?id=' + id);
});
I am trying to set the value of the "href" in the modal so that it can be passed to a php page called delete_user.php which deletes the user from the database. Anyone see where I am going wrong? I cannot get the href to go to the delete_user.php
you have mistake here data-id='".$userid."' should be data-id='<?php echo $userid;>'
<a href='#myModal' class='trash' data-id='<?php echo $userid;>' role='button'data-toggle='modal'>
Delete</a>
and for better approach, get rid of click function, use modal event and let bootstrap handle the rest
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$('#modalDelete').attr('href', 'delete_user.php?id=' + id);
});
});
Fiddle
I have a modal with some tabs, and each tab has its own form. I am looking for some way to change the footer so the submit works based on the active tab.
http://jsfiddle.net/r9b3ugs5/
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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 class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="One">
<form id="FormOne" role="form" class="container-fluid" action="One.asp" method="post">
<div class="row">
FormOne
</div>
</form>
</div>
<div class="tab-pane" id="Two">
<form id="FormTwo" role="form" class="container-fluid" action="Two.asp" method="post">
<div class="row">
FormTwo
</div>
</form>
</div>
</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>
What should be the way to do this? adding one footer for each tab and show it when the tab is active? Some other way?
UPDATE:
http://jsfiddle.net/r9b3ugs5/2/
Everthing is ok, besides the trigger url when I click in each button.
use jquery:
$("#tab1").click(function(){
$("#submit1").css("display","inline-block !important");
$("#submit2").css("display","none");
});
$("#tab2").click(function(){
$("#submit2").css("display","inline-block !important");
$("#submit1").css("display","none");
});
Fiddle: Demo
I updated the JFiddle. Look at this:
http://jsfiddle.net/r9b3ugs5/1/
Instead of alerting the id you can decide which tab has to be saved using the retrieved id. All you need to do is to add an id and a unique class (mytabs here) to all the tabs (on the li tag).
$("#save-button").click(function() {
alert($(".mytabs.active")[0].id);
});
EDIT: Actually you don't really need the class you could select over the parent ("#my-tab-ul li.active"). Several possibilities.
EDIT2: Further explanation
give the form ids like tab-id-form (tab-id = id of tab belonging to form)
replace the alert line with
$("#" + $(".mytabs.active")[0].id + "-form").submit();
Complete solution (tested in IE and FF): http://jsfiddle.net/r9b3ugs5/5/
// optional: change the text on the button when the tab is switched
$("#tab1").click(function() {
$("#save-button").html("Submit 1");
});
$("#tab2").click(function() {
$("#save-button").html("Submit 2");
});
$("#save-button").click(function() {
var id = $(".mytabs.active")[0].id;
if (id == "tab1") {
// you can also do the submits here, then there is no need for a
// special id, e.g. $("#completely-unrelated-form-id").submit()
} else {
// other submit if done in here, however with this approach you
// always have to modify the code when adding tabs.
}
$("#" + id + "-form").submit(); // == EDIT2, no more code manipulation needed
});
The latest version of Bootstrap modal options says that remote function is deprecated and will be removed in Bootstrap 4.
So i'm trying to load a page with jQuery load. But how does this work? I can't find any example of this.
What I want is a modal that loads a page that I created as well. When you click a link in that page (the link is an url of an image), the href value must be returned to the textbox (ImageUrl) in the parent page.
<div class="input-group">
#Html.EditorFor(model => model.ImageUrl, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-btn">
<button class="btn btn-default browsefiles" type="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-search"></i></button>
</span>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">Image</h4>
</div>
<div class="modal-body">
External page must be loaded here
</div>
</div>
</div>
</div>
I didn't knew that jQuery.load returned only html and that it will paste the html in the div that you have specified. So when you want to "return" something, the destination is on the same page. So you could set the return value directly in the page.