table sorter pagination doesn't work - javascript

I try to repeate actions from following article:
http://code.tutsplus.com/tutorials/introduction-to-tablesorter--cms-22095
Now I have following code:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Tablesorter Demo - Jeff Reifman</title>
<script type="text/javascript" src="/resources/js/__jquery.tablesorter/jquery-latest.js"></script>
<script src="<c:url value='/resources/js/__jquery.tablesorter/jquery.tablesorter.min.js'/>"></script>
<link rel="stylesheet" href="/resources/css/blue/style.css" type="text/css" media="print, projection, screen" />
</head>
<body>
<h1>Tablesorter Demo</h1>
<p>Home | Pager | Ajax | Back to Tuts | Follow #reifman</p>
<p>Sortable table of domains for sale.</p>
<table id="domainsTable" class="tablesorter">
<thead>
<tr>
<th>Domain name</th>
<th>gTld</th>
<th>Category</th>
<th>Price</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr><td>geogram.co</td><td>co</td><td>Internet</td><td>$49</td><td>Purchase</td></tr>
<tr><td>newscloud.com</td><td>com</td><td>News</td><td>$19999</td><td>Purchase</td></tr>
<tr><td>popcloud.com</td><td>com</td><td>Music</td><td>$14999</td><td>Purchase</td></tr>
<tr><td>geogram.com</td><td>com</td><td>Internet</td><td>$1999</td><td>Purchase</td></tr>
<tr><td>handwave.com</td><td>com</td><td>Internet</td><td>$3499</td><td>Purchase</td></tr>
<tr><td>newsclouds.com</td><td>com</td><td>News</td><td>$2999</td><td>Purchase</td></tr>
<tr><td>publishingwithwordpress.com</td><td>com</td><td>Internet</td><td>$4999</td><td>Purchase</td></tr>
<tr><td>teamgirl.com</td><td>com</td><td>Shopping</td><td>$1999</td><td>Purchase</td></tr>
<tr><td>customlife.com</td><td>com</td><td>Internet</td><td>$1499</td><td>Purchase</td></tr>
<tr><td>givingspace.com</td><td>com</td><td>Internet</td><td>$1499</td><td>Purchase</td></tr>
<tr><td>lifestick.com</td><td>com</td><td>Internet</td><td>$1499</td><td>Purchase</td></tr>
<tr><td>mainstory.com</td><td>com</td><td>News</td><td>$1299</td><td>Purchase</td></tr>
<tr><td>connectedyogi.com</td><td>com</td><td>Yoga</td><td>$999</td><td>Purchase</td></tr>
<tr><td>completeswift.com</td><td>com</td><td>Technology</td><td>$499</td><td>Purchase</td></tr>
<tr><td>gettingstartedwithswift.com</td><td>com</td><td>Programming</td><td>$499</td><td>Purchase</td></tr>
<tr><td>professionalswift.com</td><td>com</td><td>Programming</td><td>$499</td><td>Purchase</td></tr>
<tr><td>ultimateswift.com</td><td>com</td><td>Programming</td><td>$499</td><td>Purchase</td></tr>
<tr><td>surfarea.com</td><td>com</td><td>Sports</td><td>$699</td><td>Purchase</td></tr>
<tr><td>carestrategies.com</td><td>com</td><td>Healthcare</td><td>$599</td><td>Purchase</td></tr>
<tr><td>commontunes.com</td><td>com</td><td>Music</td><td>$499</td><td>Purchase</td></tr>
<tr><td>filecross.com</td><td>com</td><td>Internet</td><td>$499</td><td>Purchase</td></tr>
<tr><td>filesquare.com</td><td>com</td><td>Internet</td><td>$499</td><td>Purchase</td></tr>
<tr><td>uwlink.com</td><td>com</td><td>Social</td><td>$299</td><td>Purchase</td></tr>
<tr><td>commonblogs.com</td><td>com</td><td>Technology</td><td>$149</td><td>Purchase</td></tr>
<tr><td>commonsites.com</td><td>com</td><td>Internet</td><td>$149</td><td>Purchase</td></tr>
<tr><td>efltr.com</td><td>com</td><td>Technology</td><td>$249</td><td>Purchase</td></tr>
<tr><td>emailthewhitehouse.com</td><td>com</td><td>Politics</td><td>$99</td><td>Purchase</td></tr>
<tr><td>hong2.com</td><td>com</td><td>Misc</td><td>$249</td><td>Purchase</td></tr>
<tr><td>jetcitynews.com</td><td>com</td><td>News</td><td>$99</td><td>Purchase</td></tr>
<tr><td>listshield.com</td><td>com</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>mailfilterapp.com</td><td>com</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>mysticspa.com</td><td>com</td><td>Healthcare</td><td>$99</td><td>Purchase</td></tr>
<tr><td>oxygengirl.com</td><td>com</td><td>Shopping</td><td>$99</td><td>Purchase</td></tr>
<tr><td>thecompletemac.com</td><td>com</td><td>Shopping</td><td>$99</td><td>Purchase</td></tr>
<tr><td>parkingnotes.com</td><td>com</td><td>Internet</td><td>$79</td><td>Purchase</td></tr>
<tr><td>fifteenideas.com</td><td>com</td><td>Misc</td><td>$69</td><td>Purchase</td></tr>
<tr><td>geoletters.com</td><td>com</td><td>Internet</td><td>$69</td><td>Purchase</td></tr>
<tr><td>identitycircle.com</td><td>com</td><td>Internet</td><td>$69</td><td>Purchase</td></tr>
<tr><td>readyfilm.com</td><td>com</td><td>Shopping</td><td>$69</td><td>Purchase</td></tr>
<tr><td>stampfree.com</td><td>com</td><td>Shopping</td><td>$69</td><td>Purchase</td></tr>
<tr><td>tpmemo.com</td><td>com</td><td>Misc</td><td>$69</td><td>Purchase</td></tr>
<tr><td>geomailapp.com</td><td>com</td><td>Internet</td><td>$49</td><td>Purchase</td></tr>
<tr><td>geospac.es</td><td>es</td><td>Internet</td><td>$499</td><td>Purchase</td></tr>
<tr><td>cycling.io</td><td>io</td><td>Sports</td><td>$999</td><td>Purchase</td></tr>
<tr><td>sociables.io</td><td>io</td><td>Shopping</td><td>$1499</td><td>Purchase</td></tr>
<tr><td>breakups.io</td><td>io</td><td>Social</td><td>$799</td><td>Purchase</td></tr>
<tr><td>meetingplanner.io</td><td>io</td><td>Internet</td><td>$1999</td><td>Purchase</td></tr>
<tr><td>starwars.io</td><td>io</td><td>Entertainment</td><td>$799</td><td>Purchase</td></tr>
<tr><td>acupuncture.io</td><td>io</td><td>Healthcare</td><td>$599</td><td>Purchase</td></tr>
<tr><td>gardening.io</td><td>io</td><td>Gardening</td><td>$699</td><td>Purchase</td></tr>
<tr><td>marriage.io</td><td>io</td><td>Social</td><td>$599</td><td>Purchase</td></tr>
<tr><td>startrek.io</td><td>io</td><td>Entertainment</td><td>$399</td><td>Purchase</td></tr>
<tr><td>thaimassage.io</td><td>io</td><td>Healthcare</td><td>$449</td><td>Purchase</td></tr>
<tr><td>acro.io</td><td>io</td><td>Yoga</td><td>$349</td><td>Purchase</td></tr>
<tr><td>acroyoga.io</td><td>io</td><td>Yoga</td><td>$399</td><td>Purchase</td></tr>
<tr><td>easylist.io</td><td>io</td><td>Technology</td><td>$299</td><td>Purchase</td></tr>
<tr><td>favorites.io</td><td>io</td><td>Internet</td><td>$299</td><td>Purchase</td></tr>
<tr><td>healing.io</td><td>io</td><td>Healthcare</td><td>$249</td><td>Purchase</td></tr>
<tr><td>snowboarder.io</td><td>io</td><td>Sports</td><td>$349</td><td>Purchase</td></tr>
<tr><td>snowboarding.io</td><td>io</td><td>Sports</td><td>$399</td><td>Purchase</td></tr>
<tr><td>fwb.io</td><td>io</td><td>Social</td><td>$249</td><td>Purchase</td></tr>
<tr><td>herbs.io</td><td>io</td><td>Healthcare</td><td>$199</td><td>Purchase</td></tr>
<tr><td>maryjane.io</td><td>io</td><td>Healthcare</td><td>$249</td><td>Purchase</td></tr>
<tr><td>outlets.io</td><td>io</td><td>Shopping</td><td>$199</td><td>Purchase</td></tr>
<tr><td>cloudmail.io</td><td>io</td><td>Internet</td><td>$199</td><td>Purchase</td></tr>
<tr><td>swingers.io</td><td>io</td><td>Social</td><td>$149</td><td>Purchase</td></tr>
<tr><td>imadethis.io</td><td>io</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>skymail.me</td><td>me</td><td>Internet</td><td>$69</td><td>Purchase</td></tr>
<tr><td>tenideas.net</td><td>net</td><td>Internet</td><td>$249</td><td>Purchase</td></tr>
<tr><td>activist.ninja</td><td>ninja</td><td>Activism</td><td>$399</td><td>Purchase</td></tr>
<tr><td>federal.ninja</td><td>ninja</td><td>Politics</td><td>$299</td><td>Purchase</td></tr>
<tr><td>newscloud.org</td><td>org</td><td>News</td><td>$599</td><td>Purchase</td></tr>
<tr><td>communitystarter.org</td><td>org</td><td>Internet</td><td>$399</td><td>Purchase</td></tr>
<tr><td>tenideas.org</td><td>org</td><td>Internet</td><td>$349</td><td>Purchase</td></tr>
<tr><td>whistlerplaces.org</td><td>org</td><td>Travel</td><td>$299</td><td>Purchase</td></tr>
<tr><td>commonbits.org</td><td>org</td><td>Technology</td><td>$299</td><td>Purchase</td></tr>
<tr><td>commonroad.org</td><td>org</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>commontunes.org</td><td>org</td><td>Music</td><td>$99</td><td>Purchase</td></tr>
<tr><td>parentbuzz.org</td><td>org</td><td>Social</td><td>$99</td><td>Purchase</td></tr>
<tr><td>sharecast.org</td><td>org</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>socialscore.org</td><td>org</td><td>Internet</td><td>$99</td><td>Purchase</td></tr>
<tr><td>commonfilms.org</td><td>org</td><td>Entertainment</td><td>$69</td><td>Purchase</td></tr>
<tr><td>commonmedia.org</td><td>org</td><td>Entertainment</td><td>$69</td><td>Purchase</td></tr>
<tr><td>commonprose.org</td><td>org</td><td>Internet</td><td>$69</td><td>Purchase</td></tr>
<tr><td>geoclouds.org</td><td>org</td><td>Internet</td><td>$69</td><td>Purchase</td></tr>
<tr><td>identitycircle.org</td><td>org</td><td>Internet</td><td>$49</td><td>Purchase</td></tr>
<tr><td>tenideas.us</td><td>us</td><td>Activism</td><td>$599</td><td>Purchase</td></tr>
<tr><td>majorhomes.us</td><td>us</td><td>Shopping</td><td>$299</td><td>Purchase</td></tr>
<tr><td>peoplefirst.us</td><td>us</td><td>Activism</td><td>$199</td><td>Purchase</td></tr>
<tr><td>geogram.us</td><td>us</td><td>Internet</td><td>$49</td><td>Purchase</td></tr>
<tr><td>idealog.us</td><td>us</td><td>Misc</td><td>$49</td><td>Purchase</td></tr>
<tr><td>newsi.us</td><td>us</td><td>News</td><td>$49</td><td>Purchase</td></tr>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
</body>
<script>
$(document).ready(function()
{
$("#domainsTable").tablesorter({sortList: [[3,1],[2,0]]});
}
);
</script>
</body>
</html>
Sorting is working but bottom buttons looks like this
and doesn't work(is not clickable components).
What do I wrong?

