I'm attempting to make use of the DataTables plugin, and when using the example code on https://datatables.net/examples/data_sources/js_array.html as a starting point I'm having difficulty having the table display, if any suggestions could be made where I'm going wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DataTables Site</title>
<meta name="viewport" content="width=device-width, minimum-scale-1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="jquery.DataTables.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="DataTablesCSS.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
</head>
<body>
<script src="DataTablesJS.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="jquery-1.12.0.min.js"</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script type="text/javascript" class="init"></script>
<div id="container" class="width">
<header>
<h1>Data<span> Tables</span></h1>
</header>
<div id="body">
<section id="content">
<br>
<article>
<h2>DataTables H2</h2>
</br>
<html>
<body>
<div>
<table id="example" class="display" width="100%"></table>
</div>
</body>
</html>
</article>
</section>
<div class="clear"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
Thanks in advance, let me know if adding in the CSS, or javascript files would be useful.
First of all, please try using some HTML code validator like: https://validator.w3.org/
It might not be about DataTables.
Use some reasonable IDE (it might be helpful) or command-line validation tool to get quick info on errors.
Include the data tables javascript at the end of the body instead, this way the HTML is generated before the js can search for the table.
Related
When I'm running the HTML on android, chrome is not loading the external CSS and js files, all the files are in the same folder. Repo
Beginner here.
Html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="/pali.css">
<!-- Before <link rel="stylesheet" href="pali.css">
also tried <link rel="stylesheet" href="./pali.css"> -->
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="main">
<div class="holder">
<div class="bgimg">
<span>Type in here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()">Check</button>
</div>
</div>
<span class="anshold"><p id="udans"> </p>
</span>
</div>
</body>
<script src="/palindrome.js"></script>
</html>
use ./ to your css link, not /,
ex:
./pali.css
If the files are in the same folder like you said, the slash isn't necessary - simply <link rel="stylesheet" href="pali.css"> and <script src="palindrome.js"></script>. If that doesn't work, I would also advise looking for spelling errors in the filenames.
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I want to change dynamically the content of a div.
My html page looks somehow like this
<!DOCTYPE HTML>
<html>
...
<body>
<div data-role="page">
<div data-role="header">
//Image
</div>
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
</body>
</html>
in wlCommonInit() I call this:
$("#pagePort").load("page2.html", function(){
});
and nothing happen but if I include a timeout it works fine. So my intuition is that I have to wait for the div to be ready?
But on which event can I wait to call the .load() statement?
I cannot reproduce your claim.
I have tested the following in both Worklight 6.1.0.01-20140821-0406 (this is actually 6.1.0.2) and 6.2.0.00-20140918-1910 , and in both page2.html loaded right away as the application was displayed while previewing it via Worklight Console:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.4.4.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div data-role="header">
Header
</div>
<div id="pagePort"></div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
main.js:
function wlCommonInit(){
$("#pagePort").load("page2.html");
}
page2.html resides on the same level as index.html and contains only <h1>Success</h1>
Do we need to include CSS and JS files in every html page of mobile site developed in JQueryMobile?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
I think it's not in the documentation or I just missed it.
You should have a single html document with a <div data-role="page"> for each page that you need in your application. Check out source code of Multi page template.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<!-- CSS and JS files here-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">/script>
</head>
<body>
<div data-role="page" id="first">
<!-- Code for your first page -->
</div>
<div data-role="page" id="second">
<!-- Code for your second page -->
</div>
</body>
</html>
I have created a simple mobile web page, I don't no why but the button I have created doesn't stylized like in this link. Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content = "width=device-width , user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery.mobile/jquery.mobile-1.1.0.css"/>
<link type="text/css" href="themes/theme.min.css"/>
<link type="text/css" href="CSS/main.css"/>
<script type="text/javascript" src="cordova/cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<title>page</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
Where I am wrong?
Thanks in advance!
make sure, your local libraries are available and the paths are correct...
see working example with the newest libraries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
I believe that the problem is with your stylesheet links. You need to include rel="stylesheet" instead of setting type.
E.g.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>