1

i know the basics of loading a page or a file in a container frame via js or jQuery, but via event listener like onClick

JS - 

document.getElementById("id").innerHTML = "<object type = 'text/html' data = 'myfile.html'> </data>"

JQUERY - 

$("#id").load("myfile.txt");

but what I want to achieve is the same as this but not just being loaded onClick in the container frame, but also add a parameter on the url, for example:

if I click on a button, `webpage.html` will load on `<div>` container frame, and the `url` will change to `http://example.com/?loaded=webpage.html`

I wanted to do this, so I can either change the url string or press an element and load a certain file on the div container frame.

the same principle goes as how facebook manages profile.php

http://facebook.com/profile.php?=mypersonalprofile - load my profile http://facebook.com/profile.php?=myfriendsprofile - load my friends profile

I hope I managed to deliver it clearly.

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
WANthai
  • 15
  • 3
  • uhm, i'm talking about ? parameters not # hashes. i think this has some similarities with get methods. – WANthai Oct 01 '15 at 03:47
  • You do it the same exact way, with history.pushState. Open your console on this page and `history.pushState({}, "", "/questions/32878967/load-a-page-inside-div-or-when-param-is-added-on-url?works=true")` – Steve Clanton Oct 01 '15 at 03:56
  • i think this'll work for the onClick event, since it will change the url without reloading. but how about when i placed the ?works=true on the url manually ?, when i pressed enter, the same content must load on the div container frame just like as how it behaves in a button click. thanks – WANthai Oct 01 '15 at 04:03
  • Do you want to change the url on the data attribute of the #id element? I may have misunderstood what you're asking. – Steve Clanton Oct 01 '15 at 04:10
  • no, i want to add a string parameter on the parent location and at the same time loading the file on the #id element. i think i get how to do this first, i load the file on #id element by injecting it as a data type second, i execute a history.pushState instruction to change the url without the page being reloaded right ? now my second question is, how can i make this same thing happen, when i manually change the url parameter string ? – WANthai Oct 01 '15 at 04:18

2 Answers2

1

I think this would demonstrate what you looking for

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <button class="loadButton" value="input1.txt">Load file 1</button>
    <button class="loadButton" value="input2.txt">Load file 2</button>
    <div id="view"></div>
</body>
<script>
    $(function(){

        // Call loadPage on init
        loadPage();

        $(".loadButton").on("click", function(){

                // Change URL, you can change "/testJS/index.html" to suit your web address
                history.pushState({}, "", "/testJS/index.html?loaded=" + $(this).attr("value"));
                $("#view").empty();
                $("#view").load($(this).attr("value"));
            });
        });

        function loadPage() {
            console.log("start");
            var href = window.location.href;
            var index = href.indexOf("?loaded=");

            // Load data if we define the loaded param
            if (index > -1) {
                data = href.substring(index + 8);
                console.log(index + "   " + data);
                $("#view").empty();
                $("#view").load(data);
            }
        }
    </script>
</html>
Trong Hoang
  • 86
  • 1
  • 11
  • this may do the trick, but i actually thought of my own version of code. something like this `$("#this").load("myfile.html"); history.pushState({}, "", "?works=true");` after that, the parameter will be set on the url box without the page reloading. that is for the javascript part where the page is loaded in the div container and sets the param in the url box without reloading the page. – WANthai Oct 01 '15 at 08:18
  • and this is where the php counterpart comes in, where when i manually add a `?works=true` on the url will load `myfile.html` in the div container ` $('#this').load('myfile.html'); "; ?>` i wonder if this would work flawlessly. – WANthai Oct 01 '15 at 08:19
  • 1
    Why would you want to use server code when you can do it all with JS? Btw, I guess that will work either. – Trong Hoang Oct 02 '15 at 04:24
0

You need to combine the solutions from Get url parameter jquery Or How to Get Query String Values In js and Modify the URL without reloading the page.

You can set the page with

history.pushState({}, "", "/mainpage.html?loaded=webpage.html");
$("#id").load("webpage.html");

Then, if they change the url some other way (which will require the page to reload), you can get the parameter from the url and load it:

var myfile = getUrlParameter("loaded");
$("#id").load(myfile);

The getUrlParameter function is defined as:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true :    sParameterName[1];
        }
    }
};
Community
  • 1
  • 1
Steve Clanton
  • 4,064
  • 3
  • 32
  • 38
  • this is somehow what i was looking for. i'm taking w3school's tryit.asp as an example when i press the `try it` button. a new tab opens and redirects me to `http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_icon_alert` notice the `?filename=tryjq_mob_icon_alert` get parameter, the page differs as that param changes. the thing that i want to achieve is the same as how w3school's `tryit.asp` functions, the only difference is the i want to load that page in a div container instead of opening a new tab. – WANthai Oct 01 '15 at 07:19