Strange bug with function in jquery - javascript

I'm trying to use a script on my website who pop a navbar. There is a declaration on this script :
(function($){
$.cookieBar = function(options,val){
....
};
some other stuff here
})(jQuery);
We can see this script here it's working without any problem on all of my website called with :
$(document).ready(function(){
$.cookieBar();
});
In just one webpage there is a bug (css and js are include) :
TypeError: $.cookieBar is not a function
$.cookieBar();
I don't understand why. If anyone have any idea. On this webpage there is one major script who is working normaly without this cookie-nav-script but because of this bug nothing work at all.
I don't use any experimental stuff from this script and I attached this cookies-bar at the body.

Related

WordPress jQuery.load() pagination link gives 404

I'm trying to build a jQuery-based next/previous navigation but ran into a roadblock of a weird error. Here's a very much simplified version of what I'm trying to do:
$('.next').click(function(ev) {
ev.preventDefault();
$('main').fadeOut();
$('main').load('/page/2/ main .content', function() {
$('main').fadeIn();
});
});
The next page link is usually generated dynamically of course.
Clicking on the link gives a 404 error in the Chrome developer tools and the content never loads into the main tag. Changing it to a rewrite-less /?paged=2 also 404's. When inserting a link to a page however (like /contact/) works without without a problem. Directly entering the link works as well, so rewriting is working correctly.
This is driving me nuts. Anyone has an idea how to make this work?

Something overwrites window.onbeforeunload in Javascript

Hello guys,
I have a strange problem with my ASP.NET 4.5 page. For some strange reason, my window.onbeforeunload function gets overwritten every time I load the page. Inside the debugger, I can clearly see that the right value is set in my head section, if I place a breakpoint there. However, after finishing the loading process of the site, the value changes to the following:
function (a){return typeof p!="undefined"&&(!a||p.event.triggered!==a.type)?p.event.dispatch.apply(h.elem,arguments):b}
I have no idea where this is coming from. This is my code from the head section of the page:
window.onbeforeunload = function (e) { return 'Do you really want to cancel?'; };
I'm using JQuery 2.1.3 as well as DevExpress 14.2 in my project. Any idea what could be responsible for this weird behavior?
Thanks in advance!
I actually found the answer where this is coming from thanks to #DavidTansey's hint. It's the Browser Link feature that was introduced in Visual Studio 2013. It looks like Browser Link uses some old jQuery library and overwrites various handlers.
So if you are having the same issue, please try to disable the feature (the menu is next to the browser selection in the tool bar). This should solve the problem.
I'm pretty sure that this problem wouldn't appear on a real server, because it would likely not use Browser Link.

Can anyone detect why my jQuery is firing on my homepage, but isn't firing on a different page within the same domain?

I have been having some issues getting jQuery to work on some parts of my website. To test if the jQuery would fire I prepared a bit of jQuery that launches everytime my header file is included.
When I am at the home page the jQuery fires properly and the pop-up comes up. As soon as I move to a different section of the site. The same jQuery code included in the header isn't firing. I have checked the console for errors or faults and couldn't find anything.
A test location of the website would be at this location
That is the homepage of the site, if you visit it a pop-up will appear. If you browse to this link the jQuery doesn't fire even though it's still there in the code.
The jQuery code I'm trying to launch is as follows
<script type="text/javascript">
$(function(){
$('#overlay').fadeIn(200,function(){
$('#box2').fadeIn(400)
});
return false;
});
</script>
I'm not very experienced in debugging jQuery and have tried consulting some other questions and forums thought these solutions or attempts didn't seem to work for me. I was hoping I could get a hint in the right direction here.
Your code
$(document).ready(function() {
$('#slider2').s3Slider({
timeOut: 4000
});
});
appears to be raising an error which causes the javascript processing to stop. The element '#slider2' element does not exist on this page. Either remove this code or add a guard condition such as,
$(document).ready(function() {
if ($('#slider2').length) {
$('#slider2').s3Slider({
timeOut: 4000
});
}
});

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.
This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1
I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

Using Google Chrome to debug and edit javascript embedded in HTML page

Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?
Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.
I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...
None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.
Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.
Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source

Categories

Resources