Second jQuery load datepicker is not working - javascript

I do have some problem with datepicker after jQuery load.
In the beginning I do have load:
$(document).ready(function() {
if(inputInit.val()==0){
initDateDDMMYY('#formName');
inputInit.val('1');
console.log (inputInit.val());
}
)
}
Source code for function:
function initDateDDMMYY(formname){
var $frm = $(formname);
$frm.find('.datepicker').datepicker('destroy');
$frm.find('.datepicker').datepicker({
dateFormat : "dd.mm.yy",
autoclose : true,
changeYear : true
});
};
On first load there is no problem, but on the next load - date picker is nor working. Even not initialized. Even if I try too init it again with firebug - nothing happens.
Load is normal:
$("#div").load("${action}");

There is a js error in your code!
$(document).ready(function() {
if(inputInit.val()==0){
initDateDDMMYY('#formName');
inputInit.val('1');
console.log (inputInit.val());
}
});
Here you forgot the ");" at the end

Related

Jquery Steps stops datepicker working?

I am using jquery steps for wizard. But inside if I use datepicker or qtip functionality not working. I switched .js references still the issue the same.
Why datepicker event not working inside steps? console not throwing any error.
#Html.TextBoxFor(model => model.BirthDate, null, new {#class = "SPE-Formcontrol section_detail-font-14 calendar", #style = "display: inline", #readonly = "readonly", Name = "BirthDate", id = "BirthDate"})
<script src="~/Scripts/join.js"></script>
<script src="~/Scripts/jquery.steps.js"></script>
join.js
$("#BirthDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-17',
showOn: "button",
buttonImage:"image",
buttonImageOnly: true,
beforeShow: function () {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy',
maxDate: '-17Y'
});
$('.tip').qtip({
style: {
classes: 'myTipClass tipShadow qtip-rounded'
}
});
You need to initialize jquery steps first and then other plugin initialization
$(function () {
//intilize steps first
$("#wizard").steps({
bodyTag: "fieldset",
headerTag: "h4"
});
//intilize other plugins later
$("#BirthDate").datepicker();
});
Hopefully, this resolves your issue
Problem is that datepicker puts triggers on elements and the class 'hasDatepicker' saying that this element has been initialized. Jquery steps moves elements around, triggers are lost.
But the datepicker elements still have the class after moving, thus won't be triggered again if you call datepicker once more. So if you want to reinitialize datepicker you should add this in jquery steps definition:
onInit: function (event, currentIndex, newIndex) {
// Remove hasDatepicker class from initialized elements and remove the button next to datepicker input
$('.hasDatepicker').removeClass('hasDatepicker').siblings('.ui-datepicker-trigger').remove();
// reinitialize datepicker, offcourse replace .datepickerfields with your specific datepicker identifier
$('.datepickerfields').datepicker();
},
Same problem here
It works fine OUTSIDE the wizard, but once the input is set inside, the parent div of the datepicker does appear in the DOM, but it's empty...
No datepicker will appear
tried to declare the
$(".datepicker").datepicker();
BEFORE or AFTER the steps() function, nothing change.
I tried to use the onInit() feature of the steps() function, it still doesn't work
form.steps({
...
onInit : function (event, currentIndex) { $(".datepicker").datepicker(); },
...
});

R Shiny dataInput autoclose option

For the dateInput funciton in R Shiny, how do we embed the JavaScript and make the datepicker autoclose?
I found in another JS post that the option is
$('#datepicker').datepicker({
autoclose: true,
});
How can I add this function to R Shiny? Thanks!
I came up with a polling solution. Try to save this javascript code as a .js file and put it into the Shiny app, at the very end of body. datepickerId is the id of your datepicker field, according to your R code. Here is how to include javascript files into shiny.
var datepickerId = "myDate",
updateDatepicker = function(){
obj = $("div#"+datepickerId+" .form-control.datepicker");
if(obj.data().hasOwnProperty("datepicker")){
obj.on('changeDate', function (ev) {
$(this).datepicker('hide');
});
} else {
window.setTimeout(updateDatepicker(),100);
}
};
updateDatepicker();
// alternative: window.onload = function(){ updateDatepicker(); };

wp_editor: How to load wp_editor on demand using jQuery?

