SortTableJS not working inside JSP

SortTableJS not working inside JSP - javascript

I am developing a website to display data that has to be ordered by the users needs. And I do not know how to solve my problem. I have done all the things that were described here. But at the end when I run it on the browser it is not working.
This is just the ajax code that is getting the data and returning the table of the editor view:
try {
/*
Making call to database
and getting all the data
*/
int count = metaData.getColumnCount();
%>
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<%
for(int i=1; i<=count; i++){
%><th scope="col" class="mdl-data-table__cell--non-numeric"><%
out.print(metaData.getColumnName(i));
%></th><%
}
%>
</tr>
</thead>
<tbody>
<%
while(resultSet.next()){%>
<tr onclick="rowClickable(this)" class="n_title">
<%for(int i= 1; i<= count; i++){
if(metaData.getColumnName(i).equals("PLANT")){
%><td scope="row" id="clicked"><%
out.println("<a class='disabledLink' href='"+resultSet.getString(i)+"'>");
out.println(resultSet.getString(i));
out.println("</a>");
%></td><%
} else {
%><td><%
out.println(resultSet.getString(i));
%></td><%
}
}%>
</tr>
<%}
%>
</tbody>
<tfoot></tfoot>
</table>
<script src="sorttable.js" type="text/javascript"></script>
<% connection.close();
}
catch(Exception e){
out.println("\n<P> SQL error: <PRE> " + e + " </PRE> </P>\n ");
}
%>
And this is view of the browser code:
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<th scope="col" class="mdl-data-table__cell--non-numeric">PLANT</th><th scope="col" class="mdl-data-table__cell--non-numeric">NAME</th><th scope="col" class="mdl-data-table__cell--non-numeric">COUNT</th>
</tr>
</thead>
<tbody>
<tr onclick="rowClickable(this)" class="n_title">
<td scope="row" id="clicked"><a class='disabledLink' href='ABI'>
ABI
</a>
</td></tr>
</tbody>
<tfoot></tfoot>
</table>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/created/main.js" type="text/javascript"></script>
And this is my index.html page where all the data gets put in:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/created/styles.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-reboot.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/material.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav id="navbar">
<button id="hiddenBackButton" type="button">Back</button>
<div id="searchNav">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="search" onkeyup="searchFunction('#switch-1',this.value, 'table', 'search')" type="text">
<label class="mdl-textfield__label" id="searchLabel" for="sample3" style="margin-bottom: 0.0px">Search by Name</label>
</div>
<div style="width: 10%; display: inline-block;">
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0;
left: 24px">Plant
</span>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input onclick="changeSearchText(this)" type="checkbox" id="switch-1" class="mdl-switch__input">
</label>
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0">Name
</span>
</div>
</div>
</nav>
<main id="response_body">
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</main>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="sorttable.js" type="text/javascript"></script>
<script src="js/created/main.js" type="text/javascript"></script>
<script>
window.onload = loadDataAjax("response_body");
</script>
</body>
</html>
I hope my code is not too messy or at least readable. It would be great if somebody would be able to solve my problem. Thanks in advance

Solved the problem through adding the code below after the function where the table is created:
$.getScript('url/to/script');
But this code is better described here.

Related

jQuery Datatables error (Uncaught TypeError: $ is not a function)

Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>

please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Data from dynamically created inputs table is not passing to backend

I am trying to pass multiple data from an input table (with row addable option) in the backend for saving them in my database. Here I try to use Django and MongoDB.
My frontend's JS & HTML code is:
let i = 1;
function rowTemplate(i) {
return `<tr data-index=${i}>
<td>${i}</td>
<td><input type="text" name="name-${i}"></td>
<td><input type="text" name="roll-${i}"></td>
<td><input type="email" name="email-${i}"></td>
<td><input type="text" name="password-${i}"></td>
<td><input type="text" name="address-${i}"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;" onclick="removeRow(${i})"></i></td>
</tr>`
}
for (i = 1; i <= 4; i ++) {
$('.my_dynamic_table').append(rowTemplate(i));
}
function removeRow(i) {
$(".my_dynamic_table").find(`tr[data-index='${i}']`).remove();
}
function addRow() {
$('.my_dynamic_table').append(rowTemplate(i));
i++;
}
<body>
<div class="container my-5">
<h2>Welcome to dynamic input table with row adding option</h2>
<form class="" method="POST">
{% csrf_token %}
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>Roll</th>
<th>Email</th>
<th>Password</th>
<th>Address</th>
<th>Remove?</th>
</tr>
</thead>
<tbody class="my_dynamic_table">
</tbody>
</table>
<div class="row m-0">
<button class="btn btn-warning" onclick="addRow()">Add row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
</div>
</body>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- animated css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
<!-- font awsome css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- custom css link -->
<link rel="stylesheet" type="text/css" href="#">
</head>
Now how can I write my views.py in Django to receive all the data for saving them in the database? You may also check my project file: link. I am trying to avoid ajax or other kinds of complex stuff. It will be very helpful for me if it can be done in a simple approach like the following:
def row_addable_table_view(request):
if request.method == 'POST':
this_name = request.POST['name']
...............
Here this_name = request.POST['name-1'] may work for only 1st column. But I need all of them.

