JQuery time picker not working at second time - javascript

I have a modal dialog which contains a form loaded via ajax. In the form is a tim field which is populated using the jquery timepicker. All works well if I open the dialog one time. If I load the dialog a second time without refreshing the page the timepicker not working
here is my code
<asp:TextBox runat="server" ReadOnly="true" CssClass="form-control timepicker" ClientIDMode="Static" ID="txtTime" />
$(document).ready(function () {
$("#txtTime").timepicker({
twentyFour: false, title:'Time', showSeconds: false
});
});

Since your question itself may be rather unclear, I'll try to provide two scenarios that might address your issue.
If you are replacing elements within the DOM...
If your existing element is being either replaced or removed and re-added to the DOM, you'll need to make sure that you re-wire up your timepicker function to target the most recent instance of that element in the DOM
// Open your dialog here and re-write your elements
// This will target the new element that should now be present in the DOM
$("#txtTime").timepicker({ twentyFour: false, title:'Time', showSeconds: false });
Without knowing the exact details of how you are displaying or disposing of the dialog and its contents, it could be difficult to determine the best way to handle this, but explicitly instantiating the picker each time should ensure that it works as expected.
If you are actually posting the page and reloading it...
In instances where you are submitting a form or refreshing the page, it's worth noting that your timepicker will not persist during the process and will need to be re-instantiated when the page initially loads :
$(function(){
// This will ensure that when the page loads, your timepicker works
$('#txtTime').timepicker({ ... });
});

Related

How can I share javascript/html among several elements on a page?

I have web page with two textboxes on it. Upon clicking on the first, I have a bootstrap modal that displays with a searchable treeview. You click an item in the treeview, the modal closes, and the selection appears in the textbox. Works perfectly!
Now I have decided that for the other textbox I want to do the same thing. The only difference is the modal has a different title, and the source data for the modal treeview comes from a different endpoint. All the other javascript to support searching and highlighting within a treeview, opening and closing a modal, etc, is the same.
To get it to work, I duplicated all html for the modals and the js code and just changed the ID's to avoid clashes between the two. I cannot live with myself for doing this!
So in the end, I have some js and html that work together as a component that I want to reuse on a page among several textboxes or whatever type of widget I may create. How can I design my app so I can share this code and not duplicate it all over the page?
I think webcomponents is the way to go. You could create a component that receives the id and other needed data as parameters and then create instances of it...
There is a lot to unpack in this question. High level, to achieve what you're asking with JS…
You could:
Build a method that accepts an event object (or jQuery event object) as its argument; and handles extracting extracting data from the attributes of that element, setting the title, AJAXing the treeview, and returning the selection/setting the text box value
embed the unique data in data-attributes on each text box
set the click event listener to pass the event.target element, with its unique data- attributes to the method
Markup:
<input type="text" id="foo" data-endpoint="/path/to/endpoint_1" data-title="Modal Foo" value="" />
JS
function on_click_modal_spawning_textbox( event ) {
// get the salient data from the `data-` attributes on the `event.target`
// do modal stuff, programmatically replace the modal title, AJAX treeview, et cetera…
}
// assuming you're using jQuery, otherwise this would be a vanilla `.addEventListener()`
$( document ).on( 'click', 'input[ data-endpoint ]', on_click_modal_spawning_textbox );

Page reload without refresh

Well, I need to refresh the page without giving a refresh, I'm currently doing so.
When the page loads I keep the contents of the html body in a variable, and when I click the button I delete the contents of the html body and add the value of the variable in it.
So I update the body without giving refresh.
The problem is that I use the datepicker plugin and when the body is rewritten by the variable datepicker does not work.
When load the page, I save the html like this:
currentBody = $('body').html();
when I click the button, do so:
$('body').html('');
$('body').html(currentBody);
$('#id_ship_date').datepicker();
But, unsuccessfully.
this is all because I have a form and the fields it is dynamically added by the user, there need a reset button that everything he did on the page, remove everything that he added and remove all the result of queries made ​​by him.
You probably need to reinitialize the datepicker.
http://api.jqueryui.com/datepicker/#method-refresh
$( ".selector" ).datepicker( "refresh" );

Add jquery datepicker dynamically after page load

Upon a button click, I have some jquery that will add some html to the 'body' element. In that html, I have a datepicker input field which refuses to appear when it should.
I use the ui-datepicker in several other spots in my app, and it works perfectly.
I have tried calling the datepicker when the document loads:
jQuery ->
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
and after the click event which adds the new html to the page:
$('.my-button').click ->
$('body').ipadoverlay
titleStyle: false
contentWidth: 500
topSpc: true
content: $('#popup-for-' + thing_id).html()
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
But the picker refuses to show up. My guess is that it has to do with when jquery builds and places the datepicker, but I really don't know.
Let me know if you have any ideas or could use more information.
UPDATE
I changed the way I call datepicker() so that it only applies to the element I want the datepicker attached to.
$('.ipadoverlay .date-picker').datepicker()
This eliminates the first issue with the .each =>.
Now it silently fails. No error or warning. The datepicker simply does not show up.
I am going to begin digging into jquery.ui.datepicker.js to see if I can figure out whats going on, but if you have any ideas why the datepicker fails to response, please let me know.
UPDATE 2
Ok, I got a step further. The class 'hasDatepicker' was already attached to the element I want add the datepicker to (which means $('.date-picker').datepicker() was being called somewhere else, while the element was hidden and unused), but the datepicker didn't work. I fixed this by removing the class from my element, and calling .datepicker() again
$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()
Now the datepicker shows up on click, but selecting a date doesn't do anything... Help would be much appreciated
You need to use the fat arrow. Your use of 'this' loses its context.
jQuery ->
$('.my-datepicker-class').each => # <-- Fat arrow
input = $(this)
input.datepicker()
I'd explain, but coffeescript.org does a better job than I ever could.

Datepicker initialization for class fields added after page load

I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.

Multiple updatepanels on page remove JavaScript Datepicker calender from textbox

Actually I have Multiple update panels on page, which update different values on server but the problem is that I have textbox to which I attach javascript class for datepicker on Load event.
But There are other updatepanels before that date TextBox, when I update them first calender image with date control which is in updatepanel disappears. or it remove the calender which is next to the textbox.
txtDate.Attributes.Add("class", "show-week w16em dateformat-d-sl-m-sl-Y");
Before using any updatepanel its like this
After we upfdate any updatepanel control its like this.
But the Date controls which are not in any updatepanel are ok and working.
And in these updatepanels I actually saving values in DataTables and save these DataTables in viewState .... no change in HTML.
I guess the datepicker and its textbox both are placed in an updatepanel?
If you do an ajax-postback with UpdatePanels the server will send html back for all UpdatePanels on the page, and refresh all of their contents, so your datepicker will disappear.
If you set UpdateMode=Conditional on the UpdatePanels then only the UpdatePanels that caused the postback will update.
Another option is to recreate the datepicker with ScriptManager.RegisterStartupScript, but this possibly resets its value (depends on which datepicker it is).
Are you changing the INNERHTML of the DIV or TABLE in which the TextBox is present because if you are then its removing the calender control after that DIV or TABLE is being updated.
whatever method you are using to attach the datepicker, you must call again after the updatepanel updates
you can do it on server side with this:
// at some point of the method that updates the panel
ScriptManager.RegisterStartupScript(
this, typeof(object), "someUniqueKey", "theScript();", true);
or on client side with this:
// <body onload='...'> or in the <head>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () { theScript() });

Categories

Resources