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, Dec 15 '12 at 21:27
I'm not that equipped with jquery/ajax, but maybe a `$(document).ready()` is needed? — Sterling Archer, Dec 15 '12 at 21:29
@PRPGFerret: jQuery isn't being used, at least within the code provided above... — Colin Brock, Dec 15 '12 at 21:33

score 1 · Answer 1 · edited May 23 '17 at 12:04

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 '17 at 12:04

Community

1
1

answered Dec 15 '12 at 21:38

Gabriel

18,322
2
37
44

I'm quite new to this. Could you explain how to do it, please? – Ben Dec 15 '12 at 21:43
I tried this. it's only add script tag, but the script isn't execute – Ben Dec 20 '12 at 20:57

Andriy F. · Answer 2 · 2012-12-15T22:37:02.500

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 '12 at 22:37

answered Dec 15 '12 at 21:46

Andriy F.

2,467
1
25
23

you right. it contains... i didn't copy paste it and forgot only here – Ben Dec 15 '12 at 21:50
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'); } – Andriy F. Dec 16 '12 at 11:35
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 – Ben Dec 20 '12 at 17:46

execute javascript after ajax

2 Answers2