I have got a problem with a script on a website I am developing. It works fine in Safari, Opera and Chrome, but it doesn't work in firefox.
As you click a link, I try to load the div #contain from internal links to an overlay div, which then is unhidden. All this is working fine in the browsers I have mentioned above, but it wont work in firefox, the click function just opens the link (reloads the page) as it would normally do.
Any Ideas why it does not work in Firefox? Anything that I am missing?
$(document).ready(function(){
var $ov = $('.overlay'),
$tp = $('#transparent'),
URL = ' ',
siteURL = "http://" + top.location.host.toString(),
$internal = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']:not('.no')"),
hash = window.location.hash,
$el, $allLinks = $("a");
$tp.hide();
$ov.hide();
$tp.click(function(){
$ov.empty();
$tp.hide();
$ov.hide();
});
if (hash) {
$ov.show();
$tp.show();
hash = hash.substring(1);
URL = hash + " #contain";
$ov.load(URL);
};
$internal.each(function(){
$(this).attr("href", "#" + this.pathname);
}).click(function(){
$tp.show();
$ov.show();
$el = $(this);
URL = $el.attr("href").substring(1);
URL = URL + " #contain",
$ov.load(URL);
});
});
I think you are missing preventDefault in your click function. This tells jQuery/javascript to not follow the default action which in your case would be following wherever the link is pointing to in HREF.
Instead of
$tp.click(function(){
$ov.empty();
$tp.hide();
$ov.hide();
});
It should be
$tp.click(function(e){
e.preventDefault;
$ov.empty();
$tp.hide();
$ov.hide();
});
instead of
$tp.click(function(
try
$(document).on('click','#transparent',function(event){
//do whatever you want to do
});
Try to change the default behaviour of the browser :
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
Related
we use instapage as a tool for landing pages and they strip url parameters from links if users click on tags with external links. I want to preserve the location.search though.
I tried using this script here, but it doesn't work at all - as in, the parameters still get removed unless they are specified in the href link.
window.addEventListener("click", function(e) {
var href = e.target.getAttribute("href");
if(href) {
location.href = href + window.location.search;
e.preventDefault();
}
});
Anything obvious I am missing here?
I solved the issue by just modifying the hrefs on page load instead of trying to add the parameters onClick. Here is the code - also respecting urls that already have parameters in them.
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('[href^="http"]').forEach((element) => {
var hrefString = element.getAttribute('href')
if(hrefString.includes('?')) {
element.setAttribute('href', hrefString + window.location.search.replace('?', '&') )
} else {
element.setAttribute('href', hrefString + window.location.search)
}
})
});
I'm writing a basic Flask app. I have a page called /searchByCollege that consists of a bunch of buttons, each with a team name as their text, and .college as their class.
I've written some JS so that, when the user clicks on a button, it'll load /searchByCollege/collegeName, where collegeName is the text of the button they just clicked on. Here's what I have:
<script>
$('.college').on('click', function() {
var baseURL = $('#baseURL').text();
var finalURL = baseURL + "/" + this.text();
window.location.href = finalURL;
return false;
})
</script>
I didn't originally include return false; and nothing happened upon clicking a button. Then I added return false; and I got the same result. I've inspected the HTML and the base URL is correct (it's just /searchByCollege). I've looked at the requests as I click on the button and none are being made.
I've loaded jQuery above this through Google's CDN so that's not the issue.
Any other ideas?
Thanks for the help,
bclayman
this.text()
needs to be changed to
$(this).text()
You need to wait for the document to load by using $(document).ready:
<script>
$(document).ready(function(){
$('.college').on('click', function() {
var baseURL = $('#baseURL').text();
var finalURL = baseURL + "/" + this.text();
window.location.href = finalURL;
return false;
});
});
</script>
I could not figure out where you were getting the 'baseURL' Since you are using just JQuery you need to call .value and not .text()
<button class="college" value="CSU">CSU</button>
$('.college').on('click', function(){
var baseURL = "/searchByCollege";
var finalURL = baseURL + "/" + this.value;
return false;
});
you can try this
window.location.hostname = finalURL;
window.location.pathname = '';
$('#resultsDiv').on('click', '#seeTemplates', function () {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
This code function well but it has a side effet that surprises me: as I click on the link a new tab opens with the good link. But the main windows also loads the good url. Why does it open a new window?
EDIT
New code as per requested:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
alert("Clicked");
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
I'm now investigating on 2 possibilities:
Can a delegate have this kind of result?
Is it the normal behavior of a windows.location.href jquery call?
Try this, adding the function(e) and e.preventDefault() will stop the browser's default action:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
e.preventDefault();
});
I can't comment (due to being new here) so you might want to try to add e.preventDefault() there to prevent / block the default action (there are other ways too)
If you want to open a new tab with JavaScript try this;
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
// Prevent default action
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
// Open in new tab
var win = window.open(url + "?templateName=" + ebayTemplate, "_blank");
// Focus on new tab.
win.focus();
});
I hope this helps.
Because #seeTemplates is a link (per OP comment), both the default link action and your custom event handler are running. To avoid that, you'll need to prevent the default behavior of the link:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
You could also just change the element to be some other type (perhaps a <span>), and avoid the problem altogether.
I am using window.showModalDialog for opening a Pdf file it works in every browser but not working in IE8..it gives an empty modal...
here`s my function
function OpenHippaAgrementStaff(HIPAAFile) {
var mylink = "HipaaDoc/" + HIPAAFile;
window.showModalDialog(mylink, self, 'status:no;resizable:yes;help:no;scroll:no;width:1000;height:600');
return false;}
why dont you try by giving full URL like below,
function OpenHippaAgrementStaff(HIPAAFile) {
var mylink = "FULL_URL_HERE_WHERE_THE_PDF_IS_LOCATED/" + HIPAAFile;
window.showModalDialog(mylink, self, 'status:no;resizable:yes;help:no;scroll:no;width:1000;height:600');
return false;}
use document.location object to get full url
Hi ive made a mp3 player using javascript, its working perfectly on everybroswer except IE10
Ex of page : http://www.mupiz.com/noon (try to click on a song)
But IE10 follows the link and ignores the script before...
Here's My script :
var list = $("#playlist").find("a:not(.songLink)");
listNC=new Array();
for (var i=0;i<list.length;i++) { // we get all the song
list[i].rel = i;
$(list[i]).parent().parent().prepend("<td class='notplayed' width='25px'><img src='../../images/lecteur-B-playlist-play.png' style='z-index:10000'/></td>");
listNC[i]=girlify(list[i].href);
list[i].onclick = function(event) { // onclick on each link
if($(this).attr('class')!="songLink"){
soundManager.stopAll();
current = this.rel;
event.preventDefault();
lire_current(); // this play the song
return false; // **this does not work!**
}
};
This is the dedicated part of the CSS
You have a lot of mix'n'match jQuery with regular DOM code and it's kind of confusing. I think it has only been working in other browsers out of luck on your part. Ultimately, I believe IE is getting an error on your call to preventDefault because it has a different event model and you're not using the leveled out jQuery event. This means preventDefault doesn't do its job, and the return false is never reached due to the error.
I would modify the extracted code as follows:
var listNC = [],
current;
$('#playlist')
.find('a:not(.songLink)')
.each(function (i) {
var $this = $(this);
$this
.attr('rel', i)
.parent()
.parent()
.prepend('<td class="notplayed" width="25px"><img src="../../images/lecteur-B-playlist-play.png" style="z-index:10000"/></td>');
listNC[i] = girlify($this.attr('href'));
})
.on('click', function (e) {
soundManager.stopAll();
current = $(this).attr('rel');
lire_current();
// Event control:
e.preventDefault(); //keeps link from being followed
//I don't think you want either of these next two lines:
e.stopPropagation(); //keeps event from bubbling...probably not what you want
return false; //causes same as calling e.preventDefault() e.stopPropagation()...probably not what you want
});
I couldn't test it of course, but I think it will do what you want.