jquery/ajax issue, need help

by espe
4 replies
Hi all,

I've been tweaking a jquery script for a while and everything was great until a few hours ago. I have very basic knowledge when it comes to ajax and I can't figure this out by myself so hopefully someone can help me out..

I have a main index.php file that contains <li> elements inside, each <li> represents a part of the website (using ajax) like this:

HTML Code:
<ul id='dList'>
<li id='home'>    content    </li>
</ul>
I wanted to load each <li> dynamically and divide my website into folders to make it search engine friendly ... which I did and this is my code to load content dynamically:

Code:
$(document).ready(function() {

 $.get('bin/dlist.php', function(dList) {
        $('#dList').append(dList);
        $('.load').each(function() {
	        $(this).load($(this).attr('id') + '/index.php #loadContent');
        })
    });

});
dlist.php is a script that displays a list of the folders i have in my main root like this:

PHP Code:
<li id='about' class='load'></li>
<
li id='products' class='load'></li>
<
li id='contact' class='load'></li
each id represents an existing folder e.g. domain.com/about/ , that is what dlist.php does, it turns the name of each root folder into a <li id='NAME_OF_THE_FOLDER' class='load'></li>

each of those folders has its own index.php file with a div element which ID is #loadContent (thats the part i want to load inside each li element)

so my jquery code turns this

HTML Code:
<ul id='dList'>
<li id='home'>    content    </li>
</ul>
into this

HTML Code:
<ul id='dList'>
<li id='home'>                        content         </li>
<li id='about' class='load'>      #loadContent   </li>
<li id='products' class='load'>   #loadContent   </li>
<li id='contact' class='load'>    #loadContent   </li>
</ul>
and it loads each #loadContent from each folder inside the <li> elements with a 'load' class

to access each section I use hash tags like this: domain.com/#about (that only shows the 'about' <li> element)

ok so that is working fine BUT the problem is I can only see my website once, every time I try to access it again (without clearing the browser cache) it won't look good, I don't understand why it only looks good once, is there something wrong with my little piece of code?

sorry that i can't give a link but I don't have a hosting for it yet, I've been testing it offline with xampp (to test php websites offline)

I read earlier that it may be due to the browser caching my website, but tried every solution to disable cache and it still won't work

Advice please? I need help on this one!


-sp
#issue #jquery or ajax
  • Profile picture of the author eswariseo
    Just use inner HTML and add # infront of the <li>
    or else use Regexp for string replace it and add # before <li> displaying
    thats it!
    {{ DiscussionBoard.errors[6954846].message }}
  • Profile picture of the author iaeo
    First, I'd recommend either getting free hosting via 000webhost, or finding a .99 hosting coupon (I'm sure there are hundreds of Hostgator affiliates around here that would LOVE to hook you up with their referral link). That'll get you a month for as close to free as it gets- still, I really recommend 000webhost, they've been awesome for me. Either way, best way to test PHP is on a real server.

    Second, it seems like a fairly convoluted way to organize things. Dynamically loaded content is fine, but why dynamically load the different sections of your website? The whole point of dynamic content is so that you don't have to go hardcode a bunch of stuff, but if you're going to change something on your website you're gonna be hardcoding it anyways, so why create an extra step? Just put the content on the site and boom, problem solved.

    On the flip side, if you're hell-bent on doing this, try creating a real AJAX request instead of using the .load() function. Then you can just add "cache: false" in the request parameters and that should fix your issue.

    The AJAX would look something like this:
    Code:
    var n = "data" //data to include with the request
    $.ajax({
      url: 'getpages.php',
      data: n,
      cache: false,
      method: GET,
      success: function(result_from_server) {
        $('.dlist').append(result_from_server);
      }
    });
    Again, I'm not sure why you would dynamically load the nav elements of the site- but, I'm going to assume you have a valid reason.
    Hope this helps!
    Signature
    Javascript/jQuery | Java (Android) | PHP | HTML5 | CSS3 | Ruby on Rails
    Want a website, native Android app, or web app? Talk to me.
    http://lastingwebdesign.com
    {{ DiscussionBoard.errors[6961173].message }}
    • Profile picture of the author espe
      Hi iaeo thanks for your great advice!
      I admit that it looks weird and complicated but I will try to explain a bit more.

      why dynamically load the different sections of your website?

      Because I know Google hates duplicated content, so I didn't want to have, say, domain.com/about/ content in that folder and also in the main index.php file, instead, I want to load that content from the about folder into the main index without affecting the source code. In my .htaccess each time someone visits domain.com/about/ they will get redirected to domain.com/#about so that way users and Google are happy, Google is the reason I'm taking an extra step :S

      anyway, back to your answer

      Code:
      var n = "data" //data to include with the request
      $.ajax({
        url: 'getpages.php',
        data: n,
        cache: false,
        method: GET,
        success: function(result_from_server) {
          $('.dlist').append(result_from_server);
        }
      });
      I see your point, but what is "data" exactly?
      how is that going to replace my .load() function? which is:

      Code:
      $('.load').each(function() {
        $(this).load($(this).attr('id') + '/index.php #loadContent');
      })
      I'll try to apply your code today and see how it goes, thanks again


      UPDATE:

      this solved my problem..

      Code:
      $.ajaxSetup({ cache: false });
      {{ DiscussionBoard.errors[6964040].message }}
      • Profile picture of the author iaeo
        Hey espe, glad your problem got fixed!

        The "data" in the example would be to tell the PHP script on the back end which page to load, that way you only have one onClick() function to write, to which you could pass data as a variable (as opposed to a separate onClick() for each nav element).

        It's a triviality though, really. The important thing is that your site is up and running as it should- glad I could help
        Signature
        Javascript/jQuery | Java (Android) | PHP | HTML5 | CSS3 | Ruby on Rails
        Want a website, native Android app, or web app? Talk to me.
        http://lastingwebdesign.com
        {{ DiscussionBoard.errors[6967767].message }}

Trending Topics