First off, it looks like you're using tablesorter v2.0.5 (the original), but using the some pager HTML from my fork of tablesorter; it's not that much different.
Anyway, what's missing is the call to the tablesorter pager addon; it's under "Example 2" of the tutsplus article you posted:
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>

Related

How can one use Vue.js code from Codepen?

I want to use this code from Codepen. So, I right clicked on the result frame and chose View Frame source. Then I copied the source code and pasted it in my own text-editor.
But my webpage shows the codepart as blank.
I copied the source starting from <style> till </body> and inserted in my component.
When using the ZIP instead, I don't know how to use the code, because I just have a component and the ZIP contains a script.js and a style.css
What am I doing wrong?
Ok here's copy-and-pasting for dummies:
This is the html part:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table class="dayparts table">
<thead>
<tr>
<td class="cell-label presets-label"></td>
<td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
<select v-model="selected" #change='clearAll();selectedFunc()'>
<option value="">Select a Preset</option>
<option value="0">None</option>
<option value="1">Afternoons</option>
<option value="2">Evenings</option>
<option value="3">Mornings</option>
<option value="4">Weekdays</option>
<option value="5">Weekends</option>
<option value="6">Weekends including Friday</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td class="cell-label am-label" colspan="12">AM</td>
<td class="cell-label pm-label" colspan="12">PM</td>
</tr>
<tr class="hour-row">
<td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
</td>
</tr>
</thead>
<tbody #mousedown='mouseDown' #mouseup='mouseUp' #mousemove='mouseMove'>
<tr class="day" v-for="day in days">
<td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
v-on:click='activateDay'>{{day.dayName}}</td>
<td class='dayparts-cell' v-bind:value="hour.hour" data='day'
v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This is the "head":
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
1) Remove <link rel="stylesheet" href="style.css"> and add <style></style> in the same place. Fill it with the content of the css-part.
2) Replace "vue.js" in <script src="vue.js"></script> with "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" when you're in development or with "https://cdn.jsdelivr.net/npm/vue#2.6.11" for production.
Then go to the bottom of your html-code and find <script src="main.js"></script>. Remove it and add an empty <script></script> instead. Fill it with the copied Javascript part.
Now your page should run properly.
Tip: Do not use Ctrl + A in Codepen to select everything since it selects a few extra words then.

