JQuery Datepicker error after Postback with Ajax - javascript

my Datepicker works fine, but after postback it doesn't work any more. I tried also pageLoad method but it still doesn't work.
I have a List of Items from database. If I click an item of the list, I get the information about it in a table from database (I used POST Method with Ajax).
Jquery:
<script>
$(function() {
var pickerOpts = { dateFormat: $.datepicker.ATOM };
$("#datepicker").datepicker(pickerOpts);
});
</script>
Textfield:
echo("<input type='text' id='datepicker' value='$db[deadline]'>");
I've googled for hours but found nothing that worked for me.
EDIT NOTE: Errors after trying Rahil Wazir's help:

Use this:
<script>
$(function() {
var pickerOpts = { dateFormat: $.datepicker.ATOM }; //Place this inside below .on handler if this also updates.
$(document).on('focus', '#datepicker', function(e){
$(this).datepicker(pickerOpts);
});
});
</script>
You have to use $(document).on handler when dom updates. And add event focus to trigger the datepicker handler.
Edited:
See this answer for further help

Related

Change function on datetimepicker not working properly

I have used datetimepicker in my project. But when I am using the change event to call the ajax function it is being called multiple times.
Also when running the script on browser with an alert on change function it goes into infinite state where the alert doesn't seems to remove even after close button.
Version of Datetimepicker used: 3.1.12
$("#timepickerstartt").change(function(){
alert();
});
Snippet used for datetimepicker
Note: I have tried the onselect event but no luck.
$('#cashing_start_time').datetimepicker({
datepicker:false,
theme:'dark',
format:'H:i',
onChange: function(selectedDate) {
alert();
}
});
you are too close...
you can use this function
$('#timepickerstartt').on('dp.change', function(e){ console.log(e.date); })
see this link for more details
see jsfiddle

JQuery On change, keyup not firing

I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.
You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document

jQuery Widgets not working on tabs loaded by Ajax

I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax.
The tab content all loads correctly.
However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
I attempted to use:
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display.
Confusingly (for me):
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! The alert displays when the date field is "clicked".
And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
I am using the jQuery 2.2.0 and
jQuery UI 1.12.0 with the "redmond" theme / CSS.
The view html follows the following;
<div class = "emr-bodycontent">
<div id="tabs">
<ul>
<li>Patient Details</li>
<li>Carers</li>
...
...
Here is the JS used for the TABS;
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"There seems to be an error retrieving the data you requested."
);
});
}
});
Instead of using click use focus and datepicker will work . Assumes that the element id is valid and is an input
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load callback of tabs ... see api docs
DEMO
I will suggest you to setup the datepicker() after Ajax content loaded, do not use click event. Because the initiate call of $('#dateOfBirth').datepicker() is to set up the datepicker, you may need to click again to trigger the calendar.
Or, you can try to manually trigger it right after set.
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});
Firstly, thanks very much for the answers / comments.
Both answers work successfully.
Kieran's worked straight away as it was manually triggering the event.
Charlie's worked, too - but only after I clicked several times.
Though after fixing my underlying issue, Charlie's worked straight away, too.
The underlying issue was indeed a duplicate ID.
(thanks for the prompt to check, Charlie).
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs.
After ensuring that ALL IDs are unique, the widget works correctly / as expected.

JQuery month picker on month change/select

Using jQuery UIMonthPicker http://jsfiddle.net/kidsysco/JeZap/ and I'm having difficulty in trying an event on month select. There is no response on either onClose or onSelect function. Here is my code:
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$('#txtDate').MonthPicker({
ShowIcon: false,
MaxMonth: 0,
MinMonth: -120,
onSelect: function() {
alert(j$("#txtDate").val());
}
});
j$("#txtDate").keydown(false);
j$("#txtDate").change(function(){
alert(j$("#txtDate").val());
});
});
According to the docs, you might want OnAfterChooseMonth
j$('#txtDate').MonthPicker({
....
OnAfterChooseMonth: function() {
alert($(this).val());
}
});
The change event will only fire when the input is changed by the user typing into it (and losing focus depending on control) - it doesn't fire when code changes the value.
Updated fiddle (on the first 'default' input)
Update: to address the incorrect edit that was made to this answer and incase it happens again: I rolled back because the question uses j$ = jQuery.noConflict(); and so $() might fail in this context and the ... shows that there needs to be more inside the MonthPicker than just what's here. To the reviewers: don't forget to check the question when reviewing.

A click function not working

my a click jquery function is not working, it just doesn't give any errors at console at all too.
Here is the link -
Edit
and here is the click function
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
It doesn't popout the alert box, nor it does show me error in console.
Okay, someone asked for more info -
The link is added with jquery, by pressing button, and as id it takes one of the input fields value and inserts it as link with id from input field. There are no duplicate ids, all javascript scripts are located at the end of head tag, and the a click function is located last in part.
Based on your edit that the <a> tag is being inserted dynamically, you'll need to use jQuery's .on() (jQuery version 1.7 and later) or .live() method to attach the click handler.
This code should work, so I suppose there is some other error before this code runs that prevents correct Javascript execution.
Edit: OR the DOM is not yet ready when you insert the Javascript code. Then you should use
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});​
});
Are you wrapping it on the ready event or after the element has been displayed? If so then it should work;
http://jsfiddle.net/sWeRf/
Either place this code after the Edit on the page, or put it in the head with $(document).ready(function() { //Place code here. });
Can you try replacing your JS code with the following (put between the HEAD tags)
<script type="text/javascript">
$(document).ready(function(){
$('a#lang').click(function(){
alert($(this).attr('id'));
});
});
</script>
Are you checking the document is loaded before applying your JQuery click handler?
e.g.
$(document).ready(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});
Instead of using document.ready you can use an anonymous function that does the same thing.
Like this:
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});
To remove the item do this:
$('#language_c').remove();

Categories