Load page that has html/js with AJAX

Question

I'm trying to load a php page with AJAX. The issue is that it has a "share this" button inside that uses a Javascript script being loaded in that same page.

When I load the page with AJAX, the "share this" button does not display correctly since the Javascript inside is not being loaded.

Any ideas on how I can make the Javascript in the page load?

Thanks, Alain

P.S. - I'm using jQuery for javascript

UPDATE:

I still cannot get it to work. Here is the html/js I'm trying to load:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=leblon" class="addthis_button_compact" addthis:url="<?php the_permalink(); ?>" addthis:title="<?php the_title(); ?>">Share
<span class="at300bs at15t_compact"></span>
</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>


<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=leblon" id="the-script"></script>
<!-- AddThis Button END -->

Here is a snippet of my javascript file:

$.ajax({ url: theURL + link+'/?from=us', success: function(html){
  $('#drink').html(html);
}

Anyone?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

EDIT/REDO:

Registered with AddThis, and it seems that its implemented a little different than yours.

HTML TO BE LOADED

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'xxx-xxx-xx-xx-xx'});</script>

<span class="st_twitter_large" displayText="Tweet">
</span><span class="st_facebook_large" displayText="Facebook"></span>
<span class="st_ybuzz_large" displayText="Yahoo! Buzz"></span>
<span class="st_gbuzz_large" displayText="Google Buzz"></span>
<span class="st_email_large" displayText="Email"></span>
<span class="st_sharethis_large" displayText="ShareThis"></span>

AJAX SIDE (Loading other page)

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script tyle="text/javascript">
 var addthis_config = {"data_track_clickback":true};
$(document).ready(function(){
    $.ajax({ url:'test.php', success: function(html){
    $('#content').html(html);

}});
});
</script>
</head>
<body>
<div id="content" style="width:400px;border:1px solid black;height:300px;margin:auto"></div>
</body>
</html>

You may have an older version and the buttons were not being init() upon execution ajax side.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 21, 2011 at 21:26

Bodman

8,0863 gold badges32 silver badges34 bronze badges

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

3 Comments

criticerz Over a year ago

I still cannot get it to work. Updated my question. I also tried loading the script manually with JS.. (and I saw it being loaded through Firebug... but it wouldn't do its magic)

Bodman Over a year ago

So I signed up for addThis, and did exactly what you want, with no issues. It seems to me that you are using an older version of addThis?

Bodman Over a year ago

What i did here works, you may need to update your addthis, and use the newer api, mine says "Publisher" rather than "username" which Im not sure makes a difference. Give it a try tho.

user578895 · Accepted Answer · 2011-03-21 21:11:07Z

0

It depends on how you're adding the content of the page into your current page.

Something like this should work:

$.get('/path/to/new/page', function(data){
    $('#someDiv').html(data);
});

If that's not working, then the script tags in the pulled page aren't properly being interpreted. I believe I ran into this issue a while back, bypassing jQuery may help: $('#someDiv')[0].innerHTML = data, or if that doesn't work you're next step is to use a regex to pull the script tags, manually download and eval those.

answered Mar 21, 2011 at 21:11

user578895

1 Comment

Nathan Ostgard Over a year ago

innerHTML has problems evaluating script tags in IE, so you can't rely on that. jQuery does things to workaround this issue (creating document fragments, etc.)

Marc Uberstein · Accepted Answer · 2011-03-21 22:07:32Z

0

You can try adding the AJAX onComplete/success event, once triggered call your js function targeting the share button.

$.ajax({
  url: "YourPage.php",
  context: document.body,
  success: function(){
    //Call Share Button function
  }
});

And note if there is custom events on your button to use the .live bind method instead of the normal event handlers. (.live handles dynamic content)

answered Mar 21, 2011 at 22:07

Marc Uberstein

12.6k4 gold badges47 silver badges73 bronze badges

Collectives™ on Stack Overflow

Load page that has html/js with AJAX

3 Answers 3

EDIT/REDO:

HTML TO BE LOADED

AJAX SIDE (Loading other page)

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT/REDO:

HTML TO BE LOADED

AJAX SIDE (Loading other page)

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related