I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Related
I try to run some examples from Jquery site and some videos i' ve seen, but it seems like i can't execute them properly. Here's my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btnclick").click(function() {
$("#divpopup").dialog({
title: "blabla",
width: 430,
height: 200,
modal: true,
buttons: {
Close:
function() {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<div id="divpopup" style="display:none">
blablablabla
</div>
<button type="button" id="btnclick">Click me</button>
</body>
</html>
I can't find what's wrong, the only thing it may be is that i haven't input an important library or something. Every one of my explorers shows me the button, but clicking it doesn't trigger the modal window. Any ideas?
Thank you
Jquery library references should be in below order.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!
I am using jQuery on a standard salesforce page. I can only place my jQuery script in the main page. When I click on an inline edit element, a dialog box opens up and this dialog box has a few input fields. I want to know how to access the input fields in the dialog box from the jQuery which is placed in the Main page.
Please help!!
Regards
Sameer
This tutorial might help you to start from somewhere: http://www.youtube.com/watch?v=b16V25eNyJY&feature=relmfu
<html lang="en">
<head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var cancel = function() {
$("#myDialog").dialog("close");
}
var getResponse = function(){
var answer;
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
$("<p>").text(answer).insertAfter($("#poll"));
$("#myDialog").dialog("close");
}
var dialogOpts = {
modal: true,
buttons: {
"Done": getResponse,
"Cancel": cancel
},
autoOpen: false
};
$("#myDialog").dialog(dialogOpts);
$("#poll").click(function() {
$("#myDialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Question?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
</div>
</body>
</html>
If you paste the code we could exactly show you.
You can access it by, For instance specifying it's id:
$("#the_id_element")
My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code?
or even better, is there any other (easier) way to implement a tooltip ?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript">
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
})
</script>
</body>
</html>
Aren't you missing the onload?
<script type="text/javascript">
$(function() {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
Edit: the code above most definitely works, see jsfiddle
Make sure your qtip.js and qtip.css are loaded and recent
Try this instead:
$('a').qtip({
content: $('#jj').text()
});
Or do what the comment said and clone the element -- you'll probably have to show it explicitly:
$('a').qtip({
content: {
text: $('#jj').clone().show()
}
});
you need to put your qtip javascript inside a document ready.
$(function() {
$('a').qtip({
content: {
text: $('#jj').clone()
}
});
});
two things that you can try
move the scripts to your head section
wrap the javascript/jquery code inside the ready handler
$(document).ready(function(){
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="Scripts/qTip/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
<script type="text/javascript">
$(function () {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
</body>
</html>