I am building a simple form inside an Owl Carousel but I can't get it to work on their version 2.
The problem is when the user click inside the input type on the second version the console log gives an error :Uncaught TypeError: Cannot read property 'name' of undefined.
on the first version everything works fine. Here is a fiddle for v1 I was just wondering if somebody can take a look, I tried using mouseDrag:false but it doesn't do the trick.
And here is the link for version 2 and the code goes like this:
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
mouseDrag:false
});
// Go to the next item
$('.customNextBtn').click(function () {
owl.trigger('next.owl.carousel');
})
});
This post is over 3 years old, but I came across the same issue. It took me hours to find a solution, so I want to share it with anyone who might be interested.
I don't know what exactly causes the error, but I figured that the error is thrown whenever the focusout event is triggered. Unfortunately, preventing focusout from bubbling didn't solve my problem.
After browsing the project's issues on GitHub, I came across this article where user with nickname "ghost" suggests a solution. The problem can be avoided by disabling onclick and onchange events of the input.
This code worked for me:
$("#controls").on('click change', function(event) {
event.stopPropagation();
});
where #controls is a <div> wrapper around all my form controls
Related
I'm new to Polymer and as far as I've read about it, it isn't compatible with Mozilla and Safari or it has issues. I've read in StackOverflow that adding
addEventListener('WebComponentsReady', function() {
});
would help the browsers cope up with the code. Now, I've tried it on my code it works. The content is displaying properly in Mozilla, however, it messes up the Javascript that I wrote along with Polymer. I tried two options, the first one
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
}); });
I did this and there are still error logs on the console while if I wrap the whole script, it wouldn't work as well. Example:
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
});
// extra code here
});
I think wrapping addEventListener to the whole code is also causing the problem. Any ideas how to fix or are there any other viable options than adding an event listener to the code?
Try using Polymer-CLI
It comes with some polyfills out of the box.
I'm not sure whitch ones but it does include the one your inquiring about.
https://www.polymer-project.org/1.0/docs/tools/polymer-cli
It looks like using
addEventListener('WebComponentsReady', function() {
});
is messing up my Javascript because it has a conflict with
addEventListener('HTMLImportsReady', function() {
});
I had to remove it in order for the script to work properly.
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.
I use ckeditor on my website, and from time to time when I load my page I get this error which blocks the ckeditor:
"Cannot read property 'getComputedStyle' of undefined ckeditor"
Here's the code that initializes the ckeditor :
CKEDITOR.replace('TA_comments', {
toolbar: 'MyToolbar_user',
on: {
'instanceReady': function (evt) {
//Set the focus to your editor
CKEDITOR.instances.TA_comments.focus();
}
}
});
Any idea where it can come because it's really a random problem on all browsers?
Thanks !
I was getting a similar error and it was caused by calling $('#id').empty();
Followed the ideas in this post:
How do I clear the contents of a div without innerHTML = "";
and used this code:
var node = document.getElementById('id');
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
I found the problem. It was a problem with a jquery plugin mscustomscrollbar.
To resolve this I deleted the plugin and used css3 to style scrollbar.
I Had the same problem. My solution was: Client was using adblock pro, and I found out that in adblock our page that is using ckeditor is blocked! Removed our page from adbblock and it works fine now!
I was also facing same issue. I put a delay on the .replace() and it's working fine now. As this is not a good solution I Know but I didn't find the exact cause and also it's generating randomly so finally I put a setTimeout() and the problem has been resolved
As per this issue using divarea plugin will solve this by replacing iframe used in editable area with a div
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
In a partial view I have these lines of scripts:
<script type="text/javascript">
$(document).ready(function() {
$('#randomCard').click(function () {
alert("button clicked!");
$.get("#Url.Action("GetRandomCard")", {}, function (data) {
$('#rightSide').html(data);
});
});
})
</script>
This calls a Get method in my controller which returns a random card from a database. In chrome, this methods is 100% working. Firefox fires the event 100% of the time too. But in IE the action is fired only once while the alert always pops.
Can somebody help me figure out why?
EDIT
Following everyone's advice, I have debugged my session which made me realize that the html data was being added, not replaced. I have created an upper div #rightSide which gets updated with the data, thus resolving this small problem.
However, the problem of IE calling the partial view controller method is still active and I appreciate everyone's help to resolve this issue.
Fire up a debugger in IE. Run and see what fails.
Catch if there is an error from $.get(…).
( I bet on the randomCard-control being a anchor link and there being i subtle bug that makes the anchor get the page again. )
Don't forget to post your findings.
even if it is not an
$(document).ready(function() {
$('#randomCard').click(function (e) {
e.preventDefault();
alert("button clicked!");
//etc