Troubles with admin lte and data tables

I am developing this site in laravel and I am having troubles when I try to use DataTables, for my design I am using AdminLTE and whenever I try to put datatables on the content the search bar, the page selector, the order by icons disappear. I am following the example ahead: https://datatables.net/examples/styling/bootstrap. The cdn's for this datatable deforms my adminLTE. https://i.imgur.com/6fY7tMF.png
I've already tried to change cdn but I don't really think that that is the problem here.
------------------------HEAD--------------------------------
<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">
</head>
------------------------BODY--------------------------------
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Gestão de Utilizadores
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
#yield('content')
<div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
#foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>#if($utilizador->type == 1) <b>Admin</b> #else User Normal #endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
I expect something like the example ('https://datatables.net/examples/styling/bootstrap'). When I am actually having this: https://i.imgur.com/Wnt7tcn.png

Nested AJAX Call Help Angular JS

I have a couple files I'm working with that require AJAX Calls. I have dashboad.html that hosts the main interface. I then have a leads.php file that renders information from leadsData.php into a nice Bootstrap Table. leadsData.php returns a JSON file.
When I click "Prospective Student", the right stuff happens ... it renders leads.php in the main dashboard.html. The problem is that when leads.php is rendered in dashboard.html, it doesn't get the information from leadsData.php. After some thinking, this makes sense ... there isn't an AJAX Call that requires leads.php to fetch information from leadsData.php.
|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|
So it seems as if the first AJAX happens, but the second one doesn't.
Here is my code below:
dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-lg-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item" ng-click = "LoadProspectiveStudents()">
<a class="nav-link active" href="#">Prospective Students</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-lg-10" style="border: solid;">
<div class="container">
<h1>MAIN CONTAINER</h1>
<p ng-bind-html = "myResponse"></p>
</div>
</div>
</div>
<body>
</body>
</div>
<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>
<script src="dashboardController.js"></script>
</html>
leads.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<!-- <textarea name="name" ng-model = "test"></textarea> -->
<h1>Hi Mustafa</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" ng-model= "test">
</div>
<table class="table">
<thead>
<tr>
<th ng-click = "sortBy('first_name')">First Name</th>
<th ng-click = "sortBy('last_name')">Last Name</th>
<th ng-click = "sortBy('communityCollege')">Community College</th>
<th ng-click = "sortBy('accountCreation')">Account Creation</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in myData | filter : test">
<td> {{user.first_name}} </td>
<td> {{user.last_name}} </td>
<td> {{user.communityCollege}} </td>
<td> {{user.accountCreation}}</td>
<td>
<button type="button" class="btn btn-primary">View More</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
dashboardController.js
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myController', function($scope, $http, $timeout) {
// $scope.myResponse = "Mustafa Hoda";
// $timeout(LoadProspectiveStudents(), 3000);
//Load Prospective Students
$scope.LoadProspectiveStudents = function(){
$http.get("leads.php")
.then(function(response) {
$scope.myResponse = response.data;
// $scope.renderedResponse = $parse($scope.myResponse);
// $scope.myResponse = "Mustafa Hoda";
}, function(response){
$scope.myResponse = "Uh oh! Something went wrong";
});
}
});

Bootstrap - 404 File not found

