appending a page to my url when using jquery ajax

Question

I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page. My problem is that in doing this my url remains the same. How can I append the href value to the url?

Sample of my code:

    <ul id="nav">
    <li><a href="page1.html">Link 1</a></li>
    <li><a href="page2.html">Link 2</a></li>
</ul>

$(document).ready(function() {    

$('#nav li a').click(function(e) {
    var href = $(this).attr('href');

    $.ajax({
        url : href,
        method : 'get',
        success : function(data) {
            $('#content').html(data);
            console.log('complete');  
        } 
    });

    e.preventDefault();
});

All advise welcome :) Thanks

Perhaps [this SO question](http://stackoverflow.com/questions/136458/how-do-i-with-javascript-change-the-url-in-the-browser-without-loading-the-new) is what you're looking for? — Jeroen, Nov 30 '11 at 22:50

Evan · Answer 1 · 2011-12-01T16:11:20.773

i'm assuming you mean you want to append it onto your current page URL

in which case, you should be able to do this:

$.ajax({
        url : window.location.href + "/" + href,
        method : 'get',
        success : function(data) {
            $('#content').html(data);
            console.log('complete');  
        } 
    });

EDIT:

once you get the ajax page, you can access the elements from within it. for example, if you have a div on your page that you are getting, you can select it in your success function. try this:

success : function(data) {
                var $selectedElement = $(data).find("#SELECTYOURELEMENT");
                $('#content').html($selectedElement);
                // or you can append the element to your content if you would prefer that
                console.log('complete');  
            }

thanks for this, at the moment the ajax call fetches all the data for the ref page, how can i restrict it to only fetch a specific set of elements? — styler, Nov 30 '11 at 23:29

score 2 · Answer 2 · answered Nov 30 '11 at 22:57

2

$(function() {
    $('#nav li a').click(function(e) {
        e.preventDefault();
        $('#content').load(this.href);
    });
});

answered Nov 30 '11 at 22:57

Luca Filosofi

30,086
8
65
74

score 1 · Answer 3 · answered Nov 30 '11 at 22:51

The jquery address plugin is very easy to use:

http://www.asual.com/jquery/address/

and the history plugin is also useful for things like what you want as well as handling use of back button and such in an ajax site.

http://tkyk.github.com/jquery-history-plugin/

Alok RB Sharma · Answer 4 · 2019-01-03T13:41:30.510

I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page.but page doesn't load. my html sample code

<div class="nav-tabs-custom">
            <ul  class="nav nav-tabs" id="nav">
               <li class="active">
                 <a  href="tab1.html" data-toggle="tab" >Apply Leaves</a>
              </li>
               <li>
                 <a  href="tab2.html" data-toggle="tab" >My Leaves</a>
              </li>
               <li>
                <a  href="tab3.html" data-toggle="tab" >Leave Record</a>
             </li>
           </ul>
           <div class="tab-content" id="ajax-content">

           </div>

and my jquery code

$(document).ready(function() {

$("#nav li a").click(function() {

    $("#ajax-content").empty().append("<div id='loading'><img src='../static/js/ajax-loader.gif' alt='Loading' /></div>");
    $("#nav li a").removeClass('active');
    $(this).addClass('active');

    $.ajax({ url: this.href, success: function(html) {
        ("#ajax-content").empty().append(html);
            alert(this.href);
        }
});
return false;
});

});

appending a page to my url when using jquery ajax

4 Answers4