0

I'm using some css files and js libraries (bootstrap, packry, etc.) in my master page. There's a button on page that when you click on it, it sends an ajax request and prints the response on a div in current page:

jQuery.post("index.php", "some_post_data", function (data)
{
 jQuery('#mydiv').html(data);
});

The page I'm calling needs those libraries I've already included on my master page, but when I print the response inside the div, it still shows js errors and style-less objects. If I add those resources to the second page, it will work but I don't want to do this.

Do I have to do some kind of refreshing thing on the newly printed html codes, or something like that? What am I doing wrong in here?

Hossain Alhaidari
  • 699
  • 2
  • 11
  • 24
  • need more info, please show what's returned by the ajax request – andrew Oct 28 '14 at 12:23
  • Is you AJAX posting to your main index.php page? As I think this will return the HTML of the main page. Seeing your index.php file will be helpful – David Jones Oct 28 '14 at 13:00

1 Answers1

0

When you add html content to a page dynamically like you are doing. Any script files loaded in the header section (or anywhere else for that matter) will not be loaded and registered in your dom. I presume the same will apply to any style sheets you include on the dynamic page.

To add any script files or stylesheets you need to register them separately into the head section of your document.

You could load the js/css files into your head like so:

 var jsLink = $("<script type='text/javascript' src='"+src+"'>");
     $("head").append(jsLink);

or check out this link: Ways to add javascript files dynamically in a page

Community
  • 1
  • 1
user3589536
  • 194
  • 5