Solved

Jquery Load function does not work

Posted on 2013-10-25
4
683 Views
Last Modified: 2013-10-25
I have this code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("./a.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text2</h2></div>
<button>Get External Data</button>

</body>
</html>

Open in new window

enter code here
But after clicking on button nothing happens. I also tried load("/a.txt"); Still no luck.

Tried different browsers, no success.

*Update*:

====================================================

I managed to resolve the above issue(partially) by putting the files inside the Web server.

Now I have another related issue. Button that runs Jquery only seem to work only once. That is when I change the contents of the text file and click on the Button I always see the text of the old file. I suppose browser caches Jquery loaded data?
0
Comment
Question by:unknown_routine
4 Comments
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 250 total points
Comment Utility
try adding a random querystring to the URL to prevent caching:

$("#div1").load("./a.txt?" + (new Date()).getTime());
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Any reason to use a text file? If you use a .php extension (even though it is just text) it will not be cached unlike txt files which are seen as static files (never changing)

How is the a.txt changing from when you previously click the button? (and I don't mean just by you changing it)

Or you could call a single php file that includes the txt file.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
Comment Utility
The jQuery load() function is simply a shorthand method for an AJAX request. If you want more control than the shorthand syntax offers (i.e disabling caching) then you're going to need to use the full version, not the shorthand:

$("button").click(function(){
   $.ajax( {
      url: "./a.txt",
      cache: false,
      success: function(html) {
         $("#div1").html(html);
      }
   });
});

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now