jQuery Datepicker okay on first load of a page but fails thereafter - javascript

This is the second time I have asked this question. Neither the responses I received initially nor any of the myriad of other answers to similar questions have helped me to solve the problem.
The problem is that once a datepicker object is initialized, a second initialization causes it to fail. I have tried all sorts of blurring and destroying but nothing has worked for me.
Please take a look at this simple page which demonstrates the problem
Here is the javascript for the page that contains the datepicker input elements...
$(document).ready (function(){
sp = " ";
lf = '\n'
$(function (){
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
})
})// document ready
I would truly appreciate any help to get this working. I've already spent about eight hours with no success.
Thanks,
-dmd-

Your code is obsolete. you got a document ready function inside of an document ready function ( $(function(){}) is a shorthand of $(document).ready(function(){}). But this isn't the Problem. Use the following code in your divtest.html and remove the calls in datepicker.html:
$(function(){
$(document).on('DOMNodeInserted','input#datepicker,input#datepicker2', function(){
$(this).datepicker();
});
}

Finally, I have a solution and it is simple.
On the datepicker page, before initializing datepicker, add this line
$('#ui-datepicker-div').remove();
then
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
This works for me and I truly hope it works for everyone else who has been bogged down with the issue.

Related

Append function doesn't work on IE

I don't know why this code isn't working on IE:
storyEl.append(storyImageEl);
storyEl.append(storyTitleEl);
storyEl.append(storyAuthorEl);
storyEl.append(storyContentEl);
storyContainer.append(storyEl);
return storyContainer;
storyEl.append(shareButton);
I am not sure if they are the issues, but essentially on my page: http://soulrelicsmuseum.me/Stories.html. These are completely not showing on IE.
Would really appreciate it if someone could point me to the right direction.
I tried adding var on before storyE1 but didn't work.
You need to add your arrangeStories(); in jquery.ready. When your code is ready to run, DOM is still not ready.
$(function(){
arrangeStories();
})

$.alert is not a function in Jquery in console error

I'm executing an alert with Jquery as like $.alert(param); The console is providing as $.alert is not a function.
How to overcome it ?
function AlertModelPoupMast(param) {
$.alert(param); //It's custom alert. dont suggest normal alert() here please.
return false;
}
If I place $.noConflicts() it is working for first time , but after that again not working.
function AlertModelPoupMast(param) {
$.noConflict(); //working for 1 time. not working from 2nd time.
$.alert(param);
return false;
}
Replace
$.alert();
to
alert();
This can happen when you not included jquery file or $ is conflicted with some other plugin, changing $ with Jquery may solve that problem,
I think you are using craftpip custom alert like here
here you look with the issue
https://github.com/craftpip/jquery-confirm/issues/32
me also faced similar issue. And the issue was jquery.min.js loaded twice which caused conflict. Make sure jquery and all other js files loaded once. It may fix the problem. Also put jquery.min.js at the top of other js files if possible, because jquery plugin may be needed by other plugins.
Hope it'll help someone.
Use
alert("Your message");
Please ask for clarification if needed.

Multiple timepickers in the same page bug

I notice a strange behavior when there are multiple timepickers in the same page.
After switching between the two timepickers, eventually one of them isn't removed/hidden, and will persist till we refresh the page.
I thought it was a problem with my code but then i did a test with a simple bootstrap example i found on google.
Fiddle bug example:
http://jsfiddle.net/kW3G7/282/
The only code that is used is:
`$('.timepicker').timepicker();
Thanks in advance.
Edit: i created a issue in there github project
Edit 2: It seems that the timepicker stops calling the document onclick event(code above)
$(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
// This condition was inspired by bootstrap-datepicker.
// The element the timepicker is invoked on is the input but it has a sibling for addon/button.
if (!(self.$element.parent().find(e.target).length ||
self.$widget.is(e.target) ||
self.$widget.find(e.target).length)) {
self.hideWidget();
}
});
Solution, for now, remove the "touchend.timepicker" from the "on" event trigger.
I don't think it is the proper/final solution but it seams to work.

Problems Implementing a Premade Javascript

I would first like to state that I started learning HTML 5 days ago, and therefore I am very new to everything.
I am trying to implement the code given here: http://jsfiddle.net/NFXzn/9/.
But for some reason the dropdown menu is blank. I have uploaded my code here: http://gbrowse2014.biology.gatech.edu/viru.html
Since I did not make the code, I am assuming the problems lies with how I implemented the code (specifically the javascript). I have narrowed the problem down to one particular function:
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
I am using firefox, and I have gone through www.w3schools.com to look for implementation tips, but I have not corrected the problem.
On a sidenote, does anyone know how to change the code to use the dropdown-checkboxes instead of the dropboxes?
That loop is working fine. The problem is that you're running the code before your select is loaded, so nothing is being appended to the page. Either wrap your code in $(document).ready( function() { ... });, or move your <script> blocks to the bottom of the page (after the HTML has completely loaded).
http://learn.jquery.com/using-jquery-core/document-ready/
(On the top-left corner of the jsFiddle page, you'll see a dropdown which displays onLoad -- which is automatically doing that job for you. Your page as it stands is the equivalent of No wrap - in <head> -- not what you want.)

IE 8, object required javascript function

I have been looking all the day about my strange problem.
I have a page, which is loading dynamically content via ajax (with jQuery), but I think it's not a jQuery problem.
The dynamic page contains a javascript function, let's call it "myTestFunction()", without any parameters.
After document.ready (jQuery) or at the end of the page, I call this function. Firefox runs this function. IE 8 said: object required. I think IE can not find the function.
I am very confused about this IE message. My hope is somebody will have an idea about this. How can I tell IE where the function is?
Kindest regards, many thanks for answers.
!!!! This Code explains the Problem, running not tested but it should descript the Problem, i hope. Sorry for the strange "code formatting, this is my first example of code in this editor".
//example of code, a code like this is loaded by our Framework with ajax in a div.
<? //myclass generates the HTML-Output, and generates the Function
//myTestFunction in an JavaScript Tag see below
$myClass = new MyClass('127.0.0.1/application/file.php');
echo $myClass->renderHTMLcode();
?>
<script>
// alert 1 for me for testing.
alert('ende');
$(document).ready(function() {
// alert 2, for me , ready event of jQuery has fired
alert('ready');
// function with the problem
myTestFunction();
}
);
<script>
function myTestFunction()
{
alert('fromTest');
}
///...
}
}
?>
you should use, window.myTestFunction()
but this is a very strange error ie is giving you. maybe you should take a look at this

Categories