I want to list some subjects using ul and li.....
when user click li I want to show subject detail in modal pop up
$.each(data, function (i,item) {
$("#myUL").append('<li ><a href="#" >' + item.subject + '</a></li>');
//modal with item.detail
}
how can I show each subjets detail in pop up
Here you have code example of Bootstrap Modal: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal&stacked=h
$.each(data, function (i,item) {
$("#myUL").append('<li ><a data-toggle="modal" data-target="#myModal" href="javascript:void(0);" >' + item.subject + '</a></li>');
var textValue = item.subject;
$("#myUL").last().click(function() {
$(".modal-body p").text(textValue);
});
};
I am no jQuery expert but this should work.
You could also do it with global variable changed on click and template string inside modal body paragraph.
EDIT:
Add this inside <head> tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
And this inside <body>:
<!-- 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>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>
</div>
</div>
CODEPEN example:
https://codepen.io/miroslaw-dubaj/pen/QZjqeQ
Related
hello I know you are not able to have similar ID tags because of the fact there will be a console error, but in my scenario, I am trying to have a modal display with different info in it similar buttons are clicked with the same class name
for example
<div class="source">
<h1 data-target="2"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="source">
<h1 data-target="3"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="modal hide">
<div id="modalOuput"></div>
</div>
JS (I already have the modal showing up, my problem would be to have the modal display with unique identifiers in the modal also display for example)
const modalOutput = document.querySelector('#modalOutput');
const sourceData = document.querySelector('.source').getAttribute('data-target);
modalOutput.textContent = sourceData
thank you
$(document).ready(function(){
$("#modalOutput").on('show.bs.modal', function(e){
var button = $(e.relatedTarget);
var dToPopulate = button.data('whatever');
var modal = $(this);
modal.find('.modal-body').html(dToPopulate);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="modalOutput" 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"><!-- data-whatever attribute of selected button--></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="source">
<h1></h1>
<button data-whatever="2" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
<div class="source">
<h1></h1>
<button data-whatever="3" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
The code will select the value of data-whatever and put it into modalOutput.
These is my javascript function i want to append the SEARCHID in my bootstrap model form.
How to i get that id in my bootstrap model form
These is my bootstrap model hidden field
<input type="hidden" name="ID" value="ID" id="searchid">
This is my javascript function in these function i get my id when user click on button
function searchitem(id)
{
var SEARCHID = id;
console.log(SEARCHID);
}
<a class="btn btn-primary text-capitalize ct-js-btnEdit--Agents btn-sm" id="<?php echo $DETAILS->id;?>" value="<?php echo $DETAILS->id;?>" onclick="searchitem(this.id);"><i class="fa fa-pencil"></i> Edit</a>
Try the below solution, comments added to explain the process
//on button click
$("#yourPHPId").on("click", function() {
//get the id from the button element
var searchId = $("#searchid").attr("id");
//append to modal-body (inside p tag if preferred)
$(".modal-body p").append("Hidden field id = " + "<b>" + searchId + "</b>");
});
//on modal hide
$('#myModal').on('hidden.bs.modal', function() {
//empty the modal body (<p>) contents
$(".modal-body p").empty();
})
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="hidden" name="ID" value="ID" id="searchid">
<!-- Trigger the modal with a button !-->
<!-- Insert your PHP functions here as required, they have been taken out in order for the code snippet to work !-->
<a class="btn btn-primary" id="yourPHPId" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil" ></i> Edit</a>
<!-- Modal !-->
<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></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to change the modal-body text when modal trigger button is clicked . But modal is openning but modal-body text is not changing .
This is the code for modal
<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal" data-target="#myModal">Register</button>
<!-- Modal -->
<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>
</div>
</div>
Then source for preventing default event
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
Why alert('hello i am jquery'); line is not executing ?
This may happen when your HTML takes precedence over jquery since your button specifes the target modal to open with the following attributes
data-remote="false" data-toggle="modal" data-target="#myModal"
Remove those and then the jquery will be fine
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info open-modal" >Register</button>
<!-- Modal -->
<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>
</div>
</div>
To trigger a modal to show programmatically, you can use the following:
$('#myModal').modal('show');
You can also have an event handler being triggered and add your code in there:
$('#myModal').on('shown', function() {
alert('hello i am jquery');
})
In my case: Below code worked properly if the case fails:
$('#myModal').modal({show: 'false'});
$(window).load(function(){
var value = $( '#event-id' ).text();
$(window).ready(function(){
$('#send-event').click(function(){
// alert('clicked');
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>
Here's the code which I was developed for append the text from the input which is in modal, the problem is the li tag is appending but not the text in it.
I really not able to understand what mistake I did, can any one explain what mistake am doing.
Here's the Fiddle link.
As mentioned in the other answer, you are working with an input element, so you should use val instead of text. However, that alone won't fix this because the variable is being defined outside of the function.
It should be inside the click function, so it's updated during every click event. To clear the input , simply set the value to n empty string.
$(window).load(function(){
$(document).ready(function(){
$('#send-event').click(function(){
var value = $( '#event-id' ).val();
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
$("#event-id").val("");
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>
change
var value = $( '#event-id' ).text();
to
var value = $( '#event-id' ).val();
Because that $( '#event-id' ) will change between $('#send-event') clicks, you probably don't want to cache it's value — and it is its .val() you want, not the .text() — outside of the click handler. Otherwise, the $( '#event-id' ).val() will only ever be whatever it was when the page first loaded.
$(window).load(function(){
$(window).ready(function(){
$('#send-event').click(function(){
var value = $( '#event-id' ).val();
// alert('clicked');
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>
I am using Javascript to generate html like this
for (var count = 0; count < data.length; count++) {
var provider = data[count].Provider;
var icon_provider = provider.toLowerCase();
html=html+"some code here";
html = html + "<div class=\"icon\"><i class=\"fa fa-" + icon_provider + "\"></i></div>More info <i class=\"fa fa-arrow-circle-right\"></i></div></div>";
}
I am calling a function called "myFunction" when clicked.
function myFunction() {
$('#myModal').modal('show')
}
all this is in a indexInvoice.js file.
Now i have a index page which has all the scripts.
<!--javascript for the index page-->
<script type="text/javascript" src="js/IndexInvoice.js"></script>
<!--jQuery for modal window from bootstrap-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
and the div where html is generated through javascript(from indexInvoice.js) is this.
<div id="row1" class="row">
<!--Modal window-->
<div class="modal fade" data-target="#myModal" 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">
this is modal window
</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>
</div><!-- /.row -->
The div has a std modal window code from bootstrap.
Now the Issue is when I click the that element, I am not able to get the modal window. Although when a put a alert in myFunction it shows the alert.
it should be $('#myModal').modal("show"); check the double quotes