I have a problem to use jquery Plugin/Validation.
I want to add a method and follow the documentation but I think I still missing some thing.
First I add the method but I think I have a problem to implement it.
please check my code and advice me.
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/yahoo.com/.test(value);
}, "Please specify the correct domain for your documents");
$("#aspForm").validate();
});
<asp:TextBox ID="TextBox1" runat="server" CssClass="domain" ></asp:TextBox>
</script>
I was able to find the right code for how to implement validation rule:
here is the code:
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
//Our validation script will go here.
$(document).ready(function() {
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/yahoo.com/.test(value);
}, "Please specify the correct domain for your documents");
//validation implementation will go here.
$("#aspnetForm").validate({
rules: {
"<%=TextBox1.UniqueID %>": {
domain: true
}
}
});
})
</script>
Related
I need help regarding the script. lightbox works properly but jQuery not working. am totally confused what to do???
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js2/lightbox_s.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>jQuery.noConflict();</script>
<script>
jQuery(document).ready(function()
jQuery("#menu_btn").mouseover(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-10px'
}, 500);
});
jQuery("#menu_btn").mouseout(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-50px'
}, 500);
});
jQuery("#menu").mouseover(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-10px'
}, 500);
});
jQuery("#menu").mouseout(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-50px'
}, 500);
});
});
</script>
I do not have a choice rather I post this question... I have found same thing i.e. jQuery.noConflict() to use but its not working together.
I need help in this regard.
Thanks in advance
The noConflict is secondry.
The main issue here is that jQuery has to be loaded before you include lightbox
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js2/lightbox_s.js"></script>
First include jquery and include lightbox after that as the latter is dependent on the former.
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>
I have custom tag which can have itself as an inner tag and I want to bind it its props as data. I can change the first test tag title property and see the change but cannot do that for the inner test tag. I think it is because of the wrong arguments of this.tagCtx.content.render(). Below is the example:
<!DOCTYPE html>
<html>
<head>
<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="testTemplate" type="text/x-jsrender">
<div>{^{>title}}{^{:content}}</div>
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test title='Test1'}}
{^{test title='Test2'}}
{{/test}}
{{/test}}
</script>
<script type="text/javascript">
$.views.tags({
test: {
render: function(){
this.tagCtx.props.content = this.tagCtx.content.render();
return this.template.render(this.tagCtx.props, this.tagCtx, this.tagCtx.view);
},
template: "#testTemplate"
}
});
$.templates({myTemplate: "#myTemplate"});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container div:first div').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
The problem here is that the inner tag is being rendered as a string, not as a data-linked tag, since the this.tagCtx.content.render() call is simply calling the render method on the compiled template corresponding to the block content.
If you want to render as a data-linked tag, you need to call this.tagCtx.render().
In addition, in calling this.tagCtx.render() you need the tag to render its content, and not another template. Setting template: "#testTemplate" will cause the tag to use that template instead of the content. So what you need is something along these lines:
var template = $.templates("#testTemplate");
$.views.tags({
test: {
render: function() {
var tagCtx = this.tagCtx;
tagCtx.props.content = tagCtx.render();
return template.render(tagCtx.props, undefined, tagCtx.view);
}
}
});
You probably don't want to pass in tagCtx as context in the template.render(...) call. You can pass in tagCtx.ctx, or simply undefined...
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.
I'm trying change an input mask for textbox when the the check box has been check or unckecked but the problem that always is picking up the else condation only even the check box it is check or not.
please advice to fix this problem.
here is my code:
<%# Page Title="" Language="C#" MasterPageFile="~/Imam.Master" AutoEventWireup="true"
CodeBehind="WebForm4.aspx.cs" Inherits="Imam_Contacts.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
<script type="text/javascript">
if ($('#chkhtml:checked').size() > 0)
{
jQuery(function($) {
$("#txthtml").mask("999-99-9999");
});
} else {
jQuery(function($) {
$("#txthtml").mask("99/99/9999");
});
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<input id="chkhtml" type="checkbox" checked="checked" />
</asp:Content>
<script type='text/javascript'>
$('#chkhtml').click(function(){
if ($(this).attr('checked'))
$("#txthtml").mask("999-99-9999");
else
$("#txthtml").mask("99/99/9999");
});
$(function(){
$("#txthtml").mask("99/99/9999"); // this is default mask
});
</script>
I'm guessing you want to change the mask when checkbox changes its state but you don't know how you can achieve this.
Your code is running before the checkbox is rendered. Therefore, when the code runs, there are no checkboxes.
You need to wrap the entire if block in $(function() { ... }), which will execute the code in the function after the document finishes loading.
For example:
$(function() {
if ($('#chkhtml:checked').length > 0) {
$("#txthtml").mask("999-99-9999");
} else {
$("#txthtml").mask("99/99/9999");
}
});
Alternatively, you can use an inline conditional:
$(function() {
$("#txthtml").mask(
$('#chkhtml:checked').length > 0 ? "999-99-9999" : "99/99/9999"
);
});
Along with the other answers, here's an alternate way to do it...
<script type='text/javascript'>
$(document).ready(function() {
$('#chkhtml').click(function() {
if ($('#chkhtml').is(':checked')) {
$("#txthtml").mask("999-99-9999");
}
else {
$("#txthtml").mask("99/99/9999");
}
});
});
</script>