Question

Hi as my title suggest, i use the following code to dynamically load a portion of the page (here left id)

function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);  
        if(!popEventListnerAdded) {
            window.addEventListener("popstate", function(e) {
            loadNextBackInPage(location.href);
            },false);
            popEventListnerAdded = true;
        }

    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}

Here is an example of how i do it (click on the show details link

Problem is:

It loads properly… but the javascript is not working. For example: 1. I use a discuss for comments and it doesnt load in the following section

Add a Comment using Facebook, Twitter, Yahoo!, DISQUS, OpenID or Anonymus

But if you refresh the browser it does load properly… I am loading all the scripts required first only… so why is it not working?

Also for example: The SHARE (Click here) button should expand using the following code:

<script language="javascript" type="text/javascript">
function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("share").style.display;
    if(divstyle.toLowerCase()=="block" || divstyle == "")
    {
        document.getElementById("share").style.display = 'none';
    }
    else
    {
        document.getElementById("share").style.display = 'block';
    }
}
</script> 

But it doesnot!… but works if i refresh the page(i.e load the url again)

Mainly i want the discuss commenting thing to work. I use the following codes to generate it

<div class="entry">
  <h2>Add a Comment using Facebook, Twitter, Yahoo!, DISQUS, OpenID or Anonymus </h2>
  <p>


  <div id="disqus_thread"></div>
<script>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '[written here]'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     var disqus_identifier = 'page=show_song_details.php&songid=<?php echo $sid ?>&n=0&back=no';
     var disqus_url = '<?php echo $main_root.$_SERVER['REQUEST_URI']; ?>';
    var disqus_developer = 1 ;
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

  </p>


</div>

Answer 1

The problem is that jQuery strips out <script> tags whenever you create a jQuery object from a HTML string to do some DOM manipulations on it, in your case .find().

Your best bet is to read the whole HTML as text, then use regular expressions to chop it up and put the relevant part into your document. You should also think about redesigning part of your project, as in my opinion loading parts of an external page with partial scripts is not a good practice and could be hard to maintain in the long term. Unless of course it’s a well thought out modular design you’ve got there and you know what you’re doing.

This issue is an exact duplicate of a different thread, although I can’t vote to close it due to the bounty. Have a look at my answer here and see if it helps: jquery: Keep <script> tag after .find()