I have done jquery code in an aspx page. Now I want to move the code to Report-Filter.js file. I tried to move and execute. But it doesn't work.
This is my code;
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script> -------> // code
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
But I didn't get the output. What I did wrong in my code.
There is no need to write script tags in .js file remove script tags from js file
<script type="text/javascript">
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
</script>
Should be
$(document).ready(function () {
// Moved code to Report-Filter.js file
})
Also it would be better to place the link of file just before close of body tag
I'm not entirely sure what you are trying to do, but I'm going to assume some things.
What I think you need is
Create a new file and put the javascript code in there with respects
to what Leopard says.
Reference your new javascript file in your code as shown in your
question. Be sure to reference this AFTER you reference the JQuery
libraries.
Test your code. For example, by putting an alert in your Javascript
file somewhere. Like this: alert("test");
Some general tips:
Always put the CSS references before the JS references (Preferably in
the head of the document). This way the page won't stutter visually
while loading, because the elements put on the screen will already be
styled.
Always put the scripts you are referencing below your HTML elements.
This way the page won't take too long to display, because the scripts
won't load beforehand, but afterwards (which is correct anyway,
because your code run's after the document has finished loading)
Eventually it should look something like this:
Javascript file (js/new-javascript-file.js):
$(document).ready(function () {
alert("test");
})
Html / CSHtml / Aspx file (not sure what you are using):
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Accordian-Hide-Show.js"></script>
<script src="js/new-javascript-file.js"></script>
Related
I created a visualization using x3dom and d3. When I execute it as a single html file (html and js code in one file) it works fine. When I include in my website x3dom does not load properly anymore.
I broke it done to an issue loading the x3dom script.
I have a main side with the following head:
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://x3dom.org/download/1.7.2/x3dom.css" />
<link rel="stylesheet" href="stylesheet.css">
<script defer
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://d3js.org/d3.v5.min.js"></script>
<script defer src="https://x3dom.org/download/1.7.2/x3dom-full.js"></script>
<script defer src="JS/form.js"></script>
The side includes a form which is handled by another javascript that calls the visualization script on submitting by using the jquery getScript() method. The visualization script gets loaded (I tested it by doing some console output), but the x3dom is not loaded. Tested it by using the following method:
if ( x3d.node() && x3d.node().runtime ) {
// do stuff
else {
console.log("x3dom not ready")
}
My first guess was, that the include sequence is wrong, but using the same header in the single file worked (I just removed the defer tags and website specific includes(like loading local css and js)).
So how can the x3dom script not be loaded in website implemenation?
EDIT
I tried calling the visualization script from the main html page and it works.
For that I added to my head:
....
<script defer src="JS/form.js"></script>
<script defer src="JS/scatterPlot3d.js"></script>
So the problem must be calling it from another js file.
Any ideas?
Okay, there is a function
x3dom.reload()
which solves the problem.
I have one local html page in my android app.
in html page i call css and js files but when i run app , only context loaded and css and js don't load
I import css and js folders to android_assets/images/css nad android_assets/images/js
and i call css and js in html page like this:
<link href="./android_asset/images/css/bootstrap.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/touchnswipe.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/responsive.css" rel="stylesheet" />
<script src="./android_asset/images/js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/modernizr.custom.js" type="text/javascript"></script>
<script src="./android_asset/images/js/jquery.mousewheel.min.js"></script>
<script src="./android_asset/images/js/jquery.hammer.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/TweenMax.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/responsive_example.min.js" type="text/javascript"></script>
And in Sites.java onCreate section i write this code:
WebView wbSites =(WebView)findViewById(R.id.wbSites);
// wbSites.setWebChromeClient(new WebChromeClient());
// wbSites.setWebViewClient(new WebViewClient());
wbSites.getSettings().setJavaScriptEnabled(true);
wbSites.loadUrl("file:///android_asset/images/sites.html");
Tip: htmlpage named sites.html and pasted in android_asset/images path
but still don't load js and css files.
pls help me
Have you tried including the file:// prefixes to all the resources you want to load?
i solve it
i most write address like this
<script src="./js/modernizr.custom.js" type="text/javascript"></script>
. Refers to local root => /android_asset/images/
This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.
Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>
two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.
Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.
Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>
Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>
I have an HTML page with jQuery inside and JavaScript.
I'm importing the libraries I need in the head tag:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
Then I'm importing some html with jQuery inside:
$('#cliente').click(function(){$('#container').load('/clienti/cliente');});
But the jQuery inside the page loaded is not working. (I'm sure the code is right as is working standing alone).
I need to do something? I have tried to import the libraries in the imported page before the script (out of the head), but not working.
I haven't other ideas!
.load() only works for HTML the way you're using it. (see the section titled "Script Execution"). It won't evaluate any script inside the HTML you load. What you want is to load it using a suffix, i.e.
$('#cliente').click(function(){$('#container').load('/clienti/cliente.html');});
If your JS and HTML must be in the same file, a better way to do this is this way. I believe it will evaluate JS that way.
$('#cliente').click(function(){
$.get('/clienti/cliente', function(data){
$('#container').html(data);
});
});
Alternatively, you can pass both items (the HTML and the JS) back as text
$('#cliente').click(function(){
$.getJSON('/clienti/cliente', function(object){
$('#container').html(object.html);
$parseJSON(object.jscript);
});
});
Otherwise, you will need to use $.get() and $.getJSON() to fetch the html and js in two shots.
This is my code. It turns my text box into a date picker.
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-ui-all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#start_date").datepicker();
$("#end_date").datepicker();
});
</script>
Where do I put the ui-lightness folder? It contains the images and js of the theme. Right now, the images and CSS are blank on my page.
You can place it anywhere you like, but you need to link the the CSS file to have it affect your page.
You need the default CSS
<link type="text/css" rel="stylesheet" href="Content/jquery-ui.css" %>" />
And the control specific files as well, for instance the dialog would need.
<link type="text/css" rel="stylesheet" href="Content/ui.dialog.css" %>" />