I was able to load external content to my bootstrap-modal , but every time i call the modal page it creates an extra instance, see this screenshot
user (https://dl.dropboxusercontent.com/u/67763500/modal%20issue.PNG)
how to troubleshoot this? I believe it's on the CSS, but not sure where exactly.
here are my views code:
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Info</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#*<button type="button" class="btn btn-primary">Save changes</button>*#
</div>
Click me !
and here is the code for the target modal
<div class="modal-body">
<dl class="dl-horizontal">
<dt>
#Html.DisplayName("User Name")
</dt>
<dd>
#ViewBag.username
</dd>
<dt>
#Html.DisplayNameFor(model => model.Name_Prefix)
</dt>
<dd>
#Html.DisplayFor(model => model.Name_Prefix) .
</dd>
</dl>
<p>
#*#Html.ActionLink("Edit", "Edit", new { id = Model.CustomerId }) |*#
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</p>
I figured it out. It was another script on my page that caused the issue.
I removed it and it works like a charm.
Related
I need to make a Modal for editing a player, and I made one, but whenever I click button "Change" it doesen't open my modal. I don't know where am I supposed to send the right ID
this is my jquery
var data= 0;
$('.btnEdit').click(function () {
$('#myModalEdit').modal("show");
});
$('#myModalEdit').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
data= button.data("playerId");
});
To be precise, when I click Change it does enter the first function, but doesn't open modal. I would really need help. If you need more info, please write what, and I will post it.
Modal code:
<!--Modal-->
<div id="myModalEdit" 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">Ucinak igraca</h4>
</div>
#Html.HiddenFor(Model => item.IgracId)
<div class="col-md-6">
#Html.LabelFor(Model => item.ImeIPrezime)<br />
#Html.LabelFor(Model => item.OdigraneMinute)<br />
#Html.LabelFor(Model => item.PostignutiGolovi)<br />
#Html.LabelFor(Model => item.ZutiKarton)<br />
#Html.LabelFor(Model => item.CrveniKarton)
</div>
<div class="col-md-6" style="margin-bottom:5px;">
#Html.DisplayFor(Model => item.ImeIPrezime)<br />
#Html.EditorFor(Model => item.OdigraneMinute)<br />
#Html.EditorFor(Model => item.PostignutiGolovi)<br />
#Html.EditorFor(Model => item.ZutiKarton)<br />
#Html.EditorFor(Model => item.CrveniKarton)
</div>
<div class="modal-body" id="modal-body">
<div id="greska"></div>
</div>
<div style="align-content:center">
<br />
<button type="button" class="btn btn-primary" data-dismiss="modal" id="sacuvaj">Sacuvaj</button>
<button type="button" class="btn btn-primar" data-dismiss="modal" id="odustani">Odustani</button>
</div>
</div>
</div>
</div>
<!--Modal-->
Button code:
<button type="button" class="btn btn-primary" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
Could you please Add class "btnEdit" to your Button
like this
class="btn btn-primary btnEdit"
Your button is missing the class btnEdit so related click event not getting executed
replaace
<button type="button" class="btn btn-primary" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
with
<button type="button" class="btn btn-primary btnEdit" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
And make sure script gets exexutes html rendering done
Sometimes when dynamic html is rendered events are not mapped
if its case ADD onclick="$('#myModalEdit').modal('show');" to you BUTTON
I have a problem: I pass a collection to a view. Then I iterate through it and display some data. In normal markup, it works, but in modal it doesn't. Please tell me why modal code does not show the data.
Here is the view:
#model IEnumerable<Models.ToDO>
#foreach (var item in Model)
{
#if (item.isDone == true)
{
<div class="done-element element">
<p>
Title: #Html.DisplayFor(modelItem => item.Title)
</p>
<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" 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>
Description: #Html.DisplayFor(modelItem => item.Desc)
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
}
}
EDIT: I found some strange things: all modals display this value, but all take it from the first element
EDIT2: I found the solution. Target data is ID and take first found element. Changing ID to variable fix problem.
I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.
I am VERY new to Watir, trying to test a popup window and am unable to get my script to click the Cancel Target button. When running the script, I get an error: element not visible (Selenium::WebDriver::Error::ElementNotVisibleError. This is the script I am using:
browser.div(:class => "modal-footer").button(:class => "btn btn-danger").click
Below is the code:
<div class="modal hide fade" id="target_modal" data-bind="with: target">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text: BusinessName"></h3>
</div>
<div class="modal-body">
<div class="row">
<div class="span3">
<label for="FirstName">First Name</label><input id="FirstName" type="text" data-bind="value:FirstName" />
<label for="LastName">Last Name</label><input id="LastName" type="text" data-bind="value: LastName" />
<label for="Email">Email</label><input id="Email" type="text" data-bind="value: Email" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bind="click: saveTarget">
<i class="icon-white icon-ok"></i>
Save Target
</button>
<button class="btn btn-danger" data-dismiss="modal">
<i class="icon-white icon-remove"></i>
Cancel Target
</button>
</div>
</div>
Any help would be greatly appreciated. Thanks!
I assume that this popup is part of the page (ie just an div tag overlaying the rest of the page), rather than a new browser window popup.
My guess is that Watir is trying to click the button before the popup finishes being displayed. Explicitly telling Watir to wait for the button may solve the problem:
cancel_button = browser.div(:class => "modal-footer").button(:class => "btn btn-danger")
cancel_button.when_present.click
I got it to work. Justin Ko's 1st answer got me thinking and this worked:
cancel = browser.div(:id => "target_modal")
cancel.div(:class => "modal-footer").button(:class => "btn btn-danger").i(:class => "icon-white icon-remove").click
I'm having trouble with displaying the modal for the specific image clicked on to view.
If i use a link with a class it will show all of the images in that album in seperate modals (have to close them all down). I want to show the appropriate modal for the image that I click "view" on so that it is corresponding.
If i set this to id and create an id in the top div it will display the first image in the album only, no matter what image i click on.
How could I solve this?
<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<!--This is for the 360 viewer-->
<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'"/>'?>
<!--360 viewer end-->
</div>
<div class="modal-footer">
<?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'">Download</a>'?>
</div>
</div>
One way to approach this is to store the various unique data components on each of the links and then have a generic handler which will load that data into the relevant elements of a single modal.
For instance, something along the lines of:
HTML
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i> View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<img id="snap"/>
</div>
<div class="modal-footer">
<a id="download" class="btn btn-link">Download</a>
</div>
</div>
Where you could load each image's data into the data attributes via PHP.
JS
$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
$('#snap').attr('src',$(this).data('image'))
$('#download').attr('href', $(this).data('download'))
})
This will load the appropriate data in the modal elements.
JSFiddle