When I debug my site, google chrome says this:
GET http://localhost/index.php/js/vendor/bootstrap.min.js 404 (Not Found) localhost:247
GET http://localhost/index.php/js/main.js 404 (Not Found)
As I understand, it can't find these two files. But I never asked it to find them. Here are the headers of my html file:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet">
<link href="/jquery_ui/development-bundle/themes/smoothnes-edit/jquery.ui.all.css" rel="stylesheet">
<!--<link href="/jquery_ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">-->
<script src="/jquery_ui/js/jquery-1.8.3.js"></script>
<script src="/jquery_ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/bootstrap/css/main.css">
<script src="/bootstrap/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- LOADING CUSTOMS -->
<?php require('application/views/wqWidgets.php'); ?>
<link href="/Styles/buttons.css" rel="stylesheet" />
<link href="/Styles/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/jquery.colorbox.js"></script>
<script type="text/javascript" src="/result.js"></script>
<script src="/jquery.colorbox.js"></script>
I do have some other frameworks as jqwidgets and jquery-ui, and these won't work until this error is fixed. Yes, I have checked if all the links work, and they do.
What is going on, could it be the order?
EDIT:
Full code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet">
<link href="/jquery_ui/development-bundle/themes/smoothnes-edit/jquery.ui.all.css" rel="stylesheet">
<!--<link href="/jquery_ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">-->
<script src="/jquery_ui/js/jquery-1.8.3.js"></script>
<script src="/jquery_ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/bootstrap/css/main.css">
<script src="/bootstrap/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- LOADING CUSTOMS -->
<link rel="stylesheet" href="/JQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/JQWidgets/jqwidgets/styles/jqx.fresh.css" type="text/css" />
<script type="text/javascript" src="/JQWidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxprogressbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistmenu.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="/JQWidgets/scripts/json2.js"></script>
<script type="text/javascript" src="/JQWidgets/scripts/knockout-2.1.0.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
<link href="/Styles/buttons.css" rel="stylesheet" />
<link href="/Styles/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/jquery.colorbox.js"></script>
<script type="text/javascript" src="/result.js"></script>
<script src="/jquery.colorbox.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Utoping</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active" >Home</li>
<li >About</li>
<li >Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container"><!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Utoping</h1>
<p>Virtual Connection. Achieving Perfection!</p>
<p><a class="btn btn-primary btn-large" href="/index.php/about/">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Diversity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Integrity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Creativity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
<div id="register-unit" class="hero-unit-register">
<h1><a id="clickme">Register</a></h1>
<p>Virtual Connection. Achieving Perfection!</p>
<label for="_Email">Email</label>
<input style='margin-left: 10px; margin-top: 10px;' type="email" name="_Email" id="_Email" class="text ui-widget-content ui-corner-all" />
</br>
<label for="_Nickname">Company Name</label>
<input style='margin-left: 10px; margin-top: 10px;' type="text" name="_Nickname" id="_Nickname" value="" class="text ui-widget-content ui-corner-all" />
</br>
<select style='visibility: hidden' id='select'>
<option>Primary</option>
<option>Secundary</option>
<option>Tertiary</option>
</select>
<label for="jqxIndustry">Industry</label>
<div style='margin-left: 10px; margin-top: 10px;' id='jqxIndustry'></div>
<input type="hidden" id="Industry" name="Industry">
</br>
<label for="jqxDateTimeInput" title="NOTE: Please change this date, or else the chosen date will be invalid!">Date of creation</label>
<div style='margin-left: 10px; margin-top: 10px;' id='jqxDateTimeInput'></div>
<input type="hidden" id="date" name="date">
</br>
<label for="_Password">Password</label>
<input type="password" id="_Password" name="_Password" class="text ui-widget-content ui-corner-all">
</br>
<label for="pr" title="For your security, we ask you to repeat your password">Repeat:</label>
<input type="password" id="pr" name="pr" class="text ui-widget-content ui-corner-all">
</br>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
<script>
var toggle_ = [];
$(document).ready(function () {
toggle_.toggled = false;
$('#clickme').click(function() {
if (toggle_.toggled)
{
$('#register-unit').animate({
bottom: '-=200',
}, 2000, function() {
// Animation complete.
});
}
else
{
$('#register-unit').animate({
bottom: '+=200',
}, 2000, function() {
// Animation complete.
});
}
{if (toggle_.toggled){toggle_.toggled = false;}else{toggle_.toggled = true;}}
});
$( document ).tooltip();
// JQ WIDGETS
var theme = getTheme();
//JQX
$("#jqxDateTimeInput").jqxDateTimeInput({ animationType: 'fade', height: '25px', theme: theme });
$("#jqxIndustry").jqxDropDownList({ animationType: 'fade', width: "510px", height: '25px', theme: theme });
// Load the data from the Select html element.
$("#jqxIndustry").jqxDropDownList('loadFromSelect', 'select');
$("#jqxDateTimeInput").bind('valuechanged', function (event) {
var date = event.args.date;
var hiddenField = document.getElementById('date');
hiddenField.value = date;
});
$('#jqxIndustry').bind('select', function (event) {
var args = event.args;
var item = $('#jqxIndustry').jqxDropDownList('getItem', args.index);
if (item != null) {
var hiddenField = document.getElementById('Industry');
hiddenField.value = item.label;
}
});
$('#jqxIndustry').bind('unselect', function (event) {
var args = event.args;
var item = $('#jqxIndustry').jqxDropDownList('getItem', args.index);
});
});
</script>
<div class="container"> <hr>
<footer>
<p>© Vinci Enterprise 2012</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>

At the very bottom bootstrap is requesting these files (just above the Google analytics code):
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>

Develop Reference

JavaScript is the programming language of the Web.

SortTableJS not working inside JSP - javascript

Solved the problem through adding the code below after the function where the table is created: $.getScript('url/to/script'); But this code is better described here.

Related

jQuery Datatables error (Uncaught TypeError: $ is not a function)

Data from dynamically created inputs table is not passing to backend

Troubles with admin lte and data tables

Nested AJAX Call Help Angular JS

Bootstrap - 404 File not found

Categories

Resources