APIs used
- Parse.js: 1.4.2
- JQuery: 1.11.2 and 1.10.3 (U.I.)
- Twitter Bootstrap: 3.3.4
I am designing a business website and I got stuck on this small section. What I am trying to write is a bootstrap table which is populated by Parse.com to present some information. A user should be able to click on the rows and edit/delete them at will. I don't need to figure out the edit/removal process; what I need is the first step of detecting an onclick on a given row. I have tried a variety of options in JQuery such as
$("table tr").click(function(){
alert (this.rowIndex);
});
and
$('.dashboard_nav_team_settings_content').find('tr').click( function(){
alert('You clicked row '+ ($(this).index()+1) );
});
However, neither work. By "not work", I mean the onclick listener is never fired to begin with. I tried referencing be "any table" to the class name I gave "bowlsettingtable". Below is an image of the populated table.
Part of the problem might reside in the fact that I am populating each row dynamically via Parse.com but I thought it shouldn't have an issue at all if I give the generic row a class name and reference it in my onclick listener.
Below is a stripped down HTML snippet regarding the code I am working with. I am populating everything into the "dashboard_nav_team_settings_content" div tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom/dashboardMain.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- timepicker -->
<!-- http://jonthornton.github.io/jquery-timepicker/ -->
<link rel="stylesheet" type="text/css" href="css/custom/jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" href="css/custom/bootstrap-datepicker.css" />
<link rel="stylesheet" type="text/css" href="css/custom/site.css" />
</head>
<body>
<!-- navigation bar at the top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="" id="dashboard_home_title_link">Ethics Bowls</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="dashboard_help">Help</a></li>
<li><a href="" id="dashboard_log_out">Log Out</a></li>
</ul>
<!--<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form> -->
</div>
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<!-- Team Settings CONTENT -->
<div id="dashboard_nav_team_settings_content">
</div><!--/ Team Settings CONTENT -->
</div><!--/.col-xs-12.col-sm-9-->
<!-- left side navigation bar for content area -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item" id="dashboard_nav_home">Home</a>
<a href="#" class="list-group-item" id="dashboard_nav_ethic_bowls">Create and Manage Bowls</a>
<a href="#" class="list-group-item" id="dashboard_nav_team_settings"> Bowl Settings</a>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© </p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/parse/dashboardMainjs.js"></script>
<script type="text/javascript" src="js/parse/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/parse/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/parse/site.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Below is a stripped down version of the Jquery/Javascript file I am writing. The section I am dealing with is the "$("#dashboard_nav_team_settings").click(function(event)" which loads when I get on this specific page.
// global to help with editing ethic bowl objects
var row_data = [];
var rowNumber = 0;
var parseQueryList = [];
var userQueryList = [];
var editRowNumber = 0;
var currentObjectId = '';
var currentUser;
var createTitle;
var createLocation;
var createStartDate;
var createEndDate;
var studentImage = "images/dashboard_page/student.jpg";
var coachImage = "images/dashboard_page/coach.jpg";
var organizerImage = "images/dashboard_page/organizer.jpg";
// some of these ^ may be useless but I didn't want to spend forever deleting them to this snippet
$(function()
{
Parse.$ = jQuery;
Parse.initialize("KEY", "KEY");
setUp();
// <TRIED ALL OF THESE AND NONE WORKED>
$(".bowlsettingtable").on('click', function(e){
e.preventDefault();
alert($(this).closest('td').parent()[0].sectionRowIndex);
});
$("table tr").click(function(){
alert(this.rowIndex);
});
$('#dashboard_ethic_bowl_list').find('tr').click( function(){
alert('You clicked row '+ ($(this).index()+1) );
});
// </TRIED ALL OF THESE AND NONE WORKED>
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
$("#dashboard_nav_team_settings").click(function(event)
{
event.preventDefault();
//<TEAM SETTINGS PAGE>
for(var i = 0; i < parseQueryList.length; i++)
{
// how to truncate a string
var title = '';
title = parseQueryList[i].get('title');
var team_settings_content = "";
team_settings_content =
'<div class="panel panel-primary">' +
'<div class="panel-heading">' +
'<h3 class="panel-title" style="display:inline-block;">' + title + '</h3>'+
'<button type="button" class="btn btn-sm btn-default" style="position:relative; display:block; float:right; bottom:5px">Email All</button>' +
'<button type="button" class="btn btn-sm btn-info" style="position:relative; display:block; float:right; right: 10px; bottom:5px">Add</button>' +
'<p style="position:relative; display:block; float:right; right:20px"><i>Hint:</i> Click on any row to edit/delete it.</p>'+
'</div>' +
'<div class="panel-body">' +
'<div class="col-md-12 table-responsive">' +
'<table class="table table-striped table-hover bowlsettingtable">' +
'<thead>' +
'<tr>' +
'<th>First Name</th>' +
'<th>Last Name</th>' +
'<th>Role</th>'+
'<th>Email</th>' +
'<th>School</th>'+
'</tr>' +
'</thead>' +
'<tbody class="team_settings_row">';
var row = '';
var firstName = '';
var lastName = '';
var object = parseQueryList[i].get("organizer");
var objectTwo = parseQueryList[i].get("coach");
var objectThree = parseQueryList[i].get("student");
var coachObjects = [];
var studentObjects = [];
var role ='';
var outerNumber;
var school = '';
var email = '';
for(outerNumber = 0; outerNumber < 3; ++outerNumber)
{
role ='';
// ORGANIZERS
if(outerNumber == 0)
{
role = 'Organizer';
}
// coaches
else if(outerNumber == 1)
{
role = 'Coach';
object = [];
object = objectTwo;
}
// students
else{
role = 'Student';
object = [];
object = objectThree;
}
var q;
for (q = 0; q < object.length; ++q)
{
var t;
for(t = 0; t < userQueryList.length; ++t)
{
if(userQueryList[t].id == object[q])
{
firstName = userQueryList[t].get('firstName');
lastName = userQueryList[t].get('lastName');
school = userQueryList[t].get('school');
email = userQueryList[t].get('email');
row = row +
'<tr>' +
'<td>'+ firstName +'</td>' +
'<td>'+ lastName +'</td>' +
'<td>'+ role +'</td>' +
'<td>'+ '<a href="mailto:'+ email +'?Subject=Ethics Bowl:&body=body" target="_top">'+ email +'</a>' + '</td>'+
'<td>'+ school + '</td>' +
'</tr>';
}
}
}
}
var ending = '</tbody>' +
'</table>' +
'</div>' +
'</div>' +
'</div>';
$('#dashboard_nav_team_settings_content').append(team_settings_content + row + ending);
//</TEAM SETTINGS PAGE>
}
});
// declare simple log out
$("#dashboard_log_out").click(function(event)
{
event.preventDefault();
Parse.User.logOut();
});
currentUser = Parse.User.current();
if (currentUser)
{
// user is logged in
}
else
{
// show the signup or login page
}
});
function setUp()
{
// perform a query as the page loads to figure out all the events
currentUser = Parse.User.current();
$("#dashboard_home_title_link").text("Ethics Bowls: " + currentUser.get("firstName"));
var parseID = currentUser.id
var GameScore = Parse.Object.extend("ethicBowls");
var query = new Parse.Query(GameScore);
query.equalTo("userId", parseID);
query.find({
success: function(results)
{
// save it for later
parseQueryList = results;
// more code down here meant for other things
},
error: function(error)
{
alert("Error: " + error.code + " " + error.message);
}
});
var GameScore = Parse.Object.extend("_User");
var query = new Parse.Query(GameScore);
query.equalTo("school", currentUser.get('school')); // get all users within the same school as current user
query.find({
success: function(users) {
for (var i = 0; i < users.length; i++)
{
var object = users[i];
userQueryList = users;
}
},
error: function(error)
{
alert("Error: " + error.code + " " + error.message);
}
});
}
Tried to be thorough but if I am missing some information, I'm happy to help. Thanks in advance for all the help!
