By default http://amsul.ca/pickadate.js/index.htm render the widget when the user click on the input.
I created an icon and I want, when the user click on it, to show the widget. I tried with:
$('#my-icon').on('click', function(){
$("input.dateFormat").pickadate();
$("input.dateFormat").click(); // Tried also with trigger
});
But the calendar does not show.
There is a way?
I don't think triggering a click (the accepted solution) is the right way of going about this. Using version 3 API of pickadate.js, the open/close options are outlined here: http://amsul.ca/pickadate.js/api.htm#method-open-close
The code would then be something like:
var $input = $('.datepicker').pickadate();
var picker = $input.data('pickadate');
$('.calendarIcon').click( function( e ) {
// stop the click from bubbling
e.stopPropagation();
// prevent the default click action
e.preventDefault();
// open the date picker
picker.open();
});
I don't really know this library either, but a quick look at their "api" page makes me think you're probably looking for something like this:
var picker = $("input.dateFormat").pickadate();
$("#my-icon").on('click', function() {
if(picker.get('open')) {
picker.close();
} else {
picker.open();
}
}
This worked for me:
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.date.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.time.css">
<script type="text/javascript">
$(window).load(function(){
$('#inputDatetime').pickadate({
//format: 'dd. mmmm yyyy',
format: 'dd-mm-yyyy',
formatSubmit: 'dd-mm-yyyy',
});
});
$(document).ready(function() {
$("#my-icon").click(function(){
$( '#inputDatetime' ).pickadate("open"),
event.stopPropagation(),
event.preventDefault()
});
});
</script></head>
<body>
<input
id="inputDatetime"
name=""
class=""
type="text"
placeholder="Try me…">
<img src='https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png' id="my-icon">
</body>
</html>
i don't realy know this lib.
You should try to keep your calandar init outside your handler, and then trigger a click in your input :
$("input.dateFormat").pickadate();
$(document).ready(function() {
$("#my-icon").click(function(){
$( '.input.dateFormat' ).trigger("click")
});
});
Related
I am trying to do 2 things:
Open a popup when someone clicks on Lease today (Please note I do not have control over the HTML, so Jquery is the only way to change the HREF)
Change the Anchor tag back to "/floor-plans.aspx" after the first click
Somehow the code is not calling the function at all and not sure how to do #2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change HREF Attribute of Anchor Tag </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="http://"]').each(function(){
var oldUrl = $(this).attr("href"); // Get current url
var newUrl = oldUrl.replace("/floor-plans.aspx", "openPopup()"); // Create new url
$(this).attr("href", newUrl); // Set herf value
});
});
function openPopup(){
alert("popupopened");
}
</script>
</head>
<body>
<span>Lease Today</span>
</body>
</html>
There are two parts to this, the first click to do the alert, then the second to NOT do the alert but allow the click (and turn off this handler, first time only we alert)
In addition, I added a class to make the selector much simpler to use/understand.
You did not ask how to tell what was clicked in the function, so I show that as well as how to pass some extra values/objects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change HREF Attribute of Anchor Tag </title>
</head>
<body>
<span>Lease Today</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function openPopup(event,passed) {
console.log(passed.foo.Name);
alert("popupopened was "+$(event.target).text());
}
$(function() {
$('a.replacer-clicker').on('click', function(event) {
// Get prior url if we had it
let prior = $(this).data('prior-href');
if (!prior) {
// do not go there and stop other event handlers from seeing it
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
// save old, no prior click
$(this).data('prior-href', $(this).attr("href"));
// all it with this instead so we know context of it
openPopup.apply(this, [event,{foo:{Name:"fooby"}}]);
// simple
//openPopup();
} else {
console.log(prior);
//second click (had prior)
// now turn this handler off
$(this).off('click');
// now re-trigger the click, pass some arguments
$(this).trigger('click',[{foo:{Name:"fooby"}}]);
}
});
});
</script>
</body>
</html>
Your first issue is hwo you select the anchor and the second one is related on how you use href attribute.
Fixed code:
function openPopup(){
alert("popupopened");
}
$('a[href^="/floor-plans.aspx"]').each(function(){
var oldUrl = $(this).attr("href"); // Get current url
var newUrl = oldUrl.replace("/floor-plans.aspx", "javascript:openPopup();"); // Create new url
$(this).attr("href", newUrl); // Set herf value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
The correct way is:
$('a[href^="/floor-plans.aspx"]').on('click', function(e) {
e.preventDefault();
alert("popupopened");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
Instead, if the html element is not yet ready you can delegate the click event:
$(document).on('click', 'a[href^="/floor-plans.aspx"]', function(e) {
e.preventDefault();
alert("popupopened");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Lease Today</span>
I am trying to open a dialog on click of a anchor tag.
Code as follows:
<td class="tdalign" title="#item.DupeYCode">
#Html.ActionLink(item.DupeYCode == "" ? " " : item.DupeYCode, "", "", new { id = item.RefundTicketNo }, new { #class = "HyperlinkText" , id= "DupeYRow", Attr = item.RefundTicketNo })
</td>
On click of id selector i am trying to open a .Dialog in jquery.
$("#DupeYRow").live("click", function (e) {
//debugger;
});
It is working on IE but on Chrome it is not working.
The Reference Files for jqyery I am using is as follows:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
<link href="~/Content/icon-bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
#Scripts.Render("~/Scripts/jquery-1.8.3.min.js")
Please let me know how can i get it on debugger in chrome also using id selector.
I have tried using class selector too.But it is still not working on chrome.
You are mixed up two different version of jquery.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
#Scripts.Render("~/Scripts/jquery-1.8.3.min.js")
so at first remove one.(suggestion:- last one )
Use the on() method instead of live().(update #Siva Ganesh answer).
1.If your Script and HTML in same page then use:
$("#DupeYRow").on('click', function(e) {
e.preventdefault();
// what you want
return false;
});
2.If you are use external file then use:
$(document).on('click','#DupeYRow',function(e) {
e.preventdefault();
// what you want
return false;
});
You mixed up your jquery version. Follow "Ashiquzzaman" idea
The `live()` method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the `on()` method instead.
$("#DupeYRow").on('click', function(e) {
// what you want
});
I am trying to fire the onSelect event as shown below but, it is not working.
I need to use datepicker object as per my application design.
var datePickerObject = $('#datepicker').datepicker();
datePickerObject.datepicker(
{
onSelect: function(dateText, inst) { alert("Working"); }
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="datepicker"/> //Updated as per Oscar jar suggestion
Any suggestion will be greatly appreciated.
Correct me if wrong but I think what you are doing wrong is that your datepicker component is getting initialized two times when invoking the datepicker(...) method for the first time when creating the datePickerObject and then again when adding other configurations (like your onSelect function) to the object that was already initialized (perhaps that's why it isn't working and your function is ignored since it's added in the second time).
So, if you avoid doing that and you only initialize the component for one time and use the configurations needed (see example from below) then you will get it working:
var cfg = {},
cmp = $('#datepicker');
// Add event handlers
cfg.onSelect = onDateSelect;
// Add other configs
cfg.changeMonth = true;
cfg.changeYear = true;
cfg.dateFormat = 'dd-mm-yy';
// Initialize component
cmp.datepicker(cfg);
function onDateSelect(date, cmp) {
console.log('Selected date is: %o', date);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div id="datepicker"></div>
On the other hand, I wonder why did you have the following in your code snippet:
<div type="text" id="datepicker"></div>
(Since the type attribute is not part of the div element)
If that's what you need then add an input for your datepicker component, like this:
<input type="text" id="datepicker"/>
UPDATE:
I've tested your code and passed your event handler when initializing the component only for the first time and it works:
var datePickerObject = $('#datepicker').datepicker({
onSelect: function(dateText, inst) {
alert('Working');
}
});
Suppose to have an html page and when I click on one button I read:"
I need to handle when I click "ok"
that is html code:
<button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button>
That is my jquery code:
(function() {
$(document).on('click','button[data-bb-handler="confirm"][type="button"]',function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
}());
It doesn't work. Anyone can help me? Some other method?
This piece of Jquery code should work:
$('button[data-bb-handler="confirm"][type="button"]').click(function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
Let me know if it did not work. Check this Working Codepen
I am suggesting to use Bootbox JS. it is based on Bootstrap layout.
You can achieve that you need as mentioned below
bootbox.confirm("Are you sure?", function(result) {
// write your code what you need to handle on OK button
});
You may use the event show.bs.modal:
//
// On modal show
//
$(document).on('show.bs.modal', function (e) {
//
// attach the click event for OK button
//
$('button[data-bb-handler="cancel"][type="button"]').on('click', function (e) {
console.log("CANCEL BUTTON PRESSED");
});
//
// attach the click event for CANCEL button
//
$('button[data-bb-handler="confirm"][type="button"]').on('click', function (e) {
console.log("OK BUTTON PRESSED");
});
});
$(document).ready(function() {
$('#myBtn').on('click', function (e) {
bootbox.confirm("Are you sure you wish to discard this post?", function () {
});
}).trigger('click');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<button id="myBtn" type="button" class="btn btn-primary">Click Me</button>
This is the bootbox.confirm message. For deatils you may refer to Bootbox.js.
When you click on the ok or cancel the dialog dom element is removed from the document.
So you have to use the callback function:
$(document).on('click.bootbox', function(e, result){
console.log("Pressed "+ result);
});
bootbox.confirm("Are you sure you wish to discard this post?", function(result) {
$(document).trigger('click.bootbox', result);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
Very simple code, for some reason nothing I try will work! I have obviously imported Jquery, jqueryUI, ajax, all the things I need imported (more than once!). But for some reason this button does not want to be clicked using Jquery! I got it to work with onClick, but I would like to be using jquery for this. SOS!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
function pie(){
//alert();
}
</script>
<body>
loading...
<input type="button" id="heyo" onclick="pie()" value="ff" />
</body>
Wrap you jquery code with $(document).ready(function() {}) to make sure all the DOM objects have been loaded before accessing them with jQuery:
$(document).ready(function() {
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
});