execute javascript after ajax

Question

I have a problem with ajax that Javascript not render after page load. I have this code:

<script>
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("fb-root").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "like.php", true);
        xmlhttp.send();

    }
</script>
</head>
<body>
    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function () {

            FB.init({
                appId: 'XX',
                status: true,
                cookie: true,
                xfbml: true
            });

            FB.getLoginStatus(function (o) {
                if (!o && o.status) return;
                if (o.status == 'connected') {
                    // USER IS LOGGED IN AND HAS AUTHORIZED APP
                    window.onload = loadXMLDoc();
                } else if (o.status == 'not_authorized') {

                    window.onload = loadXMLDoc();
                } else {
                    // USER NOT CURRENTLY LOGGED IN TO FACEBOOK
                    document.write("connect3")

                }
            });

        };

        (function () {
            var e = document.createElement('script');
            e.async = true;
            e.src = document.location.protocol +
                '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        }());
    </script>

the like.php file contain

<?php echo  <script src='/facebook/src/like.js'></script>; ?>

When a user is logged in facebook the ajax load but script doesn't execute. The script at body section are checked and work well. Where is the problem?

Thanks!

Chrome console give 'Invalid application ID: The provided application ID is invalid.' — qooplmao
– qooplmao, Commented Dec 15, 2012 at 21:27
I'm not that equipped with jquery/ajax, but maybe a $(document).ready() is needed? — Sterling Archer
– Sterling Archer, Commented Dec 15, 2012 at 21:29
@PRPGFerret: jQuery isn't being used, at least within the code provided above... — Colin Brock
– Colin Brock, Commented Dec 15, 2012 at 21:33

Andriy F. · Accepted Answer · 2012-12-15 22:37:02Z

1

echo in like.php doesn't contains quotes. Should be

<?php echo "<script src='/facebook/src/like.js'></script>"; ?>

Also FB.getLoginStatus is not fired

Tip: Use firebug if you use Firefox (or other debug tools if other browsers) and use console.log()

Likely solution: replace contents of function loadXMLDoc with

jQuery('#fb-root').load('like.php');

edited Dec 15, 2012 at 22:37

answered Dec 15, 2012 at 21:46

Andriy F.

2,5451 gold badge26 silver badges23 bronze badges

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

3 Comments

Ben Over a year ago

you right. it contains... i didn't copy paste it and forgot only here

Andriy F. Over a year ago

if you're asking about jQuery('#fb-root').load('like.php');, it should be inside function loadXMLDoc: function loadXMLDoc() { jQuery('#fb-root').load('like.php'); }

Ben Over a year ago

I've added only this code: jQuery('#fb-root').load('like.php'); now it loads script but all page is blank. Only the script has been loaded

Community · Accepted Answer · 2017-05-23 12:04:31Z

1

Can scripts be inserted with innerHTML?

The link above addresses this issue. To load a script tags contents you may wish to simply inject a new script tag using dom manipulation rather than using innerHTML. An example is provided for you in the async fb portion of the script you posted.

var e = document.createElement('script');
e.async = true;
e.src = '/facebook/src/like.js';
document.getElementById('fb-root').appendChild(e);

This has the same effect assuming the php code doesn't do any other operations. Also it is worth pointing out that your current implementation will remove the all.js file from the dom (since you set innerHTML).

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 15, 2012 at 21:38

Gabriel

18.8k2 gold badges40 silver badges45 bronze badges

2 Comments

Ben Over a year ago

I'm quite new to this. Could you explain how to do it, please?

Ben Over a year ago

I tried this. it's only add script tag, but the script isn't execute

Collectives™ on Stack Overflow

execute javascript after ajax

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related