Load page via ajax (without php)

Question

Is it possible to create a ajax page load without php? So just load the content of the linked page (if intern) and insert it into the current page.

I tried this, but it does not work (just nothing happens, when I click a link): http://www.johnmorrisonline.com/jquery-tutorial-ajax-load-content-with-no-page-refresh/

My code is this:

$(document).ready(function(){
    // Set trigger and container variables
    var trigger = $('a'),
        container = $('#content');

    // Fire on click
    trigger.on('click', function(){
      // Set $this for re-use. Set target from data attribute
      var $this = $(this),
        target = $this.data('target');       

      // Load target page into container
      container.load(target);

      // Stop normal link behavior
      return false;
    });
});

Most links on my page do not have any target. So I guess it would be `target="_self"` — Zoker, Sep 13 '15 at 19:36
`load` function takes real link as argument, link to real page. if your target is `_self` or even empty - nothing will be loaded. — u_mulder, Sep 13 '15 at 19:45
The links are real (or what are unreal links?). So I can`t use it for internal links? page.com/about to page.com/blog — Zoker, Sep 13 '15 at 19:46
Do you understand what I said? What is the value of `target = $this.data('target');`? — u_mulder, Sep 13 '15 at 19:47
I guess I did not understand. I`m no jquery pro and only took the script from the linked page above. Can you please give me a link or shortly explain what it means? — Zoker, Sep 13 '15 at 19:48

u_mulder · Answer 1 · 2015-09-13T20:15:28.070

0

Jquery method load takes a link to page as an argument. It can be /blog/post or blog/about.html or whatever.

What does this code do:

trigger.on('click', function(){
    // Set $this for re-use. Set target from data attribute
    var $this = $(this),

    // takes value of data-target attribute 
    target = $this.data('target');        

    // and pass it to load function
    container.load(target);

This means that if your a element has no data-target attribute - then there's no link available. And empty string passed to container.load(target); How do you think what will be loaded if empty string passed to a function? Nothing.

So you should add data-target attribute to your links:

<a href="#" data-target="/blog/post.html">Click</a>

Update:

As it turns out load method allows to load parts of page like this:

$( "#result" ).load( "ajax/test.html #container" );

More data on load

edited Sep 13 '15 at 20:15

answered Sep 13 '15 at 19:54

u_mulder

54,101
5
48
64

And when I do a `$('a').each(function() { $link = $(this).attr('href'); $(this).attr('data-target', $link); });`? Can I only load some parts of the linked page? E.g. only the content placed in `#content` – Zoker Sep 13 '15 at 19:58
Generally not, but you can try to use loaded content as another jquery object, find something there, clone and etc – u_mulder Sep 13 '15 at 20:00
Update my answer. Read it. – u_mulder Sep 13 '15 at 20:13
Ok great thank you! One last thing: I implemented it here: http://demo.comboot.io/3.1/ Every second click does not work. **Edit: This fixed it: http://stackoverflow.com/a/16001691/2977288** – Zoker Sep 13 '15 at 20:57

Load page via ajax (without php)

1 Answers1