Jump to content
  • Advertisement
Sign in to follow this  
pintee

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

This topic is 2042 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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:

 

function loadPage(url){
$("#wrapper").load(url, function(){
$("#wrapper").find($('a')).each(function(){
$(this).on('click', function(e){
loadPage($(this).attr('href'));
e.preventDefault();
});
});
});
}

 

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.

Edited by pintee

Share this post


Link to post
Share on other sites
Advertisement

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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!