I'm working with Data Tables and trying to refresh the incoming data every few seconds without refreshing the page. Initial page load works but after the set delay I get an error "Datatables warning(table id = 'example'): cannot reinitialise data table". Looked at the data table website for help but couldn't find anything specific to my setup. Any feedback appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crypto Market Cap</title>
<link rel="icon" type="image/png" href="imgs/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/spritesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112760236-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112760236-1');
</script>
<style>
#tableHeader tr td { font-weight:bold }
</style>
</head>
<body>
<img src="imgs/spritesheet.png" width="0" height="0" style="display: none">
<div class="container">
<div class="row" style="text-align:center;margin-bottom:30px">
<h2 class="col-xs-12">
Cryptocurrency Market Capitalizations
</h2>
<h5>$USD</h5>
</div>
<div class="row">
<div class="col-xs-12" style="padding:0">
<table id="dataTable" class="table table-bordered hover" style="margin:0 auto">
<thead id="tableHeader">
<tr>
<td>#</td>
<td>Name</td>
<td>Price</td>
<td>Market Cap</td>
<td>Available Supply</td>
<td>24 HR % Change</td>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="text-align:center;margin-top:50px">
<img src="imgs/loading.gif" style="height:120px" id="loading">
</div>
</div>
</div>
<script>
function executeQuery() {
$.ajax({
url: "http://coincap.io/front",
type: "GET",
dataType: "json",
success: function (data) {
var items = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var numFormat = data[i].price.toLocaleString("en");
var numFormat1 = data[i].mktcap.toLocaleString("en");
var numFormat2 = data[i].supply.toLocaleString("en");
var lowerCaseName = data[i].long.toLowerCase();
items.push("<tr><td>" + [i+1] + "</td><td> <span class='sprite sprite-" + lowerCaseName + " small_coin_logo'></span>" + data[i].long + " - " + data[i].short + "</td><td> $" + numFormat + "</td><td> $" + numFormat1 + "</td><td>" + numFormat2 + "</td><td class='marketChange'>" + data[i].cap24hrChange + "% </td></tr>");
}
$("<tbody/>", {
"class": "mainTable",
html: items.join("")
}).insertAfter("#tableHeader");
},
complete: function() {
$("#loading").addClass("hide");
$('#dataTable').DataTable({
"lengthMenu": [ 20, 50, 75, 100 ],
"order": [[ 3, "desc" ]],
language: { search: "" }
});
$('#dataTable_filter input[type="search"]').attr('placeholder', 'Search for coins');
$('#dataTable_filter input[type="search"]').css("padding-left","9px");
}
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() {
setTimeout(executeQuery, 5000);
});
</script>
</body>
</html>
Create the datatable just once. Move code from complete to document ready. Dont create tbody everytime new get is done. hust append them to the main body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crypto Market Cap</title>
<link rel="icon" type="image/png" href="imgs/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/spritesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112760236-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112760236-1');
</script>
<style>
#tableHeader tr td { font-weight:bold }
</style>
</head>
<body>
<img src="imgs/spritesheet.png" width="0" height="0" style="display: none">
<div class="container">
<div class="row" style="text-align:center;margin-bottom:30px">
<h2 class="col-xs-12">
Cryptocurrency Market Capitalizations
</h2>
<h5>$USD</h5>
</div>
<div class="row">
<div class="col-xs-12" style="padding:0">
<table id="dataTable" class="table table-bordered hover" style="margin:0 auto">
<thead id="tableHeader">
<tr>
<td>#</td>
<td>Name</td>
<td>Price</td>
<td>Market Cap</td>
<td>Available Supply</td>
<td>24 HR % Change</td>
</tr>
</thead>
<tbody class="mainTable">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="text-align:center;margin-top:50px">
<img src="imgs/loading.gif" style="height:120px" id="loading">
</div>
</div>
</div>
<script>
function executeQuery() {
$.ajax({
url: "http://coincap.io/front",
type: "GET",
dataType: "json",
success: function (data) {
var items = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var numFormat = data[i].price.toLocaleString("en");
var numFormat1 = data[i].mktcap.toLocaleString("en");
var numFormat2 = data[i].supply.toLocaleString("en");
var lowerCaseName = data[i].long.toLowerCase();
items.push("<tr><td>" + [i+1] + "</td><td> <span class='sprite sprite-" + lowerCaseName + " small_coin_logo'></span>" + data[i].long + " - " + data[i].short + "</td><td> $" + numFormat + "</td><td> $" + numFormat1 + "</td><td>" + numFormat2 + "</td><td class='marketChange'>" + data[i].cap24hrChange + "% </td></tr>");
}
$(".mainTable").append(items.join(""));
},
complete: function() {
}
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() { $("#loading").addClass("hide");
$('#dataTable').DataTable({
"lengthMenu": [ 20, 50, 75, 100 ],
"order": [[ 3, "desc" ]],
language: { search: "" }
});
$('#dataTable_filter input[type="search"]').attr('placeholder', 'Search for coins');
$('#dataTable_filter input[type="search"]').css("padding-left","9px");
setTimeout(executeQuery, 5000);
});
</script>
</body></html>
Related
How to make datatable rows draggable and maintain the sequence of the column number? I am trying to create a questionnaire which theme is Arrangement Choices, i am appending the choices by using addRow. I want to add drag events onto rows and maintain the sequence.. but i don't know how to do it..
Here's my code:
$(document).ready(function () {
var table = $('#ADDchoicesARTableListSequence').DataTable();
const btnAdd = document.querySelector("#addSequenceBtn");
const inputChoices = document.querySelector("#sequenceChoices");
var count = 1;
btnAdd.addEventListener("click", function () {
table.row.add([count,inputChoices.value.trim(),'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<div class="__Sequence">
<label>Arrangement Choices</label>
<input type="text" class="__choicesAddARSeq" id="sequenceChoices"/>
<button id="addSequenceBtn">ADD</button>
</div>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
<button id="addSequenceBtn">Create Question</button>
DataTables has various extensions you can use for advanced features - and one of those is the Row Reorder extension - so we can use that.
I am not sure what you mean by "maintain the sequence of the column number", so here are two slightly different approaches. Maybe one of them is what you want.
Approach 1 - the first column always shows 1 followed by 2 and so on, regardless of how you re-arrange your rows:
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
}
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
In the above demo, I added two new libraries for the JavaScript and CSS needed for dragging.
I also added rowReorder: { selector: 'tr' } to the DataTable which tells the plug-in that we can drag the row by selecting any part of the row (the default behavior is to drag only by selecting the first column).
Approach 2 - all the data in the row moves together.
In this approach, the values in the first column move along with the row they belong to:
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [{
targets: 0,
visible: false
}]
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>Idx.</th>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
In this approach, I added an extra column to your table and I hid the first column.
You can try each approach and see the differences for yourself.
I am trying to to display JSON data from an external location (3 images with a city name and tagline) onto my HTML page but getting an error:
"Uncaught ReferenceError: showPlaces is not defined
at places.json:1:1" even though I did define the function already in my JS file.
JSON data: https://www.selicaro.com/webd330/week6/places.json
https://codepen.io/stefan927/pen/MWOqxmN?editors=1111
*<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-
9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="jsonp.css" />
<title>Week 6 | Assignment | JSONP</title>
</head>
<body>
<div class="container">
<h3 class="card-title">
Assignment: Load JSONP from an External Server
</h3>
<form>
<div class="form-group">
<button
type="button"
class="btn btn-primary mx-auto d-block"
id="btn2"
>
Load JSON
</button>
</div>
</form>
<div id="output"></div>
</div>
<!-- Optional JavaScript -->
<script>
(function() {
var btn = document.getElementById('btn2');
btn.addEventListener('click', getJson);
function getJson() {
var output = document.getElementById('output');
output.setAttribute("class", "card-group");
var xhr = new XMLHttpRequest();
var url = 'https://www.selicaro.com/webd330/week6/places.json'
xhr.open('GET', url, true);
xhr.onload = function(data) {
if (this.readyState === 4) {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
function showPlaces(data) {
var content = '';
for (i = 0; i < data.places.length; i++) {
content += '<div class="card" style="width: 20rem;">'
content += '<img class="card-img-top" src=" data.places[i]["img"]
+ '
" alt="
image of city ">';
content += '<div class="card-body">';
content += '<h5 class="card-title">' + data.places[i].loc '</h5>';
content += '<p class="card-text">tagline: ' + data.places[i]
["tagline"] + '</p>';
content += '</div></div>';
}
document.getElementById('output').innerHTML = content;
}
}
}
xhr.send(null);
}
}
})();
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--Your JS files go below this comment-->
<script src="week6.js"></script>
<script src="https://www.selicaro.com/webd330/week6/places.json"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-
cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-
uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>*
I am trying to pull data from a json file and display it in a table on my web page. The json file is updated dynamically with data about movies from an api. The function that I am using right now is giving a syntax error about needing a name.
I have tried naming the function but so far nothing has worked. I'm new to web development so if it's an obvious answer I'm sorry.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Furby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var table = document.getElementById('userdata');
for(var i = table.rows.length - 1; i > 0; i--)
{
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
});
</script>
</head>
<body id="top">
<div id="pageintro" class="hoc clear">
<!-- ################################################################################################ -->
<div class="flexslider basicslider">
<ul class="slides">
<li>
<article>
<h3 class="heading">Find A Movie</h3>
<p>Search from thousands of online movies!</p>
<footer>
<form class="group" method="post" action="search" onsubmit="function();">
<fieldset>
<legend>Search:</legend>
<input type="text" value="" placeholder="Search Here…" name="search">
<button class="fa fa-sign-in" type="submit" title="Submit"><em>Submit</em></button>
</fieldset>
</form>
</footer>
</article>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Title</th>
<th>Cover</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
<!-- ################################################################################################ -->
</div>
<!-- ################################################################################################ -->
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
The code below will update my table with the movie titles and images once but I have to do a hard refresh on the page to get it to update. I assume it's the name error that is preventing it from running this code every time I search a movie.
EDIT: Added more relevant code. Sorry this is my first time posting.
Remove the inline event listener from the form.
<form class="group" method="post" action="search">
Name your function
function performSearch () {
var table = document.getElementById('userdata');
for (var i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
}
Call your function on page load.
$(function(){
performSearch();
});
And setup the form to perform the search on submit.
$(function(){
performSearch();
$('.group[action="search"]').on('submit', function(e){
e.preventDefault();
performSearch();
});
});
1 ) You have 2 jQuery Lib, that wrong, you need only one also check versions
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
. . .
<script src="static/layout/scripts/jquery.min.js"></script>
2) your HTML table is not valid : you forget placing forget <tr> .... </tr>
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
I also place the id="userdata-tbody" on the <tbody> otherwise you also delete your <thead> row
so place your jQuery lib before the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Furby</title>
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
<script>
$(function () {
var tableUserData = document.getElementById('userdata-tbody');
...
for(var i = tableUserData.rows.length; i--;)
{
tableUserData.deleteRow(i);
}
...
});
</script>
</head>
<body>
...
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
...
</body>
</html>
My table is given below.
i want to find out whenever click event handler calls on
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
t.row.add( [
"<input type='checkbox'>",
"<a href='#'>"+ counter+'.1' +"</a>",
counter +'.3',
counter +'.4',
counter +'.5',
counter +'.6'
]).draw( true );
counter++;
t.row.add( [
"<input type='checkbox'>",
"<a href='#'>"+ counter+'.1' +"</a>",
counter +'.3',
counter +'.4',
counter +'.5',
counter +'.6'
]).draw( false );
counter++;
$("tr").click(function(context) {
var value = context.currentTarget.innerHTML;
$(".modal-body").after(value);
$("#11").prop("hidden",false);
});
$(".btn").click(function() {
$(".modal-body").empty();
$("#11").prop("hidden",true);
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Sr No.</th>
<th name="aa">Modal View</th>
<th>Label1</th>
<th>Label2</th>
<th>Label3</th>
<th>Label4</th>
</tr>
</thead>
</table>
<div id="11" hidden="true" class="modal-content">
<div class="modal-header">
<h4 class="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>
</body>
</html>
Here when on click of tr i am finding that modal view is opening but it is opening on click of any column of that row.
Also if i will not close that modal than it will append all other row data to that modal.i don't want that as well.
Given below may be the closest answer you want and also modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
$(document).ready(function() {
var t = $('#example').DataTable();
for (i = 1; i <= 10; i++) {
t.row.add([
'<input type="checkbox">',
'' + i + '.1' + '',
i + '.3',
i + '.4',
i + '.5',
i + '.6'
]).draw(true);
}
});
function showModal(rowid) {
BootstrapDialog.show({
title: 'Title goes here.',
message: function() {
var msg = '';
msg += '<table>';
msg += ' <thead>';
msg += ' <tr>' + $('#example thead tr').html() + '</tr>';
msg += ' </thead>';
msg += ' <tbody>';
msg += ' <tr>' + $('#example tbody tr:nth-child(' + rowid + ')').html() + '</tr>';
msg += ' </tbody>';
msg += '</table>';
return msg;
},
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}]
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Sr No.</th>
<th name="aa">Modal View</th>
<th>Label1</th>
<th>Label2</th>
<th>Label3</th>
<th>Label4</th>
</tr>
</thead>
</table>
I have some products that I need show personalize with a component in my index.html. In the end I need totalize a grand Total of selected products in $scope main controller "planosVoz". But my two-way binding in svaTotal to component controller doesn't work.
Here a print. In red the svaTotal doesn't reflect.
I get this error in javascript console:
"Error: [$compile:nonassign] http://errors.angularjs.org/1.6.1/$compile/nonassign?p0=undefined&p1=svaTotal&p2=sva
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:6:425
oa/</u<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:257
oa/</p#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:334
m/c<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:130:87
Hf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:145:81
Hf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:148:76
Wc[b]</<.compile/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:282:245
r.event.dispatch#https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:10263
r.event.add/q.handle#https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:8325
"
obs: Variables names in Brazilian Portuguese. (Sorry my English in this text).
Above a simplified version of PlanosVoz controller:
angular.module('planosVoz').controller('planosVoz', function($scope) {
$scope.sva = 0;
$scope.svaTotal = function() {
return $scope.sva;
}; ...
Here the sva component
angular.module('sva').component('sva', {
templateUrl: 'app/sva/sva.template.html',
controller: 'sva',
bindings: {
titulo: '#',
logoimg: '#',
logoid: '#',
base: '#',
radioname: '#',
svaTotal: '=' /* this two way binding doesn't work */
}
});
Here the sva controller
angular.module('sva').controller('sva', function($scope) {
var self = this ;
self.basePrecos = JSON.parse(
'{'+
'"nuvemJornaleiro": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"kantoo": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"vivoMusica": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Mensal", "valor":12.9 }'+
',{"plano": "Mensal 3 em 1", "valor":14.9 }'+
']'+
'}'
);
self.valorAnterior = 0;
self.getBase = function(nomebase) {
return self.basePrecos[nomebase];
};
self.totalizaSva = function(){
self.svaTotal = self.svaTotal - self.valorAnterior;
self.valorAnterior = self.svaSelecao + 0;
self.svaTotal = self.svaTotal + self.svaSelecao;
}
});
Here the template sva.template.html
<table>
<tr>
<td>
<div class="secao">
<img ng-src="{{$ctrl.logoimg}}" id="{{$ctrl.logoid}}"></img><span class="secaoTitulo"><b>{{$ctrl.titulo}}</b></span>
</div>
<div style="clear:both;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<form style="margin-top: 10px;">
<span ng-repeat="item in $ctrl.getBase($ctrl.base)">
<input type="radio" ng-name="$ctrl.radioname" ng-click="$ctrl.totalizaSva()" ng-model="$ctrl.svaSelecao" ng-value="item.valor"> {{item.plano}} </input>
</span>
</form>
<div style="text-align:center;width:100%" ng-show="$ctrl.svaSelecao">Valor do SVA: R${{$ctrl.svaSelecao}} / SvaTotal:{{$ctrl.svaTotal}}</div>
</td>
</tr>
</table>
Here a simplified version of the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Simulador de Ofertas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/topo.css">
<link rel="stylesheet" href="css/imagens.css">
<link rel="stylesheet" href="css/modulo.css">
<link rel="stylesheet" href="css/secao.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/core/core.module.js"></script>
<script src="app/planosvoz/planosvoz.module.js"></script>
<script src="app/planosvoz/planosvoz.controller.js"></script>
<script src="app/sva/sva.module.js"></script>
<script src="app/sva/sva.controller.js"></script>
<script src="app/sva/sva.component.js"></script>
</head>
<body ng-app="simulador" ng-controller="planosVoz" ng-cloack>
<div class="container">
<div class="modulo">
<div class="titulomodulo">SVA</div>
<table class="tabelaPrincipal">
<tr>
<td colspan="2">
<sva
titulo="Nuvem do Jornaleiro"
logoimg="img/nuvemjornaleirologo.png"
logoid="nuvemjornaleirologo"
base="nuvemJornaleiro"
radioname="nuvemJornaleiro"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<sva
titulo="Kantoo"
logoimg="img/kantoologo.png"
logoid="kantoologo"
base="kantoo"
radioname="kantoo"
svaTotal="sva"
>
</sva>
<sva
titulo="Vivo Musica"
logoimg="img/vivomusicalogo.png"
logoid="vivomusicalogo"
base="vivoMusica"
radioname="vivoMusica"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<div class="secao">
<span class="secaoTitulo"><b>Total de SVA's</b></span>
<hr class="secaoLinha">
</div>
<div style="clear:both;"></div>
<h4 style="text-align:center;">{{svaTotal()}}</h4>
</td>
</tr>
</table>
</div>
</body>
</html>
Are you using 2 different modules? planosVoz and sva. Try using only 1 and see how it goes. Btw, can you create a plunker next time cause it's really hard to go through huge code by eyes only.