How to show a page by default on page load

Question

I'm using jQuery to load pages into a div - instead of using iframes.

The code works great (feel free to reuse!) However, I have an issue where I cannot display a page when someone visits the URL.

So on page load, the canvas is empty (next to the menu) until the visitor clicks a link.

here is the code

<script>

  $('[data-target]').click( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
</script>

What I want to show is page-a.html whenever the page is visited - so the page doesn't look so empty.

Does anyone have any ideas?

Many thanks in advanced :)

Dan

you might want to check https://css-tricks.com/using-the-html5-history-api/ — llamerr, Apr 14 '16 at 16:33
also something on `location.hash`, like https://developer.mozilla.org/en-US/docs/Web/API/Window/location (not much of example there...) — llamerr, Apr 14 '16 at 16:35

score 2 · Answer 1 · answered Apr 14 '16 at 18:04

Use jQuery .load()

The simple solution would be to use the jQuery method that already does this for you: jQuery .load()

Then, within the jQuery document ready function, you would load a default page or just use the first href found in the page like so:

$("#halloffame").load( $("a")[0].href, ".partner_body" );

Run the snippet to view the demo

(Yahoo YQL is used to circumvent cross domain issues in the demo)

$('a').click(function(e) {
  $('#halloffame').load( e.target.href );
  e.preventDefault();
});

$('#halloffame').load( $('a')[0].href );

#halloffame {border:1px steelblue solid; margin: 5px;padding:0.5em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Click to load:
<a href="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FStack_Overflow%22%20">[ Stack Overflow ]</a>
<a href="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSpaghetti_code%22%20">[ Spaghetti Code ]</a>
<div>HTML:<div>
<div id="halloffame"></div>

score 1 · Answer 2 · answered Apr 14 '16 at 16:33

1

To solve the problem you can use the ready function of jQuery. You can check out this link: https://api.jquery.com/ready/

Here is a demo how you can do this.

<script>
  $( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
</script>

answered Apr 14 '16 at 16:33

Imran

4,582
2
18
37

How bizarre - I had literally just found this :) - Note - your example above, Where would the page url/name go in that? P.S. thanks for taking the time to reply. – Dan Hawkins Apr 14 '16 at 16:47
Ohh, you have to change the `$.get($(this)`. Here `this` is representing a DOM where the `href` is the intended page to load. So you have to change it with the `id` or `class` name of that DOM. – Imran Apr 14 '16 at 16:48

score 0 · Accepted Answer · answered Apr 18 '16 at 13:18

So I managed to resolve this by using @Roberto's suggestion and my original code (Simply added load onto the end)

Here is the finished code, which loads a URL on page load (and still allows you to open links in a div)

  $('[data-target]').click( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
  $.get( "pages/accounting-software/", function( data ) { 
       $('#halloffame').empty(); 
        $(data).find(".partner_body").appendTo("#halloffame");

   });

Hope this helps anyone else trying to achieve the same result.

How to show a page by default on page load

3 Answers3

Use jQuery .load()

Linked