Im trying to make a item editor.
For example:
I have a product and I want to remove the Serial number of it.(It's all stored in a database)
So I press the minus icon I 'borrowed' thats located next to the product's name:
<i class="icon-minus"></i>
This opens a modal named 'RemoveSerialNumberModal' with a 'Are you sure' button.
This works all fine, but there are multiple products underneath each other and how can I tell the modal on what product it needs to remove the serial number? (All product have there own pair of icons).
The modal it's code is in the same file as the product list. But not in the same foreach loop.
I prefer to not use JS, but if there is no other way. It has to do.
---------------EDIT---------------
The products do have there own id ofcourse.
---------------EDIT---------------
Here is the modal:
<!-- Modal -->
<div id="RemoveSerialNumberModal" class="modal hide fade">
<div class="modal-header">
×
<h3>Update serienummers</h3>
</div>
<div class="modal-body">
<p>Selecteer het serienummer dat je wilt verwijderen.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
<button id="RemoveSerialNumber" class="btn btn-danger eerste" type="submit">Verwijderen</button>
</div>
</div>
Use data-id attribute.
I guess in your modal you have the below html :
<input type="text" name="yourid" id="yourid" value=""/>
//triggered when modal is about to be shown
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var yourid = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="yourid"]').val(yourid);
});
Use data attribute and class names to toogle while clicking:
<a class="click" href="#RemoveSerialNumberModal" data="2121" data-toggle="modal"><i class="icon-minus"></i></a>
$('.click').click(function(){
$('.click').removeClass('clicked');
$(this).addClass('clicked');
});
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) { // triggered when showing the modal
var data = $('.clicked').attr('data');
});
Related
I wrote a simple code for materialize modal.
HTML code:
<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS code:
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
/*$('.view').click(function (){
$('#modal1').modal('open');
alert('edskjcxnm');
});*/
/*$('.view').leanModal();*/
$('#modal1').modal('open');
});
JSFiddle link: https://jsfiddle.net/7f6hmgcf/
Why isn't it working?
Initialize all modals first. $('.modal').modal();
Complete code will look like this
(function ($) {
$(function () {
//initialize all modals
$('.modal').modal();
//now you can open modal from code
$('#modal1').modal('open');
//or by click on trigger
$('.trigger-modal').modal();
}); // end of document ready
})(jQuery); // end of jQuery name space
Not 100% sure what you are asking for here, but if what you are asking is how to trigger modal on button click you can simply do it by setting an onclick like this:
<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>
But before you can do $('#modal1').modal('open'); you need to initiate the modal in your js, like this:
$(document).ready(function() {
$('#modal1').modal();
});
You can check out my solution in this fiddle: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/
Another solution might be to do it this way:
<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>
MaterializeCCS documents aren't too clear, here's how I solved my problem.
HTML
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JavaScript
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
I recently updated my project to materializecss 0.98.0 and with this version I need to initialize modals before open it.
//Old
$('#modal1').openModal();
//New
$('#modal1').modal().modal('open');
I don't find any configuration like "autoOpen" on the modal initial options :(.
$( document ).ready(function() {
$('.modal').modal();
$('#modal1').on('click', function() {
});
});
https://jsfiddle.net/juands/z512cb7f/3/ check this link
Try Materialize.Modal class
let modal=new Materialize.Modal($("#yourModal"));
modal.open(); //Open it on some event
modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky
Here is my code:
<div class="superBlock" id="blabla">
<a class="watch"><img src="images/blabla.png"/></a>
</br>
<div class="btn-group-xs" role="group">
<a type="button" class="btn btn-info info" data-toggle="modal" data-target="#myModal">Information</a>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<a type="button" class="btn btn-success watch" data-dismiss="modal">Watch</a>
</div>
</div>
</div>
</div>
$('.info').click(function() {
var $watchID = $(this).parents('.superBlock').attr('id');
});
$('.watch').click(function() {
if($(this).parents('.superBlock').attr('id') != "") {
var $watchID = $(this).parents('.superBlock').attr('id');
}
alert($watchID);
});
What I'd like to do is to set the $watchID to the .superBlock's ID whether I click on the .watch button or on the .info button.
And I get $watchID is "undefined" when I click on the modal watch button after clicking on the info button.
And I'd like the $watchID to keep on being set to the .superBlock's ID if the $(this).parents('.superBlock').attr('id') is undefined. So the $watchID not to change to the undefined $(this).parents('.superBlock').attr('id').
What should I do? Is this only about syntax? If so, how should I change this?
This HTML divs are repeating with different IDs, that's why I can't just set the ID to "blabla".
To tell if a selector matches anything, check the length of the jQuery object.
var superblock = $(this).closest(".superBlock");
if (superblock.length > 0) {
$watchID = superblock.attr('id');
}
Also, if you want the $watchID variable to persist between calls, it should be declared outside the functions. Your variable is local to each function, so it gets discarded when the function returns.
And since you just want the closest parent with that class, use .closest() rather than .parents(), which searches the entire DOM hierarchy for multiple matches.
If i call $("#modal").closeModal(); inside the modal, the complete method is not triggered. I open the modal with the following.
$("#modal").openModal({
dismissible: false,
complete: this.doSomething
});
Is there something i am doing wrong? Is there a way to trigger the modal to close inside the modal, so that the complete method is triggered? I need to wait for something to happen before the modal is closed.
Is this what you want?
html file
<!-- Modal Structure -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal">
<div class="modal-content">
<!--following line has the icon to close the modal on your command-->
<h4>Modal Header <i class = "material-icons right" id = "closeIcon">close</i></h4>
<p>A bunch of text</p>
<!--following button adds text to the <p> tag with id = "textBody" i.e. its doing something and the modal wont close until that is done-->
<button class = "btn waves-effect waves-light" id = "doSomething">Press me and do something</button>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<p id = "textBody">
</p>
jquery
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false,
/*waiting for the user to click the button before closing*/
complete: $('#doSomething').click(function(){
$('#textBody').html('i got a Boo Boo');
$('#modal1').closeModal();
})
});
$("#closeIcon").click(function(){
$('#modal1').closeModal();
});
})
here is the link to check what's happening: https://jsfiddle.net/4y6ptm8k/4/
Im trying to get the value of the data-id which contains and id in my database. I need to get the admin_id and place it into a twitter bootstrap modal. How am I going to get that value using java script?
<a data-toggle="modal" data-id="<?=$row['ADMIN_ID'];?>" href="#view_contact" class="btn btn-info btn-xs view-admin">View</a>
here is my modal
<div class="modal fade" id="view_contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Admin modal!!</h4>
</div>
<div class="modal-body">
Admin Id:<p id="showid"></p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
here is my java script
<script type="text/javascript">
$(document).on("click", ".view-admin", function () {
var adminid = $(this).data('id');
$(".modal-body #showid").val( adminid );
$('#view_contact').modal('show');
});
</script>
its not showing in my modal. They are all in the same page. How do I do this? Kinda new at this.
Problem is, you are trying to assign the value to a p tag. p tag does not have value property. Use text() or html()
$(document).on("click", ".view-admin", function() {
var adminid = $(this).data('id');
$(".modal-body #showid").text(adminid);
$('#view_contact').modal('show');
});
You can just replace
$(".modal-body #showid").val( adminid );
with
$("#showid").text( adminid );
You don't need to reference class name .modal-body for the id #showid as there must be only one id name in a page according to W3C Validation. And referencing with the id is the fastest way to access any html elements.
My problem is when clicking OK in the modal window, which goes to javascript function in the modal will reload or clear the parent fields ?
Here is the use case:
1. enter name string into parent name form input
2. click on Test Modal Button
3. a modal window appears
4. click on the modal window "OK" button. (with the cancel button its not a problem)
5. parent name input was cleared. Possibly the parent was reloaded.
I'ved created a simple rails project with a generated scaffold Post name:string. Nothing special but I just enabled bootstrap js and css.
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.js
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css
And then, I inserted this code into _form.html.erb, you can view it here:
https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb
<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
×
<h3>Please enter a new product</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
<br>
Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
<br>
Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
<br>
Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
</div>
</div>
<div class="modal-footer">
Cancel
OK
</div>
</div>
<div class="divButtons">
<a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
</div>
<script>
$(document).ready(function() {
$('#windowCreateInvoiceProductDialog').bind('show', function () {
// document.getElementById ("xlInput").value = document.title;
});
});
function okClicked () {
$('#windowCreateInvoiceProductDialog').modal('hide');
// document.title = document.getElementById ("xlInput").value;
// closeDialog ();
};
</script>
found the answer!
instead of this
<a href="#" class="btn btn-primary" >OK</a>
replace with this
<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>
and thats all to it, and its flexible, i could hide, not hide and do something.