Back to General and Gameplay Programming

Open link in new window, but make it just like opening in original window

General and Gameplay Programming Programming

Started by pintee May 08, 2013 07:25 AM

0 comments, last by Dragonsoulj 10 years, 11 months ago

pintee

131

Author

May 08, 2013 07:25 AM

I have an index.php that loads a page.php into a #result div. Page.php in turn has its own links and I have it so that when you click on one of these links it loads the respective page into the SAME #result div. Similarly that loaded page might have its own links and I want to continue loading content into the same div. The code for this is as follows:

Say page.php has a link to page2.php.

At the moment when I open the link to page2.php in a new window, it opens as page2.php. Same if I type the url to page2.php directly into my browser. I want it so that it opens as index.php but with page2.php loaded into its #result div(a duplicate of clicking the link normally in the original window).

How do you do this?? I have tried lots of things including setting a session variable and passing to loadPage, but nothing seems to work.

Dragonsoulj

3,213

May 08, 2013 10:39 AM

You can use AJAX calls to get this to work, either with our without jQuery. You would just make use of your #result div as the target for the AJAX.

        <script type="text/javascript">
    function ajaxFunction(id, url){
        var xmlHttp;
        try {// Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();        
        } catch (e) {// Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
            }
        }
        
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4) {
                //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
                var respText = xmlHttp.responseText.split('<body>');
                elem.innerHTML = respText[1].split('</body>')[0];
            }
        }

        var elem = document.getElementById(id);
        if (!elem) {
            alert('The element with the passed ID doesn\'t exist in your page.');
            return;
        }
    
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }        
</script>

Use onload on the body tag of your index.php file to call your initial page, then use onclick on your link to load whatever link into the div. something like:

<body onload="ajaxFunction('contentRegion', 'content1.html');ajaxFunction('contentRegion2', 'content2.html');">

and

<div onclick="ajaxFunction('contentRegion', 'content2.html');">Testing</div>
<div onclick="ajaxFunction('contentRegion', 'content1.html');">Testing</div>

Your page.php and page2.php should have all required code you wish to have in the index.php page between the body tags unless you modify the script.

Open link in new window, but make it just like opening in original window

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Open link in new window, but make it just like opening in original window

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines