I am calling HTML file from jquery function using require(). But I am not able to link css with the HTML file. Only plain HTML is displayed after I run the file.
My HTML file:
<head>
<script src="jquery-3.4.0.js"></script>
</head>
<div class="wdg-uniplick">
<table class="data-table">
<tr>
<th class="col-id" id="id-h">Plick Order</th>
<th class="col-name" id="name-h">name</th>
<th class="col-date" id="date-h">Date</th>
<th class="col-nr-tx" id="nr-tx-h">Nr. Tx</th>
<th class="col-amount" id="amount-h">Amount</th>
<th class="col-state" id="state-h">State</th>
<th class="col-actions"></th>
</tr>
<tr id="row-0">
<td class="col-id" id="id-d0"></td>
<td class="col-name" id="name-d0"></td>
<td class="col-date" id="date-d0"></td>
<td class="col-nr-tx" id="nr-tx-d0"></td>
<td class="col-amount">
<div class="sub-2" id="ccy-d0"></div>
<div class="sub-1" id="amount-d0"></div>
</td>
<td class="col-state" id="state-d0">-</td>
<td class="col-actions">
<img id="action-icons-d0" src="../img/search-20.svg">
</td>
</tr>
</table>
</div>
My jquery function :
render() : void {
console.log('in multiLevelSCA');
let content: string = '';
this.content = require('../html/multilevelSCA.html');
let translatedText: string = this.translate('hello');
content += translatedText;
this.getDiv().html(content);
}
And I have a content.css file present.
In order to link external css file you need to use the following:
<head>
<link rel="stylesheet" href="styles.css">
</head>
I think you haven't added content.css file in your html file. if you add it you will be able to load the css too
<link rel="stylesheet" type="text/css" href="content.css">
or else you can do it in jquery
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "content.css"
}).appendTo("head");
Related
in node js i try to render table tr with iterate function but it shows unexpected token "<". check the given code snippet. in table row tr i want it iterate dynamically.
module.exports = ({p}) => {
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>
please help me how can i overcome to solve this issue
Use something like this :-
Map over array of p and produce array of tr for each p.
Then, append it to main html
module.exports = ({
ArrayOfP
}) => {
const allTr = ArrayOfP.map(p =>(`<tr>
<td>${p.name}</td>
<td>${p.price}</td>
<td>${p.quantity}</td>
<td>${p.price * p.quantity}</td>
</tr>`))
}
return `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th>Product</th>
<th class="w-20">Price</th>
<th class="w-20">Quantity</th>
<th class="w-20">Total</th>
</tr>
</thead>
<tbody>
**// want to iterate below <tr>**
${allTr.join("")}
<tr>
<td colspan="3" class="text-right">Sub Total</td>
<td> ${p.subTotal}</td>
</tr>
</tbody>
</table>`
}
I have below code in my GetCourseList.cshtml file (view) that show fetched information from database :
#model IEnumerable<WebApplication8.Models.Courses>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
<title>GetCourseList</title>
<style>
.table thead th,
.table tbody td {
text-align: center;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="border-top-0 text-center">course name</th>
<th scope="col" class="border-top-0">unit</th>
<th scope="col" class="border-top-0">term</th>
<th scope="col" class="border-top-0">choose</th>
<th scope="col" class="border-top-0"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="align-middle">#item.name</td>
<td class="align-middle">#item.unit</td>
#if (item.term == 0)
{
<td class="align-middle">custom</td>
<td>
<input class="btn btn-success" type="checkbox" value=#item.name id=#item.course_id/>
</td>
}
else
{
<td class="align-middle">#item.term</td>
<td><input type="checkbox" value=#item.name id=#item.course_id /></td>
}
<td class="text-right align-middle">
#*<button type="button" class="btn btn-success">choose</button>*#
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
and I get below result from this view when I run the project :
I want that user choose favorite records , with those checkboxes , and then when pressed final button (this button is out of frame in my picture), id of this checkboxes insert in my database(related table).
think I should get checked checkboxes id's from my html page (but I don't know how?! please help me!) and pass this id's to the action and then execute insert query in my action .
so : I should pass each checked checkboxes id to the specific controller and collect them (for example collect all elements id's in an array) some one tell's me that i can map my view elements to the this array . but I don't give result from this approach . this is issue!
please help me to find out how can I do this . thank you
you can add property IsSelect in Model
Public bool IsSelect {get;set;}
and used
#Html.CheckBoxFor(m => m.IsSelect)
and in server checked which one of items selected
var idList = items.Where(x=>x.IsSelect).Select(x=>x.Id).ToList();
The problem is whenever im drag & drop and replace td first place to another
i have receiving that the replacement id in jquery.
but the problem is how i can get that replacement td id value in php codeigniter.
i just need if any of td of table has been exchange then i should knw which one is is replaced and get that id into my controller class of php codeigniter.
thanks in advance.
$(document).ready(function () {
$('tbody').addClass("DragMe");
$('.DragMe').sortable({
disabled: false,
axis: 'y',
items: "> tr:not(:first)",
forceHelperSize: true,
update: function (event, ui) {
var Newpos = ui.item.index();
var RefID = $('tr').find('td:first').html();
//alert("Position " + Newpos + "..... RefID: " + RefID);
$("#GridView1 tr:has(td)").each(function () {
var RefID = $(this).find("td:eq(0)").html();
var NewPosition = $("tr").index(this);
alert(RefID + " " + NewPosition);
$("#getpos").val(NewPosition);
$("#ref").val(RefID);
});
}
}).disableSelection();
});
<style type="text/css">
.DragMe:Hover {
cursor: move;
}
</style>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- here is my view form -->
<form method="post" action="<?php echo base_url(); ?>index.php/dragcon/drag/dragfun">
<table class="EU_DataTable" cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Ref ID</th>
<th scope="col">Issue relates to</th>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9392</td>
<td id="getpos">CRM</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9394</td>
<td id="getpos">CRM</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9308</td>
<td id="getpos">eMail</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9342</td>
<td id="getpos">Other</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9365</td>
<td id="getpos">CRM</td>
</tr>
<tr>
<td><input type="submit" name="submit"></td>
</tr>
</tbody>
</table>
</form>
As you seen where i can drag and drop td to td of table and also receiving in alert but i just want to get each of td value after change in the controller of php codeigniter
thanks in advance.
You need to look at the difference between client side and server side code. The action you perform in Javascript can not be passed to the original Codeigniter script as that script was already executed.
In order to call back Codeigniter you want to use Ajax and in particular the Ajax functions of jQuery since you seem to be using that.
It's a complex topic and you should study it in details to be sure you grasp the difference between server-side and client-side, when they happen and how they interact. If you want a more quick & dirty approach, this article from IBM seems perfect as it talks about Ajax, jQuery and CodeIgniter.
I am trying to get data from json object and using ng-repeat show that data inside of a HTML table.
I am getting data with $http and later using ng-repeat for writing the rows of table.
This is my json object:
{
"tests": [
{
"date": "08/02/1999",
"name": "Test 1",
"test": "Raven"
},
{
"date": "11/09/1998",
"name": "Test 2",
"test": "PCT+"
},
{
"date": "13/01/2005",
"name": "Test 3",
"test": "PCT"
}
]
}
This is how I am trying to get json into angular variable:
var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
$http.get('GlobalData.json').success(function (data) {
$scope.tests = data;
});
});
And this is my HTML for table:
<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody ng:repeat="t in tests">
<tr>
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
This is the index page where I have calls to different views depending on which link is clicked. Table content is in first view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
<title>BatteryApp</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<link href="assets/style.css" rel="stylesheet" />
<script src="scripts/routes.js"></script>
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
Battery Application
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Add new battery
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Battery</b>
</td>
</tr>
</table>
</body>
</html>
Data is not shown on the page and I do not get any exception in browser console.
Second problem I have is that I do not see all files and folders from my solution in Chrome console:
I am missing Batteries folder where is the code I am using for my table and accessing to data.
So practically I am unable to debug it and try to find some errors.
Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js?
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="t in tests">
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
Change the location of the ng-repeat. The row should be repeating, not the table body, right?
As far as the missing folder is concerned, see if you have included the batter.js file in your index.html. Or share your index.html code
It looks like it should be Batteries/batteriesScript.js in the script tag
General info: I am trying to make a table using the JQuery mobile. Up to this point my table looks good however, I have some minor issues.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<h1>My Name</h1>
<div data-role="page" id="pageone">
<div data-role="header">
<h1> Cs496 Hw2</h1>
<h2> By: My Name here</h2>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th data-priority="1">No.</th>
<th>School Name</th>
<th data-priority="2">LOGO</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td id="schoolName_0">schools[0].name</td>
<td id="schoolImage_0">schools[0].image</td>
</tr>
<tr>
<td>2</td>
<td id="schoolName_1">schools[1].name</td>
<td id="schoolImage_1">schools[1].image</td>
</tr>
<tr>
<td>3</td>
<td id="schoolName_2">schools[2].name</td>
<td id="schoolImage_2">schools[2].image</td>
</tr>
<tr>
<td>4</td>
<td id="schoolName_3">schools[3].name</td>
<td id="schoolImage_3">schools[3].image</td>
</tr>
<tr>
<td>5</td>
<td id="schoolName_4">schools[4].name</td>
<td id="schoolImage_4">schools[4].image</td>
</tr>
<tr>
<td>6</td>
<td id="schoolName_5">schools[5].name</td>
<td id="schoolImage_5">schools[5].image</td>
</tr>
<tr>
<td>7</td>
<td id="schoolName_6">schools[6].name</td>
<td id="schoolImage_6">schools[6].image</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
function school(name,image){
this.name = name;
this.image = image;
}
var schools = [
new school('Oregon State University', "http://www.sports-logos-screensavers.com/user/OregonStateBeavers.jpg"),
new school('University of Oregon', "http://www.sports-logos-screensavers.com/user/Oregon_Ducks06.jpg"),
new school('Stanford University', "http://www.sports-logos-screensavers.com/user/Stanford_Cardinal.jpg")
new school('University of Southern California', "http://www.sports-logos-screensavers.com/user/USC_Trojans2.jpg"),
new school('University of Washington', "http://www.sports-logos-screensavers.com/user/Washington_Huskies2.jpg"),
new school('San Diego State University', "http://www.sports-logos-screensavers.com/user/SanDiegoStateAztecs3.jpg"),
new school('Florida State University', "http://www.sports-logos-screensavers.com/user/FloridaStateSeminoles.jpg")
];
</script>
</div>
</body>
</html>
Q: What I want to do is use Jquery to insert the contents of the schools array into the correct columns and rows. I wanted to do this by making an array of objects and then insert the associated element in the correct location in the table (where logos are links to images).
I have tried using both Jquery's append and appendto commands in the script portion of my html but that did not work. Also I tried using the document.getElementbyId(...) but that did'nt work either. I believe the script portion of my html is never being called.
Any Ideas are welcome.
The reference to schools[x].name and schools[x].image is not how javascript, or jQuery for that matter, will execute those. Infact this is probably rendering as straight text in your html <td> tags rather than the array element value you are hoping for.
Here is what I would do.
First, add an appropriate class to each of the <td> elements, and a rel attr to hold the counter like so:
<tr>
<td>1</td>
<td class='name' rel='0'></td>
<td class='image' rel='0'></td>
</tr>
Then, iterate over each of the <td> elements in the table, using the rel tag as the array index to retrieve the values from; finally, apply the values to the <td> tags with the .html('...') function, like so:
$.each( $("table#myTable tr td"), function(i,e){
var $this = $(this), //set $(this) object to a variable rather than referencing it multiple times
rel = parseInt( $this.attr('rel') );
//only look for td elements that have a class
if( $this.hasClass('name') )
$this.html( schools[ rel ].name );
if( $this.hasClass('image') )
$this.html( '<img src="' + schools[ rel ].image + '"/>' );
});
I haven't tested this, but I think the logic is sound...