View and Controller MVC 5 - javascript

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();

Related

How to call HTML file from a jquery function in js file?

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");

How to get td id val of table after change in php codeigniter

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.

bootstrap table custom search

I have following table:
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
JS:
$('#table').bootstrapTable({
pagination: true,
search: true,
});
I want to implement following search behaviour: if the user search for "2001" or "200.1" then the first entry shall be shown. If the user search for "10.1234" or "101234" then again the first entry shall be shown.
Does anybody have an idea how to implement this?
Here is the doc: http://bootstrap-table.wenzhixin.net.cn/documentation/
You may do as follows;
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
ftd.parentElement.style.backgroundColor = ~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? "green" : "white";
});
});
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
<label for="choose">Chose ID:</label>
<input id="choose" required>
I was a little lazy to add a button but striking tab or clicking somewhere out of the input element should do.
Hint: ~(-1) === 0; tilde changes -1 to 0 (falsey value)
OK lets carry on with a Bootstrap example. This time we will define a class for the row that contains the number we search and add it to our CSS file. Let it be something like;
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
Now if we check all first <td> elements (which contains the number data) in each row. If it doesn't contain we will remove the .found class from the parentElement.classList (if the parent element's class list doesn't have it no error will be thrown) if we find what we are looking for then we will add .found class to the parent element's class list.
Very simple..
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? ftd.parentElement.classList.add("found")
: ftd.parentElement.classList.remove("found");
});
});
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>200.10.1234</td>
<td>Maria</td>
<td>Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Fransisco</td>
<td>Chang</td>
</tr>
<tr>
<td>203.10.5678</td>
<td>Fabrio</td>
<td>Donetti</td>
</tr>
</tbody>
</table>
</div>
<label for="choose">Search ID:</label>
<input id="choose" required>
</body>
</html>
#Lahmacun, I've linked a codeply project that implements the bootstrap table. All of this code can be found in the documentation for the website that you've provided. In fact, the search functionality you're looking for is already baked into it; no need to write any custom code. You just have to call it by setting the data-search attribute to true.
HTML Code:
<table id="table" data-url="" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
</table>
JavaScript Code:
$('#table').bootstrapTable({
columns: [{
field: 'number',
title: 'Number'
}, {
field: 'name',
title: 'Name'
}],
data: [{
id: 1,
number: '200.10.1234',
name: 'Maria Anders'
}, {
id: 2,
number: '202.10.9234',
name: 'Francisco Chang'
}]
});

Angularjs - how to add a row dynamically when clicked on parent row

I am new to angularjs and stuck with the below problem.
There will be a table of rows created which reads data from JSON. Say there are 6 rows displayed.But in real time number rows will vary.
Each row has an accordion(+ symbol) in its first td. If this accordian is clicked then the children rows of that row should be displayed by reading the data from one more different JSON.
Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked.
I have created the table with the 6 rows displayed.
But the challenge I am facing is how to link child rows to the existing rows dynamically when clicked. Here is the plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview
Any help is appreciated.
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
See the Plunkr solution
You want a 2nd <tr> with ng-repeat following the first:
<tr ng-if="item.Labels==child.Labels" ng-show="item.opened" ng-repeat="child in children">
<td>{{child.name}}</td>
...etc
</tr>
This will build additional rows where the bundle .Labels matches the repo .Labels and will be shown only when the repo's opened property is true. The + button will toggle the opened property for each item. You'll need two minor edits to your data to make this work:
Add children data to the $scope (for access in the 2nd ng-repeat).
Add default opened: false property to all repos (except the first, which is true).
This won't show the components, but hopefully you get the idea.
See the Plunkr solution
If you want to inset row after row clicked use this:
<style>
#tableid {
font-size: 14px;
}
#tableid .childRow {
font-size:10px;
}
#tableid .childRow td:first-of-type {
padding-left:10px;
}
</style>
<table id="tableid">
<tr onclick="AddRow(this)">
<td>abcd</td>
</tr>
</table>
<script>
function AddRow(e)
{
for (var i = 0; i < 5; i++)
{
var index = e.rowIndex;
var table = document.getElementById("tableid");
var row = table.insertRow(index + 1 + i);
row.setAttribute('class', 'childRow');
var cell = row.insertCell(0);
cell.innerHTML = "efgh";
}
}
</script>

Fill HTML table from JSON object using angular.js

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

Categories