CODEWITHSUNDEEP
phpjqueryajaxdynamic
user2109237
user2109237

Reputation: 23

Loading Javascript into AJAX generated div

I'm trying to load Javascript into a div that has been generated through AJAX and filled with an external PHP file.

Here is the navigation I am using to load the AJAX div, and my PHP content:

<div id="portfolioContent">
  <div id="portfoliotabContainer">
    <ul id="portfolioTabs">
      <li><a id="dashboardTab" href="./portfolio/portfoliocontent/dashboard.php">Dashboard</a></li>
      <li><a id="casedetailsTab" href="./portfolio/portfoliocontent/casedetails.php">Case Details</a></li>
      <li><a id="correspondenceTab" href="./portfolio/portfoliocontent/correspondence.php">Correspondence</a></li>
      <li><a id="pleadingTab" href="./portfolio/portfoliocontent/pleading.php">Pleading</a></li>
      <li><a id="discoveryTab" href="./portfolio/portfoliocontent/discovery.php">Discovery</a></li>
      <li><a id="expensesTab" href="./portfolio/portfoliocontent/expenses.php">Expenses</a></li>
      <li><a id="indexTab" href="./portfolio/portfoliocontent/docindex.php">Document Index</a></li>
    </ul>
  </div>

I need the hyperlink to load and fill the generated div, but also call an external Javascript file so my scripts work within the generated div.

Here is my script:

$(function () {
  $("#portfolioTabs li a").live("click", function () {
    var pagecontent = $(document.createElement("div"));
    pagecontent.load(
    $(this).attr("href"));
    $(".insideContent").html(pagecontent);
    $(".portfolioContent").animate({
      height: "110%"
    });
    $(".insideContent").animate({
      bottom: "0px"
    });
    return false;
  });
});

I've looked into this and I understand that I can load is dynamically, but I'm unsure of the simplest way to achieve that.

Upvotes: 1

Views: 175

Answers (2)

compid
compid

Reputation: 1323

You should use something like $.ajax. This allows you to asynchronously load content into your page without a page reload, which sounds like what you want.

Within your event handler, you would probably want something like

var url = $(this).attr("href");
$.ajax({
    url: url,
    success: function(data) {
        $(".insideContent").html(data);
    }
});

Note that everything that depends on the data loading must be placed within the anonymous function where I update the html.

Upvotes: 0

jeroen
jeroen

Reputation: 91734

The problem seems to be that you are assigning the content to another element when it is not loaded yet.

You can use the callback function of load for that:

pagecontent.load($(this).attr("href"), function() {
        // this gets executed when the `load` is complete
        $(".insideContent").html(pagecontent);      

        $(".portfolioContent").animate({                    
            height: "110%"                               
        });                                                
        $(".insideContent").animate({
            bottom: "0px"
        });
});

Upvotes: 1

Related Questions