Jquery Datepicker is not populated on Button click? - javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
</body>
</html>
Is there anything missing in this html snippet .??
datepicker is not getting populated, ErrorConsole showing error that-
'textBox.datepicker is not a function'
in below code;
var mydatepicker = var mydatepicker = textBox.datepicker();
Can someone help please.?

Thats my working copy of your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>

Is datepicker not a function from the jQuery-UI library?
If so, then you need to include a script reference to the jQuery-UI Library.
EDITS
No You need to add a script reference to the jQuery-UI library and jQuery-UI Css file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />

Are you giving full refrences to js files. Including jquery and datepicker's .js files.
The issue is in this:
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
I can not see any js files regarding datepicker in your head tag where you've included all js refrences.
There must be some file like:
<script type="text/javascript" src="Scripts/datepicker.js"></script>
or something like that, which you are missing to include.
Hope this helps.

if you use jquery datepicker, the 'myButton' object is not necessary, datepicker will handle it for use, see the code:
<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
</head>
<body>
<form>
<input id="date" type="textbox"/>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker({ showOn: 'button', buttonText: "select" });
});
</script>
</body>
</html>

Related

Full Calendar not work or nothing show?

This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.

adding calender in text box

i want to load a calender in my text box i m working in asp.net and mvc
i want to load the text in red tex box i m writing this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i m doing tis in my js
and i m doing this in my view bag i just want to show that i m adding libraries in my view bag
<script src="js/jquery.min.js"></script>
<script src="js/chkList.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="../../css/jquery-ui.css">
Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDate" runat="server" ReadOnly = "true"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</form>
</body>
</html>
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
string dt = Request.Form[txtDate.UniqueID];
}
here is the example..
$(function() {
$( "#datepicker" ).datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

including js file and using function inside jquery ready scope

i have js file named defined_tools.js iside folder js .
i wrote simple function in it
function xxxx(){
alert("rt");
}
now in my index page i included the file by this line
<script type="text/javascript" src="js/defined_tools.js"></script>
and in the head scope i write this code to execute xxxx() function
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
i got error in chrome console
Uncaught ReferenceError: xxxx is not defined
MY FULL PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Site</title>
<link rel="stylesheet" type="text/css" href="css/defaults.css"/>
<link rel="stylesheet" type="text/css" href="css/devtool.css"/>
<!-- Jquery Library -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/defined_tools.js"></script>
<script type="text/javascript" src="js/core_osx.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
</head>
<body>
<!-- Tool Dev -->
<div id="tooldev" class="ToolSize">
<div id="new_panel" class="ToolCommands"></div>
<div id="new_text" class="ToolCommands"></div>
<div id="new_image" class="ToolCommands"></div>
</div>
<div id="workspace" class="DefaultWorkspace">
</div>
</body>
</html>
In defined_tools.js file, try to change function definition for this:
document.xxxx = function() { alert("RT");}
And import the jQuery file after the defined_tools.js.

Dropzone js not working without form

How can I use dropzone without using the class in the form.
I basically want to have a div inside a form and call class="dropzone" in that div. But it doesn't seems to work.
Here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "file-upload"})
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
Initiate .ready event when DOM ready and use like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
your url parameter is not pointing to any valid php file. I believe your code should be thus
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "upload.php"}) //according to your forms action
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>

checkbox image replacement,nothing happend

<?php
//require 'includes/db.inc.php';
require 'includes/configs.inc.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php $site_name ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/jquery.imageTickBox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input:[type=checkbox]").imageTickBox({
tickedImage: "/images/checked.png",
unTickedImage: "/images/unchecked.png",
imageClass: "tickbox"
});
});
</script>
</head>
<body>
<div id="mirror" class="center">
<!--some code deleted-->
<input type="checkbox" id="Music" name="hobbies[]" value="Music">
<!--some code deleted-->
</div>
</body>
</html>
any wrong with the code above????name index.php and put it on root dir.
but not work , i see the jquery checkbox plugin guide at
http://blog.leenix.co.uk/2009/10/jquery-plugin-imagetickbox-change-any.html
ALWAYS close your script tags, even if using external resources.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You need to close the jquery script tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Categories

Resources