How to update a number in HTML by incrementing it when a new text input is submited?

I need to add +1 to the total number of tweets when a new tweet (text input) is submitted:
Here is my HTML:
<!DOCTYPE html>
<html lang="en" data-ng-app="Twitter">
<head>
<meta charset="UTF-8">
<title>Twitter Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="profileArea">
<img id="profile" src="http://potdeli.webs.com/twitter.png" alt="tweet">
<p style="color:white;"><strong>Tweeto</strong></p>
<p>#TweetoTwiteech</p>
<table style="width:100%">
<tr>
<th>Tweets</th>
<th colspan="1">Following</th>
<th colspan="1">Followers</th>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="tweets" ng-app="" ng-controller="TweetsController">
<form method="POST" action="" ng-submit="addTweet()">
<h2>Compose new tweet</h2>
<input name="tweet" type="text" ng-model="newTweet" ng-maxlength="140" placeholder="What's happening?">
<button type="submit" value="addTweets">Tweet!</button>
</form>
<div class="tweetDisplay" ng-repeat="tweet in tweets track by $index">{{ tweet }}
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js">
</script>
<script src="tweets.js">
</script>
</body>
</html>
And here is the JavaScript:
function TweetsController($scope) {
$scope.tweets = ["First sample tweet", "Second sample tweet"];
$scope.addTweet = function() {
if(this.newTweet) {
$scope.tweets.push($scope.newTweet);
$scope.newTweet = "";
}
};
}
I tried a couple of things but I didn't get the desired result, also I checked out a few similar Stack Overflow questions but I wasn't able to get it figured out.
Oh man, I can't believe what a half-wit I am! I just added:
<td>{{ tweets.length }}</td>
Instead of number 2, as the number of tweets and placed this on the body:
<body ng-app="" ng-controller="TweetsController">
Thanks to all for pointing me in the right direction!!
Your table markup is outside of your controller scope. Make it part of your controller scope, and then you could print a counter value there, such as $scope.tweets.length

