I try to change some links on a webpage using the following code for jQuery on Rails
$(function () {
$('#lesson a').live('click', function () {
$.getScript(this.href.replace(/^(http...[^\/]+)?\/+(.*)$/,'/ajax/\\$2'));
return false;
});
})
This trick works for Chrome and Safari, but fails (nothing happens on click) for Firefox and Opera. What can be wrong with the code?
EDIT1:
The webpage contains:
<div id="lesson">
Subject 1
...
</div>
On click, a browser (i.e. Firefox and Opera) should make an ajax-request of /ajax/subj1.
You replace the string with '/ajax/\\$2'.
You have an extra backslash - if you expect the result /ajax/subj1, use '/ajax/$2'.
Related
So I have a very simple JS function written that works like the following.
There is a button that has the following code:
<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
<i class="icon-shopping-cart"></i> Add to Cart
</button>
Now when that is clicked there is a very simple function added to the page below that looks like the following:
<script type="text/javascript">
function addCart(pid, pattr, pval, pscent = 0) {
...
}
</script>
This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.
But this does not seem to work on Safari on Mac. Instead I get the following error:
ReferenceError: Can't find variable: addCart
I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.
I finally found the issue.
The function was creating an error in Safari so it was never being defined. I changed the function to the following:
function addCart(pid, pattr, pval, pscent) {
pscent = (typeof pscent !== 'undefined') ? pscent : 0;
...
}
Notice the big difference is that I was no longer using the Function to declare a default value for 'pscent' and instead I do it the old school method. Not sure if this is being caused by an older version of Safari or what.
If you are here because of a similar error, look for some potential JS error in the function which will prevent the function from being declared.
Looks like you are submitting a form since the input type is "submit". Have you tried testing it with the input type set to "button"?
if you are using jquery try to use document ready function
$(document).ready(function() {
// code here
});
or use plain javascript self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
the possible reason is your function is not available at the time of click
Here is a sample (using jquery) https://jsfiddle.net/baphmoLt/
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.
I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.
The code looks like this:
<div id="button1">
<div id="work_title" class="title_james">
WORDS
</div>
</div>
<div id="button2">
<div id="work_title" class="title_mike">
MORE WORDS
</div>
</div>
and the script effecting it looks like this
<script>
$(function() {
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
});
$(function() {
$("#button1").hover(
function() {
$(".title_james").css('width', '785px')
}, function() {
$(".title_james").css('width', '')
});
});
</script>
what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..
I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn't work at all.. so when I got this to work in firefox I was all happy... then I did cross browser checking and I got sad again..
You can see it live in action at:
http://roboticmonsters.com/who
Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.
IE:
Chrome:
$.css takes an object:
$("#james").css({'z-index': '100'});
Note the curly braces and colon (not comma).
This is so you can specify several css rules in one:
$("#james").css({'z-index': '100', 'height': '100px'});
If you are getting the value of a css rule, just pass in the name as a string:
$("#james").css('z-index'); // returns 100
It's possibly because you are trying to bind to those events before the DOM has loaded.
I didn't have much time to give you an answer as to why it was broken, but the following works for me in chrome.
$(document).ready(function() {
$("#button2").hover(function() {
$("#james").css('z-index', '100');
$(".title_mike").css('width', '590px');
},
function() {
$("#james").css('z-index', '');
$(".title_mike").css('width', '');
}
);
$("#button1").hover(function() {
$(".title_james").css('width', '785px');
},
function() {
$(".title_james").css('width', '');
}
);
});
if just use the code below it works fine:
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
Otherwise Chrome reports: Unexpected token ILLEGAL. To see this yourself, right-click on the page and choose inspect element. Click the small red x in the bottom right.
Update: actually your code works fine if you remove the illegal character as shown in #anothershubery's answer
The javascript code below is about half way on my php page, I can't directly modify the radio buttons with IDs q_251_789 and q_251_790 on my page unfortunately, hence why I'm using JS to add attributes to those two radio buttons:
<script><!--
$("#q_249_249").hide();
$("#q249").hide();
$("#q_251_789").attr("onClick","yesClicked();");
$("#q_251_790").attr("onClick","noClicked();");
function yesClicked()
{
$("#q_249_249").show();
$("#q249").show();
$("#addressTable").show();
};
function noClicked()
{
$("#q_249_249").hide();
$("#q249").hide();
$("#addressTable").hide();
};
//--></script>
In Chrome (dev), FF (3.6), and IE8 this all works fine.
In IE6 and IE7 the following two lines of the script do not work but are not producing any errors (According to IE dev tools -> JS debugger):
$("#q_251_789").attr("onClick","yesClicked();");
$("#q_251_790").attr("onClick","noClicked();");
Any ideas what I'm doing wrong?
Or a workaround to achieve the same goal?
Instead of setting an event handler .attr() attach the .click() handlers the unobtrusive way, like this:
$("#q_251_789").click(yesClicked);
$("#q_251_790").click(noClicked);
Or, use anonymous functions like this (the combined selectors is just a shortcut, but unrelated):
$("#q_251_789").click(function () {
$("#q_249_249, #q249, #addressTable").show();
});
$("#q_251_790").click(function () {
$("#q_249_249, #q249, #addressTable").hide();
});
HI,
I am developing a web page using asp.net.
I am using some links in my web page. For that I have used some code like this.
Test
and in the ChangeLoc() method I have written __doPostBack event.
This works fine in IE7 installed in my machine. But in IE6 in another machine it does not invoke the __doPostBack event.
Edit
When I change the void(0) in href it works fine.
I would like to know whether it is a bug with IE or a JavaScript problem.
function ChangeLoc( param, arg )
{
__doPostBack ( param, arg )
}
href and onclick both get fired when you click an element, you are overwriting the onclick event with void()
change to
test
or with jQuery.
$(function(){
$("#linkId").click(function(event){
ChangeLoc();
event.preventDefault();
});
});
Do you get an error? If so, what error do you get in IE6? Can you post the code for ChangeLoc()? Also, try changing your markup to the following and see if you get the same result:
Test
Edit: removed 'javascript:' from the onclick
You can also use unobtrusive javascript syntax:
test
<script type="text/javascript">
document.getElementById("chngLink").onclick = function(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
ChangeLoc('TEST','');
return false;
};
</script>
it is not good to use <a>-element for javascript functions call.
Use styled <span onclick="my_function()" class="looks_like_hyperlink">...</span>