I am trying to load wp_editor on demand using jquery/javascript.
Somehow I got success using following code but it does not save changed data in the element.
tinyMCE.execCommand('mceAddEditor', false, textarea_id);
I'll really appreicate any contribution.
When we use wp_editor() it loads WordPress default visual editor.
You must load:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
Working example : http://jsfiddle.net/rupomkhondaker/j7brgyL2/
<textarea id="test">Easy features.</textarea>
And the code is
$(document).ready(function() {
tinyMCE.init({
mode : "none"
});
tinyMCE.execCommand('mceAddEditor', false, 'test');
});
Simply use
tinymce.execCommand('mceAddEditor', false, 'textarea_id');
Here is another example example:
<textarea name="sectionContent_1" id="sectionContent_1"></textarea>
script:
var textAreaID = 'sectionContent_' + sectionID;
$(this).parent()
.find('.sectionOptions')
.html(ctHolder).ready(
function() {
tinyMCE.execCommand('mceAddEditor', false, textAreaID);
}
);
and the most simple way is
tinyMCE.execCommand("mceAddEditor", false, id);
tinyMCE.execCommand('mceAddControl', false, id);

How can I reinitialize a bootstrap datepicker?

A bootstrap datepicker is initialized on load. How can I change the options for that datepicker after the page is loaded and the datepicker has already been initialized?
See here for an example http://jsfiddle.net/Leoqs1xg/
The weekStart is set to 4 (Thursday) at first with
$('#mydate').datepicker({weekStart: 4});
but if I change it to something else with
$('#mydate').datepicker({weekStart: 1});
weekStart is still 4.
There is now a method destroy available.
I would do it like this:
$('#sv_pickup_date').datepicker('destroy').datepicker({
format: 'dd/mm/yyyy'
, autoclose: true
, startDate: '20/08/2018'
, endDate: '24/08/2018'
});
Optionally you may want to also use clearDates method.
Like this you can define your own reinitialize method for bootstap datepicker.
I think you need to remove and re-initialize the object
More info here
Bootstrap Datepicker re-initialize date format
I faced the same hurdle in my current project where on change of dropdown I recreate and recheck the available dates. So for that purpose I needed to send over ajax new enabled dates. #strapro was on the right track.
if (called_from_type_of_retreat == 'IGR') {
var myMinDateToday = getTodaysDate();
var enabledDatesArrayIGR = '';
$('#arrival_date_div_IGR').datetimepicker();
/*Ajax call for IGR*/
$.ajax({
type: "get",
url: "getAjaxAvailableDatesIGR",
data: {
"todays_date": myMinDateToday
},
dataType: "json",
success: function(data) {
/*Assign array which is returned as Json*/
enabledDatesArrayIGR = data.availableDatesArray;
/* DateTime Pickers */
$('#arrival_date_div_IGR').datetimepicker('destroy');
$('#arrival_date_div_IGR').datetimepicker({
format: "DD.MM.YYYY",
ignoreReadonly: true,
enabledDates: enabledDatesArrayIGR
});
},
error: function(xhr, status, errorThrown) {
console.log(xhr.responseText);
}
});
}
Pay attention to raw initialize of datetimepicker lines 4.
Then in Ajax call I destroy that datetimepicker (line 17) of datetimepicker and set my settings line (18-22).
My version of eonasdan bootstrap datetimepicker is : 4.17.45
There is no re-initialization. However if you update the value of the input programmatically, for example another part of your code, and want to see the change when you open the picker you could use setDate to read the new value.
// var mynewdate = your-converted-to-date-string;
$('.datepicker').datepicker('setDate', mynewdate);

Unobtrusive client side validation in partial view not working

I have read most of the posts on here relating to this issue and I still can't see what's wrong. Can someone have a looksy please? I am getting an error "Cannot read property 'unobtrusive' of undefined" If I comment out that line then I get "cannot read property 'options' of undefined" So obviously I have something referenced improperly but I can't see it. If I take all the validation code out the form pops up and works fine, but of course no validation. Also, I've tried putting "#updateContactForm" in place of "#updateDialog" and got the same results. Hoping this is something simple that I just can't see from looking at it for too long. Thanks in advance!
<div id="updateDialog" title="Update Contact"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$("#updateDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html(''); //make sure there is nothing on the message before we continue
$("#updateContactForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
linkObj = $(this);
var dialogDiv = $("#updateDialog");
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updateContactForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($("#updateDialog"));
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog("open");
});
return false;
});
Just to check, have you correctly referenced the jquery validation scripts in the cshtml or master page?.
You should load first the script jquery.validate.js and then the jquery.validate.unobtrusive.js one.

Categories

Resources