jQuery is hiding the wrong table

I am using some code to hide/reveal tables. All is well except I cannot find how to stop all tables being effected by this code. I have table 1, table 2 and table X, I want table X to be present at all times, however I cannot figure how to do this.
<!DOCTYPE HTML">
<html>
<head>
<link rel="stylesheet" type="text/css"/>
<title>Add device</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
\$(document).ready(function(){
\$("#myDropdown").change(function(){
target = \$\(this\).val();
\$(".tables").hide();
if(target != 'none'){
\$("#" + target).show();
}
return false;
});
});
</script>
<style type="text/css">
table{
width:100%;
display:none;
}
#content{
width:100%;
}
</style>
</head>
<table id='none' class='tables' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<body>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables'>
*********TABLE 2***************
</table>
</form>
</body>
</html>
I've tried playing around with classes and id's to no avail.
Add class to table you don't want to hide and use css .not selector.
Link to fiddle
Code:
HTML:
<table id='none' class='tables no-hide-please' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
<tr>
<td>*********TABLE 1***************</td>
</tr>
</table>
<table id='t2' align='center' class='tables'>
<tr>
<td>*********TABLE 2***************</td>
</tr>
</table>
JS:
$(document).ready(function(){
$("#myDropdown").change(function(){
target = $(this).val();
$(".tables:not(.no-hide-please)").hide();
if(target != 'none'){
$("#" + target).show();
}
});
});
CSS:
table{
width:100%;
//display:none;
}
#content{
width:100%;
}
You're hiding based on the class, not the ID. The class is used on each table, which is why all your tables are being hidden.
Change the jQuery selector to bind to the id of the table you want to hide, and only that one will be hidden.
To hide the first and second table, you can select both.
$("#t1, #t2").hide();
Or create a class you can reuse called "hidable" and show/hide that. You can then apply that class to tables you want that behaviour to apply to.
$(".hideable").hide();
<table id='t1' align='center' class='tables hideable'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables hideable'>
*********TABLE 2***************
</table>
Add a class to the tables that you wish to be visible permanently:
<table id='none' class='tables no_hide' width='100%'>
Change you JQuery selector to this:
$(".tables:not(.no_hide)").hide();
$('.tables:not(#none)').hide();

jquery-1.3.1.min.js not working when jquery-1.10.2.js was called

i need those both js file, one for adding row, and another for tablesort and pager.
my problem neither script works, if they are both called.
this is my code so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script >
$(document).ready(function()
{
$(document).on("click","#tdAdd",function(){
var newRow = $("<tr>");
var cols="";
cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
cols+='<td><input type="text" value="enter data here"/></td>';
newRow.append(cols);
newRow.insertAfter($(this).closest("tr"));
});
});
</script>
</head>
<body>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Age</th>
<th>Premium Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mendes</td>
<td>Domnic</td>
<td>domnic#gmail.com</td>
<td>29</td>
<td>5500</td>
</tr>
<tr>
<td>
<input type="button" id="tdAdd" value="+"/>
</td>
<td>
<input type="button" class="tdDelete" value="-"/>
</td>
<td>
<input type="text" name="name" value="anything"/>
</td>
</tr>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option value="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
}
);
</script>
</body>
</html>
if i add this,for my defer script. neither script wont work. :
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>
EDIT :
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var j1 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
var j2 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script >
$(document).ready(function()
{
j2("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
j1("#tdAdd").click(function(){
X();
});
});
function X(){
var newRow = $("<tr>");
var cols="";
cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
cols+='<td><input type="text" value="enter data here"/></td>';
newRow.append(cols);
newRow.insertAfter($(this).closest("tr"));
}
This is the current script i tried and when i try to run it firebug says :
TypeError: $ is undefined
$.extend({
jquery....rter.js (line 89) // jquery.tablesorter.js
TypeError: $ is undefined
$.extend((
jquery....ager.js (line 2) // jquery.tablesorter.pager.js
TypeError: $ is not a function
$(document).ready(function()
tableso...2).html (line 19) // tablesorter(2).html
I already solve this problem before,
Well, my fault, but when i redownload the jquery-1.3.1.min.js file, both js file is working fine. So, i advice
to double check your sources and its file size when you attempt to use plug in and encounter the same problem.
You cannot load two versions of jQuery without assigning each one different symbols using syntax like this:
var myJQ = jQuery.noConflict();
on the first one before the second one is loaded and then using only the myJQ variable to refer to the first one (see answer here).
Even better would be to make your two plugins both work with the same version of jQuery so you can load just one and not have to do this extra gymnastics.
If the "adding row stuff" you refer to is just the jQuery code you have in your question, then that should work just fine with 1.10.2 so you should be able to use only that version. I'd suggest you just get rid of the 1.3.1 version of jQuery and use only the 1.10.2 version. It should meet both your needs.
FYI, I do some one error in your code. You are trying to add duplicate id="tdAdd" <input> tags which you should not do. If you want to have more than one element like that, then use a class, not an id.
Use Like
Use <script>jQuery.noConflict();</script> above one of your jquery and replace the $ with jQuery
Try With
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>//Now replace this jQuery with $

jQuery: Offset and position return same value

I tried to detect an element inside a table. However, jquery return the same value for both offset and position. What I want is the position of the element relative to the table column.
Why is my jQuery offset and position both return the same value? The value that is returned is actually the offset value. How can I get the position value?
Thanks.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test offset & position</title>
</head>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<style type="text/css">
table.table tbody tr td{
vertical-align:middle;
}
</style>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
</tr>
</thead>
<tbody>
<tr>
<td><select name="select" class="detect">
<option>100</option>
<option>20</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="cover"></div></td>
<td><p>Internet
Explorer 4.0</p>
<p>dsfds</p>
<p>df</p></td>
<td><textarea class="detect">4444 444
dsfdsfdsf ds fds f
dsf
ds
fsd
fs</textarea></td>
<td><div><textarea class="detect">4</textarea></div></td>
</tr>
</tbody>
</table>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
$(".detect").focus(function(e) {
console.log("height:"+$(this).height()+" width:"+$(this).width()+" position top:"+$(this).position().top+" position left:"+$(this).position().left +" offset top:"+$(this).offset().top+" offset left:"+$(this).offset().left);
});
});
</script>
</body>
</html>
Try to add position:relative; to parent element
position returns the position relative to the offset parent, and offset does the same relative to the document. Obviously, if the document is the offset parent, which is often the case, these will be identical.

Categories