Loading Javascript into AJAX generated div

Question

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.

jeroen · Accepted Answer · 2013-02-26 01:36:47Z

1

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"
        });
});

answered Feb 26, 2013 at 1:36

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2109237 Over a year ago

I'm not entirely sure how to implement this. I'm fairly weak when it comes to advanced JavaScript like this. Any further instruction?

jeroen Over a year ago

@user2109237 No, this is all you need, you load the content in pagecontent and when that is done (the callback function), you load it in .insideContent. There is nothing else you need to change / do.

compid · Accepted Answer · 2013-02-26 01:37:59Z

0

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.

answered Feb 26, 2013 at 1:37

compid

1,3339 silver badges15 bronze badges

2 Comments

user2109237 Over a year ago

Note that everything that depends on the data loading must be placed within the anonymous function where I update the html. I'm not entirely sure what you mean here - could you please elaborate?

compid Over a year ago

I have set the success property to an anonymous function. The code in this function will be run when jQuery successfully receives a response from the server. Therefore, all code that depends on that data (in the response) needs to be in (or called by) the anonymous function

Collectives™ on Stack Overflow

Loading Javascript into AJAX generated div

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related