Nevermore Nevermore - 4 years ago 138
Javascript Question

Why is the modal not popping up on click of this div?



$(function() {
$("#pagination a").trigger('click'); // When page is loaded we trigger a click


$('body').on('click','div.well well-sm',function(){
var list = $(this);
$('#myModal .modal-title').html('User Information');
$('#myModal .modal-body').html(list.html());
//$('#myModal .modal-body p').removeClass('hidden');
// Change this bit!
$('#myModal').modal('show');
});


});


$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
var page = this.id; // Page number is the id of the 'a' element
var pagination = ''; // Init pagination

$('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
// We set up the per_page var at 4. You may change to any number you need.


var displayData='';
var articleList = [{profile_id : "1", first_name : "Jack", surname: "Crow"}];


for (var j = 0; j < articleList.length; j++) {
var gotData = articleList[j];

displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
// displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
displayData += '</div>';

$('#articleArea').html(displayData);//replacing img with data
}

// Pagination system
if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
else pagination += '<div class="cell"><a href="#" id="1">First</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Previous</span></a></div>';

for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
if (i >= 1 && i <= data.numPage) {
pagination += '<div';
if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
pagination += '</div>';
}
}

if (page == data.numPage){
pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
}
else {
pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Next</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Last</span></a></div>';
}

$('#pagination').html(pagination); // We update the pagination DIV

return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
<title>Pagination tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css" type="text/css">

<style>
#pagination div { display: inline-block; margin-right: 5px; margin-top: 5px }
#pagination .cell a { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; text-decoration:none; border: 1px solid #d3d3d3; background-color: #f8f8f8; }
#pagination .cell a:hover { border: 1px solid #c6c6c6; background-color: #f0f0f0; }
#pagination .cell_active span { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; border: 1px solid #c6c6c6; background-color: #e9e9e9; }
#pagination .cell_disabled span { border-radius: 3px; font-size: 11px; color: #777777; padding: 8px; border: 1px solid #dddddd; background-color: #ffffff; }
</style>
</head>

<body>
<div id="articleArea"></div> <!-- Where articles appear -->


<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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


<!-- Where pagination appears -->
<div id="pagination">
<!-- Just tell the system we start with page 1 (id=1) -->
<!-- See the .js file, we trigger a click when page is loaded -->
<div><a href="#" id="1"></a></div>
</div>

</body>
</html>





I have written this JS code to show data from the server and show it in the form of . Each div on click is supposed to show a modal. However, here no clicks are encountered. I have written the on click on the div which are supposed to show the modals. Please help.

Answer Source

The code looks okay. But only thing is, you need to invoke the modal window this way:

Update

You have used 'div.well well-sm' missing a . before well-sm:

//----------------------------v Give a dot here.
$('body').on('click','div.well.well-sm',function(){
    var list = $(this);
    $('#myModal .modal-title').html('User Information');
    $('#myModal .modal-body').html(list.html());
    $('#myModal .modal-body p').removeClass('hidden');
    // Change this bit!
    $('#myModal').modal('show');
});

Working Output: http://output.jsbin.com/kebupakika

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download