0

I have div class="contentBlock" which is treated as the container for updating

 <div class="contentBlock"></div>

I have a script that I wrote that doesnt work :c

$(document).ready(function(){
  $('.postLink').on('click', function () {
    $.get("page.php", function (data) {
      $(".contentBlock").html(data);
    });
  });
});

I have a anchor html

<div class="box"> 
  <a class="postLink" "href="#">
    <h1 title="Light me up"></h1>
    <div class="innerbox">
      <figure><img src="http://cpsr-rspc.hc-sc.gc.ca/PR-RP/servlet/ShowImage?photoId=1789" /></figure>
      <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
      </ul>
    </div>
  </a> 
</div>

The page.php is just an img tag amd some lorem.

I've never worked with .get() I'm sure I'm using it incorrectly. Additionally, where would I add a transition for a loading .gif and a fadein when loaded?

lbstr
  • 2,762
  • 16
  • 29
Armeen Harwood
  • 15,195
  • 30
  • 106
  • 210
  • I may be wrong but i was looking at something ilke this earlier, I think there was a .load somewhere! I will see if i can find it! – Gaz Winter Jun 20 '12 at 20:32
  • 2
    The code seems to be correct. However, you may use `load()` instead of `get()`. – VisioN Jun 20 '12 at 20:32
  • Have a look at this page, i believe its what you need: http://stackoverflow.com/questions/4101770/load-content-of-a-div-on-another-page – Gaz Winter Jun 20 '12 at 20:33
  • The code should work, however your anchor tag has an extra `"` – Kevin B Jun 20 '12 at 20:35

1 Answers1

2
<a class="postLink" "href="#">

Should be

<a class="postLink" href="#">

You had an extra quote.

$(document).ready(function(){
  $(".postLink").on('click', function () {
     // load in animation.gif here
     $(".contentBlock").load("page.php", function() {
         // end loading animation now
     });
  });
});

Using a load in jQuery is meant for exactly this purpose.

Here's the jQuery doc for load: http://api.jquery.com/load/

TheZ
  • 3,463
  • 15
  • 29
  • using http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery is there a better way to write this code so i can use load in and out for transitional purposes – Armeen Harwood Jun 20 '12 at 20:34
  • I agree that `load` is cleaner here, but if it didn't work with `$.get`, why would it work with `load`? I think something else is going on... – lbstr Jun 20 '12 at 20:39
  • The main question already has the solution for that, the anchor tag has an extra quote. – TheZ Jun 20 '12 at 20:40
  • my god thank you for that retarded quote typo.. it created this crazyyyy error and I was dumbfounded as to why it was happening and it just randomly happened so I thought it was totally the script hahah. – Armeen Harwood Jun 20 '12 at 20:44