Question

I have a function, ajaxinclude() which includes the content of a page.
It works perfectly when written like:

<div>
     <script type="text/javascript">
          ajaxinclude("info/content/About.php")
     </script>
</div>

Now, I want a button on-click this should come.
Thus,

<button onclick="document.getElementById('aaa').innerHTML = '<script type='text/javascript'>ajaxinclude(\'info/content/About.php\');</script>">Hello</button>

But this doesn’t work.

Another method would be

<button onclick="document.getElementById('aaa').innerHTML = '<script type='text/javascript'>' + ajaxinclude('info/content/About.php') + '</script>">Hello</button>

But this doesn’t work either.

This is my ajaxinclude() function:

var rootdomain = "http://" + window.location.hostname;

function ajaxinclude(url) {
    var page_request = false

    if (window.XMLHttpRequest)
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
    return false
    page_request.open('GET', url, false)
    page_request.send(null)
    writecontent(page_request)
}

function writecontent(page_request){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200)
    document.write(page_request.responseText)
}

How, how do I include the text on a button click?

PS: I don’t want jQuery.

Answer 1

Try

<button onclick="document.getElementById('aaa').innerHTML = ajaxinclude('info/content/About.php')">Hello</button>

However I must warn that inline JavaScript is bad practice, especially like this! You can rewrite your writecontent function to accept two parameters: the page request and the ID of the target to write to.

Your new writecontent function would be:

function writecontent(page_request, write_target){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200) {
        document.getElementById(write_target).innerHTML = page_request.responseText;
    }
}

You’ll need to pass the ID of the write target there, and since you’re calling writecontent from ajaxinclude, you’ll need the parameter there too:

function ajaxinclude(url, write_target) {
    // ...
    writecontent(page_request, write_target);
}

And in the button:

<button onclick="ajaxinclude('info/content/About.php', 'aaa')">Hello</button>

Optionally continuing…

Even better would be binding the click action to the button instead of using onclick. This would be easier with jQuery, but since you explicitly stated you do not want to use jQuery, you can also do it using addEventListener() in your JavaScript:

document.getElementById('thisbutton').addEventListener('click', function(){ajaxinclude('info/content/About.php', 'aaa')}, false);

And that would change the button to:

<button id='thisbutton'>Hello</button>

Read more about event listeners at the Mozilla Developer Network.