ansaurus

Question

jQuery - Creating a dynamic content loader using $.get()

Answer 1

+1 A:

Try this little self-contained example

<?php
if ( isset($_POST['contentId']) ) {
  // a contentId parameter has been sent
  // "we" know these ids:
  $contents = array(
    'a'=>'Mary had a little lamb',
    'b'=>'whose fleece was white as snow',
    'c'=>'And everywhere that Mary went',
    'd'=>'the lamb was sure to go'
  );
  // if we know the contentId
  if ( isset($contents[$_POST['contentId']]) ) {
    // send back the data associated with the contentId
    echo $contents[$_POST['contentId']];
  }
  else {
    echo 'unknown contentID';
  }
  die;
}

// if no contentId parameter has been sent at all, send the html document
?>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
      function foo(contentID) {
        $('#container').hide('fast', function() {
          $('#container').load('?', {'contentId':contentID}, function() {
            $('#container').show('normal');
          });
        });    
      }
    </script>
  </head>
  <body>
    <fieldset>
      <button onclick="foo('a')">load content A</button>
      <button onclick="foo('b')">load content B</button>
      <button onclick="foo('c')">load content C</button>
      <button onclick="foo('d')">load content D</button>
     </fieldset>
    <div id="container">Hello.</div>
  </body>
</html>

The "important" part is that it passes the object {'contentId':contentID} to .load(), i.e. the request will contain a (post) parameter contentId=something. The php part of the script tests whether such a parameter is set or not using isset(). If there is, it tests whether it is has data associated with this contentId. The example uses a (static) array for this but it could be just anything.

This has some drawbacks. E.g. the browser doesn't cache the contents. Every time a button is hit data has to be sent forth and back between the server and the client. But you could use something like mod\rewrite or similar to let your php script react on urls like http://someserver/getContents/contentIdA , http://someserver/getContents/contentIdB, http://someserver/getContents/contentIdC and so on.

VolkerK 2010-03-19 07:05:58

Sorry for the late reply! Code looks good :) Think I'll just use it like this, maybe do a little tweaks here and there :)See you're loading the jQuery from googleapis. Is this a common way of doing it? Does it include easing as well?

Kenny Bones 2010-03-22 05:59:48

I used googleapis to make a copy-)

VolkerK 2010-03-22 07:03:35

ansaurus

tags:

views:

answers:

jQuery - Creating a dynamic content loader using $.get()

related questions