I am working on a jQuery script on http://www.qxl.dk/ and I can't seem to get IE7 (or more accurately, IE8 in IE7 compatibility mode) to load my content.
The sidebar box on the right named "QXL Aktuelt" loads its HTML content from an external file using Ajax load(), then triggers a custom jQuery event ("aktuelt_loaded") that starts a carousel script (like a scrolling newsticker).
Several other content sections on the same page are loaded through Ajax and they work just fine, so I'm wondering what's going wrong. Everything works as expected in Firefox 3.6 and IE8, but not in IE8's compatibility mode.
The script that loads the Ajax content is (inline on the page):
<div id="qxlaktueltHolder"></div>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
The external script that responds to the event is in the following file:
http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js
All ideas are very welcome.
EDIT:
Looks like your content is being loaded. You seem to have a CSS display issue. Using IE's developer tools, I searched for the href of an a that was loaded properly in Safari
http://www.123hjemmeside.dk/pages/receive.aspx?target=wl&partnerkey=dkqxl:Hobby_aktuelt_1
and found that is was on the page along with all the other content.
UPDATE:
The problem is with your #newsticker element. It, and all of its li elements, have height and/or width properties set to 0.
So whatever code is responsible for sizing/displaying the #newsticker and its content seems to be the culpret.
This is a guess, but this script qxlaktuelt_liveload.js is being loaded after this:
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
So depending on how long the load() takes, the script may or may not be loaded.
Try:
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
Remove all the console in your JavaScript code. For some reason, the IE's break with this.
Related
I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>
I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.
The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support
I have a script being loaded on my index.html page. It has dependencies on jQuery, bootstrap.js, & metisMenu.js all of which are being loaded before it. I can't figure out why this script is not being immediately executed.
If I open the chrome console and run the code, it works just fine, I'm also not seeing any errors in console.
index.html
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.js"></script>
<script src="scripts/custom/sb-admin.js"></script> //This is the script I'm referring to
</body>
sb-admin.js
$(function() {
$('#side-menu').metisMenu();
});
What am I missing here? I'm almost positive $(function() {...}); is shorthand for document ready in jquery, yes?
This script is for the nav.html view, and on index.html, because I was using <div ng-include="'views/nav.html'"></div> the page had technically loaded and executed my script, even though Angular still was loading the ng-include view.
I moved the script into nav.html and now it seems to be working just fine. Thanks to #zerkms for reminding me to use debugger; which I should have done in the first place O_o
try instead
$(document).ready(function() {
});
;-)
and if you try to do an IIFE (look on google)
do
(function() {
})();
I know this code should be working as i've done other websites where it works on both.
http://johslan.tk/
refuses to work in IE 11( The buttons dont do anything)
If you load the page in IE11 and then go to the Console in the F12 developer tools, you see the following Script error:
SCRIPT5009: 'jQuery' is undefined
File: jquery-ui.min.js, Line: 1, Column: 3
Which indicates the page is loading JQuery-UI before it loads JQuery.
Looking at the source on http://projoh.altervista.org/ I see you have the following HTML:
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try switching the two tags and I am guessing it will fix the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
Hope that helps.
When a page first loads we can use window.onload to make sure that all resources have loaded before we do something.
My question is, if we modify the DOM (e.g. inserting some html based on an ajax request), is there any event that will fire when the document is in the 'loaded' state again? (e.g. when the html inserted contains multiple images).
(Solution with jQuery would be fine).
The short answer:
NO.
The long answer:
if you know what you are looking for you can use mutation observers (https://developer.mozilla.org/en-US/docs/DOM/MutationObserver). it is only support in new browser, and in some version of chrome it has memory leaks when used with closures.
BTW,
document.ready doesn't tell you if all (or any..) of the resources were loaded. it only tell you well, that the dom is ready (that is the load function, which will only fire after all resources (well, any resources that isn't requested using a javascript) were downloaded).
You can use .done().
Description: Add handlers to be called when the Deferred object is resolved.
Also there is jQuery plugin See Here
I would say YES (I do not know if this is supported by all browsers. I use it in safari and chrome)
Testcase you can find here : http://maakmenietgek.nl/testcases/domready/ Please note that I cannot get it work in a fiddle, that's why a standalone testcase
The index.html looks like this
<!DOCTYPE html>
<head>
<title>Testcase</title>
<script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#clickme').click(function() {
$.get('ajaxdata.html', function(data) {
$('#addhere').html(data);
});
});
})
</script>
</head>
<body>
<p id="clickme">clickme</p>
<div id="addhere">
</div>
</body>
</html>
The data loaded with the $.get call looks like this
<p>added data</p>
<script type="text/javascript">
$(document).ready(function() {
alert('added data');
});
</script>
The alert shows after the html has been added to the DOM
I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.