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.
Related
I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.
I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>
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>
I have these codes in my webpage:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
It is working perfectly fine with my textbox. But since I have a dropdown function with my header:
I need these lines to make them work:
<%--<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>--%>
When I try to paste them, the header dropdown is working but the problem now is my datepicker. Any tricks on this please?
ANSWER: made it work by pasting the pageresolve url to the top .
UPDATE QUESTION: what may cause this problem?
You are including jQuery.js twice. The second version is loading after the datepicker plugin has extended the original jQuery object and wipes it out .
You likely are seeing error datepicker is not a function or similar. You made no mention of errors thrown which is always the first thing to look for
Only include jQuery.js once and before all dependent plugins and code.
I have a single line code that displays JS alert right now. I am trying to replace it with the jQuery alert so that I can theme it. Below is the code that I wrote for jQuery alert:
ScriptManager.RegisterStartupScript(this, GetType(), "onload",
"window.onload = function () {jAlert('This is a custom alert box', 'Alert Dialog');}", true);
This code used to be like this:
ScriptManager.RegisterStartupScript(this, GetType(), "showalert",
"alert('This is a custom alert box');", true);
The existing code works fine. But my code gives me an error saying,
value of property jalert is null
I am unsure, what I am missing here.
You're running an external plugin to JQuery.
Make sure that on your page you have valid references to the jquery library and jalert plugin.
The $.browser property is considered obsolete and should not be used anymore. This is because there are a lot of browsers that misidentify about whom they are. IE12, for instance, identifies itself as a Mozilla browser.
You can find more information about the $.browser property here.
If your version is JQuery 1.8 and under use this:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
If your version is JQuery 1.9 and over, you'll need to reference the jquery-migrate.js file so that you can use the $.browser property:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-migrate.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />