Dynamic loading of a webpage and div (ID's)

Question

Greetings once again...

I am trying to populate the different main templates for a webpage as well as dynamically call two separate divs ( I have the two divs loading, at least I thought I did... It works great in FireFox 5.0 but when I try the page in IE, Chrome, Safari or Opera the content disappears when clicked.)

Here is the jQ:

 $(document).ready(function(){

    $(".swapJustInTimeLink").click(function(){

        document.getElementById("contentAll").innerHTML = "";

        $.ajax({
          url: "dynamicPages/progSpec_justInTime.html",
          cache: false,
          success: function(html){
            $("#contentAll").append(html);
          }
       });    
    });

    $(".swapJustInTimeLink").click(function(){

        document.getElementById("textWelcome").innerHTML = "";

        $.ajax({
          url: "dynamicPages/progSpec_links.html",
          cache: false,
          success: function(html){
            $("#textWelcome").append(html);
          }
       });    
    });
 });

Can someone explain when is going on here ?

My jQuery as well as AJAX skills are not refined enough at the current moment, thanks for any help.

Answer 1

Any reason you're not using $.load()?

$(function ()
{
    $('.swapJustInTimeLink').click(function()
    {
        $('#contentAll').load('dynamicPages/progSpec_justInTime.html');
        $('#textWelcome').load('dynamicPages/progSpec_links.html');
    });
});