How to Load pages without going to varous url?

Question

I am trying to build a single page load application ie load different pages ina single page when the user clicks on a link.

say for example I have three links Home, News and Contact, How can I make them all load in a single page without going to 3 different pages.

How can i do it using pure Native Javascript and jquery without using backbone or angular just pure javascript and No Frames?

This concept is called single page application. You might want to look at different javascript MVC frameworks, like backbone.js for example — Robert, Oct 10 '13 at 12:02
@Robert First, it's not necessary. Second, he said: "How can i do it using pure Native Javascript and jquery without using backbone or angular just pure javascript and No Frames? " — Yair Nevet, Oct 10 '13 at 14:01
@Yair, the question was edited after my comment, see the history. Furthermore, the concept is indeed called SPA, best achieved with some sort of framework — Robert, Oct 10 '13 at 14:04
@Robert Believe me, I know what SPA is and did it using AngularJs. — Yair Nevet, Oct 10 '13 at 14:08
hey its much more easier if we use angular.js. is it fine if i'll give u a angular.js solution?? — Mayur Gupta, Oct 11 '13 at 10:47

score 1 · Answer 1 · answered Oct 10 '13 at 12:06

The jquery load function should be helpful. It loads a html from the url into specific DOM element.

http://api.jquery.com/load/

You can make a single div and give it a property id="main". Then in onclick event for link Contacts you can call $("#main").load('contact.html'); etc.

score 0 · Answer 2 · answered Oct 11 '13 at 11:12

hey you are asking it in jquery.

i will suggest you a solution in angularjs

I hope it will work for you ...

just copy past and save it as ".html" and see it working...

look at the comments for better understanding.

<!DOCTYPE html>
<html>
<head>

<!-- you need to import this script for angularjs to work -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>

<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
    <!-- The navigation menu will get the value of the "active" variable as a class.
         The $event.preventDefault() stops the page from jumping when a link is     clicked. -->

<nav class="{{active}}" ng-click="$event.preventDefault()">

    <!-- When a link in the menu is clicked, we set the active variable -->

    <a href="#" class="home" ng-click="active='home'">Home</a>
    <a href="#" class="projects" ng-click="active='projects'">Projects</a>
    <a href="#" class="services" ng-click="active='services'">Services</a>
    <a href="#" class="contact" ng-click="active='contact'">Contact</a>
</nav>

<!-- ng-show will show an element if the value in the quotes is truthful,
     while ng-hide does the opposite. Because the active variable is not set
     initially, this will cause the first paragraph to be visible. -->

<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
</body>
</html>

you can see this is just one page ... but functions as multiple pages... — Mayur Gupta, Oct 11 '13 at 11:19

score 0 · Answer 3 · answered Oct 11 '13 at 11:33

Here is an example. Lets take 3 different dives and give 3 different ids to them such as "home", "news", "contact". And now place the contents you want to load them inside those divs.

your html code will look something like below.

  <div id="home">
     <h3>Home Page</h3>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    onec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>
 <div id="news">
     <h3>News Page</h3>

     <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>
 <div id="contact">
   <h3>Contact Page</h3>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>

Now in the navigation will look like below

<ul>
    <li ><a onClick="showDiv(1);">Home</a></li>
    <li ><a onclick="showDiv(2);">News</a></li>
    <li ><a onclick="showDiv(3);">Contact</a></li>
  </ul>

After this define the ShowDiv() method in the header section

function showDiv(pageid)
  {
    if(pageid== 1)
        {
        $("#home").show();
        $("#contact").hide();
        $("#news").hide();
        }
    if(pageid== 2)
        {
        $("#home").hide();
        $("#contact")
        $("#news").show();
        }
    if(pageid== 3)
        {
        $("#home").hide();
        $("#contact").show();
        $("#news").hide();
        }
  }

Here you go, you can load three page contents in a single page ....

If this help you to do so then plz mark it as answer.... – Tapan kumar Oct 11 '13 at 11:36 — Tapan kumar, Oct 11 '13 at 11:36

score -2 · Answer 4 · answered Oct 10 '13 at 12:42

You can use Ajax like this:



    $('#home').click(function(){
        $.get('home.html', function(data){
            document.write(data);
            document.close();
        });
    });

But it can't work with cross-origin resource, where you should use CORS or iframe.

How to Load pages without going to varous url?

4 Answers4