www.webdeveloper.com
Results 1 to 3 of 3

Thread: Content loaded with AJAX doesn't use initial header css/js files?

  1. #1
    Join Date
    Jun 2009
    Posts
    112

    Content loaded with AJAX doesn't use initial header css/js files?



    I have a page that loads a variety of different content blocks depending on what a user clicks in a drop down.

    I've noticed though that, every time we do these ajax calls, any CSS or javascript we need for those blocks, we've been having to put that in the ajax content too. The content would otherwise ignore everything in the head of the file that was loaded initially when the page was first loaded. I can't seem to find anything on this with a google search but this has to be a common problem?

    This seems like an awkward solution. Is there a better one?

    Thanks all!

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Are you doing something like

    Code:
    element = document.getElementById('someelement');
    element.innerHTML = '<div><span>my content</span></div>';
    i.e. are you using innerHTML to insert HTML tags? If you are, some browsers (although to my recollection it only happens in IE6 and 7) won't recognize the inserted HTML as actually containing elements, if that makes sense. In the example above, the div and span won't be accessible through via the DOM in the browsers that don't support this. Instead, what you need to do, is insert elements AS ELEMENTS and not as part of an HTML string.

    For example:

    Code:
    element = document.getElementById('someelement');
    divelement = document.createElement('div');
    spanelement = document.createElement('span');
       spanelement.innerHTML = 'my content';
    divelement.appendChild(spanelement);
    element.appendChild(divelement);
    Get the picture?

    If you are returning long HTML strings from an AJAX request, I happen to have a function in my toolbox that just might help you out. First off, let me know if you think this might be your problem. It's the only one I can think of that would cause this kind of problem.

  3. #3
    Join Date
    Jun 2009
    Posts
    112
    Actually, I think we've found a solution to this issue:

    http://docs.jquery.com/Plugins/livequery

    Essentially we have a page that when we load, will include external stylesheet and javascript files.

    When the user selects an item from a dropdown on that page, the main content area will then pull in content specific to what they selected. However, this content that gets pulled in completely ignores the external stylesheet styles and doesn't respond to any of that initial javascript linked file.

    Hopefully livequery is the exact solution I need to make the ajax content behave. I'll have to look into it and give it a shot.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles