CODEWITHSUNDEEP
jqueryajaxfileupdating
simonTifo
simonTifo

Reputation: 307

loading file with ajax and jquery doesn't work

I use jquery and ajax to update a part of my web page but it doesn't work : here is the page : 

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
  </head>
  <body>
  <!----------------------------------------------------------------- -------------------->
<style type="text/css">
  div { width: 400px; height: 300px; float: left; margin: 5px; }
  #premier { background-color: #F6E497; }
  #troisieme { background-color: #CAF1EC; }
  #quatrieme { background-color: #F1DBCA; }
</style>
<button id="majPremier">Mise à jour première zone</button>
<button id="majDeuxieme">Mise à jour deuxième zone</button><br /><br />
<div id="premier">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.
</div>
<div id="deuxieme">
  <img src="image.png">
</div>
<script src="jquery.js"></script>
<script>
  $(function() {
    $('#majPremier').click(function() {
      $('#premier').load('maj1.html', function() {
        alert('La première zone a été mise à jour');
      });
    });
    $('#majDeuxieme').click(function() {
          $('#deuxieme').load('maj2.html', function() {
        alert('La deuxième zone a été mise à jour');
      });
    });
  });
</script>
    <!-- - ---------------------------------------------------------------------------------------------------------->
   </body>
</html>

and here is the file maj1.html I use to update my page with ajax : 

<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    Ut enim ad minima veniam, quis nostrum exercitationem ullam 
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea 
voluptate velit esse quam nihil molestiae consequatur, vel illum qui 
dolorem eum fugiat quo voluptas nulla pariatur?
  </body>
</html>

I got those from one frensh tutorial and when I use the inspect element from google chrome I see this error : xmlhttprequest cannot load file ... origin null is not allowed by access control allow origin

Upvotes: 1

Views: 368

Answers (1)

Rusty Jeans
Rusty Jeans

Reputation: 1426

.load() doesn't work if you're accessing the files locally, you need to put the files on a web server.

Upvotes: 2

Related Questions