Code works fine in JSFiddle but not in my browser - javascript

I'm working on multiple dropdown menus to be used for ranking. I found this excellent code from stackoverflow:
How to prevent duplicate values in multiple dropdowns using jQuery
It works nicely on JSFiddle, but I can't seem to get the code to work offline in my Chrome or IE browser. Can someone help?
<script type="text/javascript">
$(document).ready(function() {
$(".go").change(function() {
var selVal = [];
$(".go").each(function() {
selVal.push(this.value);
});
$(this).siblings(".go").find("option").removeAttr("disabled").filter(function() {
var a = $(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value != a))
}).attr("disabled", "disabled");
});
$(".go").eq(0).trigger('change');
});
</script>

It depends on what "doesn't work" means for you. :) Can you see any errors on your console? Can you see all the 5 selects? Did you copy correctly the codes? The JSFiddle code works perfectly for me with 2.1.4 jQuery.

Related

Click Function Not Working in IE - Jquery

I have an issue with my jquery code, I have created a type of calendar where an overlay is presented with additional information if you click on a date. It works fine in chrome, it does exactly what I want but in IE nothing happens when you click on the dates, no overlay is presented. Been struggling with it for a while and really need some help with it. Here is the code:
$(document).ready(function() {
for(let i=0; i<50; i++) {
$("#calendar" + i).each (function() {
$(this).click (function() {
$("#calendar" + i).toggleClass("bigcalendar");
});
});
}
});
Here is a link to a working example:
http://codepen.io/kmars/pen/BLbQoA
Use attribute selector in jquery. No for loop need for clicking dynamic elements in jquery. And the below code should be working in all Browsers.
$(document).on('click','[id^=calendar]', function() {
$(this).toggleClass("bigcalendar");
});

Disable Firefox auto-search when using keypress() in JS

Question:
I am running a function where you press the keys C or M using the keypress() function and every time I press one of those keys, the letter is marked automatically in Firefox. Is there a way to disable this using JavaScript or is this something Firefox does by default?
I have tried to look for an answer using Google but it seems no one has had this issue before using the keypress() function in JS.
Code:
<script type="text/javascript">
$(document).ready(function()
{
var once = false;
$(window).keypress(function(e)
{
if(!once)
{
if (e.which == 99)
{
once = true;
$("input#left").val( 1 );
$("form").submit();
}
else if (e.which == 109)
{
once = true;
$("input#right").val( 1 );
$("form").submit();
}
}
});
});
</script>
Thanks in advance for any tips!
Just call preventDefault():
$(window).keypress(function(e)
{
e.preventDefault()
// other code
}
There are a few ways of handling this. If you call e.preventDefault() you should be covered, however that's not your only option.
HTML5 introduced many new tags and attributes into markup, one of them being an autocomplete attribute for text fields. If you add this to your HTML (<input type='text' id='myInput' autocomplete='off'>) you should be covered as well. You can't always rely on your user having support for HTML5, but this is still an easy solution to your problem.
It can't hurt you to implement both of these small changes in your code.

Show content on and off with Javascript

What I want to do is, show a some content on and off using css or javascript. not jQuery, the reason is I'm having some jQuery clases and the script below doesnt render. Spent hours trying to find the reason, but couldnt.
I have 2 questions.
Question 1
Can someone help me to translate this to Javascript. A working fiddle here : Fiddle
$(document).ready(function(){
$('select').on('change',function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();
});
Question 2
Is there a way to find what's going on with website's scripts and how they render. Because Im find it hard to see whats blocking the above script. Thanks
for 1 try this :)
$('select').on('change', function() {
var val = $(this).val();
$('div[class$=claims]').hide();
$('.' + val).show();
}).change();
and 2 - use webinspector (press F12) in chrome or firebug in firefox

Small jQuery script not working in IE8

I wrote a small script for an eCommerce site that errors an order if certain conditions aren't met. Now I'm trying to write something so the continue button returns the user to their cart. I can't change the button to add a class.
The problem is that this script doesn't work in IE. I'm not overly familiar with the differences in how browsers handle JavaScript. Does anyone have any ideas?
<script type="text/javascript">
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a/>');
link.attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
</script>
Update: I have since tested this in IE9 and IE10. I'm getting this problem in all IE browsers.
you can try this:
$("#shipping-method-buttons-container .button").click(function(){
window.location = "http://mywebsite.com/checkout/cart/"
})
This is working in IE and others
jQuery(function(){
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a></a>').attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
});
Example.

Error with regex in jquery

I want to validate my textbox on keypress event. As I am newbie with jquery, I searched on google and found one jquery plugin named 'limitkeypress'.
This is my code:
$(document).ready(function() {
$("#title").limitkeypress({ rexp: /^[A-Za-z]*$/ });
});
Plugin library is:
http://brianjaeger.com/process.php
It's giving me the following error
$("#title").limitkeypress is not a function
When I checked the library on jsfiddle it shows me dozens of errors. Is there any other validation library or plugin?
EDIT Thanks everyone for your valuable comment. Finally I got the solution. Though I was including file correctly. but don't know Y it was not working. I wrote jQuery.noConflict(); and all the problem is solved. What exactly it work. Please let me know, though I read but doubt still I have doubt.
regexp is ok:
'buGaGa'.match(/^[A-Za-z]*$/);
$("#title").limitkeypress is not a function probably you forget to inlude library or wrong path.
Check it in Firebug( Net -> All ) lib must be highlight in black, not red.
Made a demo: http://jsfiddle.net/tTASy/
plugin seems to work fine.
Check your path to the script. if you paste a link to your page we could help you more specifically.
You can do this in jQuery like this without the plugin..
$("#your_textbox").keypress(function() {
var length = this.value.length;
if(length >= MIN && length <= MAX) {
$("#your_submit").removeAttr("disabled");
$("#your_validation_div").hide();
} else {
$("#your_submit").attr("disabled", "disabled");
$("#your_validation_div").show();
}
});

Categories

Resources