Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've been trying to find an error in my HTML, jquery, or even CSS which is preventing my jQuery from even loading, to no avail. Any help is appreciated
Code
$(document).ready(function() {
'use strict';
$("#IndexContent").hide();
$("#BidListMainMenu").mouseenter(function() {
$(this).slideToggle();
});
$("Table").mouseleave(function() {
$(this).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jQuery.js"></script>
<title>Main Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="IndexBackgroundImage"></div>
<body id="Index">
<div id="IndexLogoDiv">
<img src="images/logo.gif" alt="Logo" />
</div>
<center>
<div id="IndexContent">
<h1>Intranet</h1>
<table>
<tbody>
<tr>
<td class="mainButton">
<img alt="Bid List" src="images/IndexBidList.png" />
</td>
</tr>
<div id="BidListMainMenu">
<td>
<table>
<tbody>
<tr>
<td colspan="1">
<a href="BidList/CurrentBid.php">
<img alt="Bid List alteration" src="images/BidList.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="Bidlist/NewProject.php">
<img alt="Add New Project" src="images/AddNewProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/EditProject.php">
<img alt="Edit Project" src="images/EditProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Priorities.php">
<img alt="Priorities" src="images/SetPriorities.png" />
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Maintenence.php">
<img alt="Edit Project" src="images/Maintenence.png" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</div>
<tr>
<td>
<img alt="Bid List alteration" src="images/IndexMaintenence.png" />
</td>
</tr>
<tr>
<td>
<a href="">
<img alt="Wordpress Page" src="images/IndexWordpress.png" />
</td>
</tr>
</tbody>
</table>
</div>
<div id="IndexFooterDiv">
<img src="images/address.gif" alt="Address" />
</div>
</center>
</body>
</html>
There is no evidence of the jQuery even starting, which is unusual, because it is linked, and I imported the library. I can post the css if it is helpful. I put the first $("#IndexContent").hide() test case there to check if it loaded. However nothing worked. Any help is appreciated, thank you.
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
should be:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You have a wrong src attribute for cdn source:
src="code.jquery.com/jquery-1.11.3.min.js"
which should be:
src="//code.jquery.com/jquery-1.11.3.min.js" // will look https || http
and you have a typo for the :
$(Document).ready // you can see the uppercase D in the document
first, I would change the html <script src = >to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
After, you typed
$(Document).ready(function () {});
Change that Document to document
Related
i linked my html with js and css but my code is not working. i tried using a class name for all the table cells but it still did not work
my html file:
!DOCTYPE html>
<html lang="en" dir="ltr">
<link rel="stylesheet" href="something.css">
<!--bootstrap library-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/4.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>tic tac toe</title>
</head>
<body>
<div class="jumbotron jumbotron-bg">
<h1 class="display-4 text-color" style="font-weight: 500 ">WELCOME</h1>
<p class="lead">play tic tac toe</p>
<hr class="my-4">
<p></p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">start</a>
</p>
</div>
</div>
<table>
<tr>
<td></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<script src="tictac.js">
</script>
</body>
</html>
ignore start button
i linked this with js code for making changes above code worked correctly and printed a 3x3 table with empty cells with help of css
my js code:
var table = document.querySelectorAll('td')
function click(){
if(this.textComment==""){
this.textComment="o"
}
if (this.textComment=="o") {
this.textComment=""
}
if (this.textComment=="") {
this.textComment="x"
}
}
for (var i = 0; i < table.length; i++) {
table[i].addEventListener("click", click())
}
On first glance I can see that you need to bind the function click and not it's execution result. Change your event listener line to table[i].addEventListener("click", click).
Also I think you meant to use textContent and not textComment inside click.
I am developing a Flask application, I have an HTML template in which I have two tables, for which I want to use the datatable plugin. Here is the code of my HTML template with the tables
<doctype html>
<html>
<head>
<title> car_name </title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='aesthetic.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
$(document).ready( function () {
$('#table_1').DataTable();
$('#table_2').DataTable();
} );
</script>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Shops">Shops</a>
</div>
<div id="bigbox">
<table id="table_1" border="1" style="background: white">
<thead>
<tr>
<th><b>Phosphosite ID</b></th>
<th><b>Protein</b></th>
<th ><b>Gene</b></th>
<th><b>Residue</b></th>
</tr>
</thead>
<tbody>
{% for x in searchshops %}
<tr>
<td> {{x.NAME}} </td>
<td> {{x.RESOURCES}} </td>
<td> {{x.CARS}} </td>
<td> {{x.BRANDS}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Cars">Cars</a>
</div>
<div class="bigbox">
<table id="table_2" border="1" style="background: white">
<tr>
<th><b>Name</b></th>
<th ><b>Shop</b></th>
</tr>
{% for x in searchcars %}
<tr>
<td> {{x.CAR}}</td>
<td> {{x.Shop}} </td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
(searchshops and searchcars are SQLAlchemy queries to a database, in my Flask python script)
The datatable attributes (search bar, sort columns), show on the first table but not the second one.
I have also tried the following script, (having added class="display" after both tables, based on this example https://datatables.net/examples/basic_init/multiple_tables.html )
<script>
$(document).ready(function() {
$('table.display').DataTable();
} );
</script>
But I have the same problem.
How can I apply the datatable plugin to both tables?
Thank you.
I think it's a bug that it only applies to the first table and not on the succeeding table/s regardless if the first table is initialized or not with DataTable. I've tried it, it's the same.
Maybe you can use this concept. The datatables were rendered serverside.
multitable serverside rendering
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?
Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().
Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.