I am using jQuery session in my master page. Anything I'm missing?
Code:
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.session("lnkID","A1")
});
</script>
Error:
Microsoft JScript runtime error: Object doesn't support this property or method
By your example alone, you're missing a reference to the required files, and you're not wrapping your jQuery code in script tags. You need to reference not only jquery-source, but jquery-json, and jquery-session as well.
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.json.js"></script>
<script type="text/javascript" src="scripts/jquery.session.js"></script>
Once you've got those in place, you need to place your logic within script tags:
<script type="text/javascript">
$(function(){
$.session("foo", "bar");
});
</script>
See the following demo for an example: http://www.jaysalvat.com/session/test1.html
Lastly, the language attribute of the script tag is deprecated. You can do away with it, but keep the type attribute.
Related
I'm using the newest version of Fancybox 3 and I'm trying to implement some options like not showing the toolbar or a different transition effect. I have the css in the header and jquery is at the end of the source code. Why do the options not work? I've used Fancybox earlier without a problem.
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="{{ paths.theme }}js/scripts.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-fancybox]').fancybox({
toolbar: "false",
});
});
</script>
Is this the real output? Then this line -
<script src="{{ paths.theme }}js/scripts.js"></script>
will break further execution of JS code and ... nothing will work.
Below is the example where #parent.data works and the first title can be changed. But when #parent.data is replaced with ~root, test2 tag is not rendered.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>
<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>#parent.data.title}}</h1>
{{/test2}}
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test1 title='Test Title 1'}}
{^{test1 title='Test Title 2'}}
{{/test1}}
{{/test1}}
</script>
<script type="text/javascript">
$.views.tags({
test1: function () {
this.tagCtx.props.content = this.tagCtx.render();
return $.templates.test1.render(this.tagCtx.props, undefined, this.tagCtx.view);
},
test2: function () {
return this.tagCtx.render();
}
});
$.templates({myTemplate: "#myTemplate",
test1: "#test1Template"
});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container > div:first').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
~root is a reference to the data object or array you passed in initially - the top-level data. It is not the immediate parent data. In your case ~root will be the {} you passed in with the link.myTemplate() call.
Update added later: (Response to question in comment below about ~root)
From JsViews point of view, when any block tag content is rendered, it is also a 'view' - where a template is rendered against data. The views make up a hierarchy, and the top-level one is the one for which the data is exposed as ~root. So if you want to provide special short cut aliases for data at intermediate levels, you can do so, but that is for you to do. Declaratively that is done as in this example. In your case you are calling the intermediate level template render programmatically, so you can do the equivalent by providing a reference as a context variable:
return $.templates.test1.render(
this.tagCtx.props,
{mydata: this.tagCtx.props},
this.tagCtx.view);
Now you can write
<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>~mydata.title}}</h1>
{{/test2}}
</script>
Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>
I followed bootstrap main page examples to setup some tooltips in my page but they doesn't works.
i tryed just this:
<script type="text/javascript" src="vendor/js/jquery.js"></script>
<script type="text/javascript" src="vendor/js/bootstrap.js"></script>
<script type="text/javascript">
var options ;
$('.tip').tooltip();
</script>
<a href="#" rel="tooltip" class="tip" title="first tooltip" data-original-title="Logout">
why does it doesn't works and doesn't show me any console error? i'm using latest boostrap version
you should either move the script below the HTML it references or wrap it in:
$(document).ready(function() {
$('.tip').tooltip();
});
To ensure that the DOM has been loaded before you call the tooltip() method.
I am trying to use Lightbox plugin but with jquery there is a conflict and gone through some articles and find out to get work around this but I have no luck in implementing it.
Here is my code:
References:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
Script:
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
})(jQuery);
</script>
Any help will be greatly appreciated!
I am using jquery 1.5.2 version
To prevent $ conflicts between jQuery and prototype, you have to put jQuery.noConflict(); right after you include jQuery and before any other code that expects $ to belong to another library. Then, once you've done that, $ will not map to jQuery, it will be used by the other libraries.
You don't show how you include jQuery. Here's an example right from the jQuery doc page for .noConflcit():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
In your case, I think your code would go like this:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
// other jQuery code that uses $ can go here
})(jQuery);
// other jQuery code that uses jQuery (but not $) can go here or in other script tags
</script>
The order of including js files in relation to the call to jQuery.noConflict() is critically important.
You could try using jQuery object instead of $:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a[rel=lightbox[group1]]").live("click", function () {
jQuery("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
</script>
Everything looks right, so I'm thinking jQuery isn't loaded?
If using jQuery instead of $ doesn't work, then that's probably the case.
If you have the jQuery script in your site header, you'll want check FireBug's net console to see if it loaded - Google Chrome also has a nice network monitor you can use.
You could also use a jQuery lightbox instead of introducing the prototype library just to use a single plugin.