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.
Related
I'm found on the internet a simple example (http://bl.ocks.org/ndarville/7075823) how to convert a .csv file into a table in HTML. I implemented the same example inside a container and it works really well. So, I decided to put its javascript code in an external file in order to be implemented in my application, but it is not working. I'm wondering why does don't work. I would appreciate id anyone could help me because I don't have any kind of experience with D3.
//-------------------------file myscript.js -------------------------------------//
function sTest(){
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#dataTable")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
}
//----------------------------file index.html -------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<script src="myscript.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="w3-container w3-cell-row w3-lobster">
<p class="w3-xxlarge">Data Table:</p>
</div> //container where should be contained a table
<div style="height:350px;" class="w3-cell-row">
<div id="dataTable" class="w3-container w3-cell w3-center w3-cell-middle w3-border w3-border-blue w3-round-xlarge">
</div>
<div style="width:320px;" class="w3-container w3-cell w3-cell-middle w3-border w3-border-green w3-round-xlarge">
<table class="w3-table w3-bordered">
<tr>
<th>$$Resistor\,(R):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Res" value="0" >
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_B):$$<th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resb" value="0">
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_C):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resc" value="0">
<label style="font:16px">$$\Omega$$</label></center></p></td>
</tr>
</table>
</div>
</div>
<p align="center"><input type="button" name="start" id="start" value="Start" onclick="sTest()" style="color:#00cc00">
</body>
</html>
Swap the order of the javascript references around.
myscript.js (where you have the code invoking d3 methods) is dependent on the d3js library so ensure that the d3js library is loaded first as follows:
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="myscript.js"></script>
For additional explanation on loading js libraries, read the accepted answer on this SO question:
load and execute order of scripts
I have created a random table and I've been trying to export it as an excel, csv, pdf, and to be able to copy and print the table. I'm able to do every single thing except export to excel and I'm not sure what's the file that I forgot to add. Here's my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dataTables.js" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script src="buttons.flash.min.js" type="text/javascript"></script>
<script src="buttons.html5.min.js" type="text/javascript"></script>
<script src="buttons.print.min.js" type="text/javascript"></script>
<script src="flashExport.swf" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
</head>
<body>
<table id="demoTable">
<thead>
<tr>
<th> Name</th>
<th> Program</th>
<th> Age</th>
<th> Homecity</th>
</tr>
</thead>
<tbody>
<tr>
<td> A</td>
<td> Computer Engineering</td>
<td> 20 Years old</td>
<td> Mississauga</td>
</tr>
<tr>
<td> B</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> C</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> D</td>
<td> Computer Engineering</td>
<td> 19 years old</td>
<td> Ottawa</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
$("#demoTable").DataTable({
dom: 'Bfrtip',
buttons: ['csv', 'excel', 'pdf', 'copy', 'print']
});
})
</script>
Thank you in advance for helping me.
It's possible that the jQuery script tag outside of the <html> is causing issues with other resources loading. You also want to make sure the <script> containing the DataTable() initialization/configuration is inside the <body> tag or loaded as separate file within the <body> or <head>. I'd make sure by inspecting source on your instance that you can see each and every file being successfully loaded from your local file system/server.
Also, I'd re-evaluate the <script> resources with file type .swf, the working example is only using .js resources. If you need to include .swf files you would likely need to embed them. See this question.
I've created a working example here including exporting to excel.
Hopefully that helps!
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>
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 $
Consider:
File script.js,
function AdaugaComboBox(id, name){
var select_tag = document.getElementById(id);
select_tag.innerHTML += "<select name='"+name+"'><option value='0'>Selecteaza autor</option></select><br/>";
return true;
}
and file index.html:
<html>
<head>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button"
value="Adauga autor"
onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
The scope of the function is to add a combo box to the specific TD in the TABLE. But when I press the button this error appears:
AdaugaComboBox is not defined
Why?
Update:
!!! I've fixed it. The problem was with another function.
If the script is included in your HTML, then it's possible that you don't have the path correct based on the location of the HTML file. Check with Firefox/Firebug to make sure that the JS file is being downloaded correctly.
Your HTML should be:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button" value="Adauga autor" onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
You have to put a reference to the script.js file.
<script type="text/javascript" src="script.js"></script>