I was tring to create a simple datepicker control using JQuery, but i was getting that error.
I have no clue why i am getting that error. Trying from 3 hrs but couldn't find the solution.
Can anyone plz help me with this.
Here is my code which i placed in masterpage.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/DevExMenu.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.10.custom.min.js" ></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
this is the code i am using in my source file:
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
$("#datepicker1").datepicker();
});
</script>
<p>
<asp:TextBox ID="datepicker1" runat="server"></asp:TextBox>
</p>
</asp:Content>
I dont know what the problem is but when i am trying the same code without a master page it is working fine.
Please help.
.NET could be renamaing the id of datepicker1.
After the DOM is ready, you could try to get the runtime id and setting to a js var:
textboxDatePick = '<%= datepicker1.ClientID %>';
Then in your scipt change $("#datepicker1").datepicker();
to: $("#" + textboxDatePick).datepicker();
Related
I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.
I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.
all. I'm new to foundation.
I tried to make a dropdown example, but it didn't work at all.
--all.scss--
.test{
#drop2{
#include dropdown-container;
}
}
--test.html--
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>test</title>
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='css/all.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="test">
<a data-dropdown='drop2' href='#'>Has Content Dropdown</a>
<div class='f-dropdown content' data-dropdown-content id='drop2'>
<p>
Some text that people will think is awesome!
Some text that people will think is awesome!
Some text that people will think is awesome!
</p>
</div>
</div>
<script src='js/modernizr.js' type='text/javascript'></script>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/fastclick.js' type='text/javascript'></script>
<script src='js/foundation.js' type='text/javascript'></script>
<script src='js/foundation.dropdown.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).foundation();
</script>
</body>
</html>
The browser shows the text "Has Content Dropdown", but nothing happens when I click the link.
I wonder that I must misunderstand how to use the dropdown component, but can't find what is wrong.
What's wrong with the program? Please help.
foundation 5.4.6
using Middleman and sass
I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.
<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />
js files:
<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>
I saw this tutorial http://madhatted.com/2013/6/29/lazy-loading-with-ember and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.
Typically you can take two paths to preprocess your assets: minify, compress, uglify, etc.
You can do it with the back-end you are using. As examples here, you have Rails using sprockets for its asset pipeline, or PHP's Assetic.
If you don't want to rely on your back-end for this task, you can opt to do it using any front-end build tool. There are a few here, the most popular option for ember-cli these days seems to be broccoli, which comes set up by default. Other choices could be gulp or grunt. All these options involve using your terminal to build your application, using a configuration file as a central point (Brocfile.js, Gruntfile.js, etc.)
It's mostly a matter of personal preference. As an example, I'd probably go with Rails asset pipeline for small projects, while I'd use ember-cli and broccoli if I'd be working on something bigger.
Can anyone help why the modal is not working - background of the window is not greyed out or disabled. The following is my code:
<div>
#(Html.Kendo().Window()
.Name("Wind")
.Title("")
.Content(
#Html.Partial("New").ToHtmlString()
)
.Width(750)
.Height(500)
.Draggable(true)
.Visible(false)
.Modal(true)
)
This is what I have in my _Layout.cshtml:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2014.1.415/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2014.1.415/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2014.1.415/kendo.black.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2014.1.415/kendo.dataviz.black.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2014.1.415/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2014.1.415/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2014.1.415/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validationEngine-en.js")" ></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validationEngine.js")" ></script>
<link href="#Url.Content("~/Content/validationEngine.jquery.css")" rel="stylesheet" type="text/css" />
Thanks!!!
Give it a title. That's the only difference I can see between my windows (I have a lot of them and they all work) and your window code.
It depends on how you open your Kendo window. Here is the example of opening it in the JavaScript function:
function openKendoWindow()
{
var window = $("#Wind");
window.kendoWindow({
content: "Hello",
modal: true
});
window.data("kendoWindow").open();
};
Notice how I set modal: true in the function. Try that.
I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});
It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});