jQuery AJAX load IE6 issue - javascript

I have a main HTML file with all the jQuery and JavaScript files included in it. Now I have a table which has a expand/collapse functionality. This table is in a different HTML file.
I am trying to load the table in the main file. I was successful in loading the table in the main HTML file but the expand/collapse is not working only in IE6/IE7. This works fine in FF, Chrome, Safari and IE8.
local.js has the expand/collapse code
table.html is the html file which has only the table code and no JavaScript.
MAIN HTML:
<html>
<title>Main html</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" scr="localjs.js"></script>
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
});
</script>
</head>
<body>
<div id="ajaxtable"></div>
</body>
</html>
I can see the table gets loaded in the ajaxtable div but the expand/collapse is not working only in IE6.

As I mentioned in my comment above, you are loading localjs.js before the $('#ajaxtable') call. Attach the click handler after the table has been created and you should be fine...
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
$('table tr.heading').click(function(){ $(tr.alpha).slideToggle('slow'); });
});
</script>

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

Need to understand JQuery load on click on a link flow and mistakes in my code

I am trying to make my 10 pages static website dynamic so that everytime i don't need to design every page as the same home page. I have tried few jquery statements to load data into div on click of a link.
I have tried the following code and it didn't work:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("demo.txt");
});
$("#link").click(function() {
$("#div1").load("demo.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
<br>
<br> click here </body>
</html>
I have got this from W3School's online Tryit editer. It works fine there but not in my local webpage on my machine. Can I get an explanation what is happening and what I am missing. Thanks.

EJS File Not Recognizing JavaScript File's Code

I am creating a website, I am using a NodeJS server. In my public folder I have a script named website.js and it has the jQuery code to give a console.log when the h1 is clicked. (Code Below). But when I click on the h1 in the browser it does not work. The file is loaded properly, gives no 404 error and my CSS stylesheet works fine.
Further Testing: I did a simple test to see if it would give back the text when I called the variable (test code below) it responds with: "" (two quotation marks) so it must not be recognizing it.
//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/javascripts/website.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<h1 id="testh1">TEST</h1>
</body>
</html>
You need to load jQuery before your script.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
You need to wait for the DOM to be ready before accessing any elements in it. You can either do it with the following code:
$(document).ready(function() {
$("#testh1").on("click", function(){
console.log("Clicked");
});
});
or by putting your <script>s at the bottom of the <body> instead of in the <head>.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
</body>
You're getting an empty string in your test code because your #testh1 element hasn't been loaded yet.

Unable to slideUp div using jQuery

I have downloaded the 1.11.3.min.js file and placed it in the same file where I have kept the HTML and script files. Before writing this code I have practiced jQuery a lot and those time I have succeeded, but this time I can't run it.
HTML
<!DOCTYPE html>
<head>
<!---<script type="text/javascript" src="image.js"></script---->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.js"></script>
<!---<link rel="stylesheet" type="text/css" href="image.css">---->
</head>
<body onload="slideimage()">
<img src="1.jpg" id="slide" width="400px" height="400px"/>
<div id="button">
`enter code here`<button onclick="change_image()" />1</button>
</div>
</body>
</html>
jQuery
$document.ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
I have downloaded the 1.11.3.min.js file and put in the same file where i have kept the HTML and script files.Before writing this code i have practiced jQuery a lot and those time i have succeeded.But this time i have failed to run it.
Just replace this line of code
$document.ready(function(){
with this line
$(document).ready(function(){
You did't add brackets around document
May be you want do this:
$(document).ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
First, I recommend using CDN's for jQuery (less loading time), it can be found here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
then, you forgot to end your function, and you forgot () around document
your script should look like this:
$(document).ready(function() {
$("#slide").click(function() {
$(this).slideUp(400);
});
});

external js click functions not working in Chrome/Safari

Here's my head tag:
<head>
<!-- link JS here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript' src="../../template/js/jquery.flexslider.js"></script>
<script type='text/javascript' src='../../template/js/preload.js'></script>
<script type='text/javascript' src='../../template/js/responsive-turnkey.js'></script>
</head>
simple eh? So the "responsive-turnkey.js" file is the one that has all the click functions that need to run once the user clicks the necessary DOM elements.
Here is the "responsive-turnkey.js" file:
$(document).ready(function(){
alert("This alert works on page load");
$(".btn").click(function(){
alert("this alert works on .btn clicked");
});
});
The first alert works on page load, but when I click on the element with the class ".btn", the click function doesn't work and the alert does not sound. THIS ONLY WORKS IN FIREFOX.
Does NOT work in: chrome or safari
What have I done wrong?
$.getScript("../../template/js/responsive-turnkey.js", function(){
alert("Script loaded and executed.");
});
I put this in my load function() to read the script in after elements loaded successfully.

Categories

Resources