CODEWITHSUNDEEP
javascripthtml
The Count
The Count

Reputation: 43

What's wrong with this? Load Pages when links are clicked

I am using Ajax for a website I am in the process of developing and something is wrong with this code... When the URL is something like mywebsite.com?about I want the about page to be displayed.

Here is the HTML portion of the code (NOTE: When a link is pressed Text is to be inserted into the DIV 'content'):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="script/open_page.js"></script>
<div id="wrapper">
    <div id="header">
        <ul class="nav">
            <li><a href="" onclick="load_home()">Home</a></li>
            <li><a href="" onclick="load_about()">About Us</a></li>
            <li><a href="" onclick="load_exchange()">Exchanges</a></li>
            <li><a href="" onclick="load_photos()">Photos</a></li>
            <li><a href="" onclick="load_contact()">Contact</a></li>
        </ul>
    </div>

    <div id="content">

    </div>
</div>

Here is a portion of the JavaScript:

var currentpage;
function load_about() { // Loads About Us
    if ($current_page == "about") {
        $(document).ready(function(){
            $("#content").load("contents/about.html");
        });
    }
}

Thanks for any suggestions or answers...

Upvotes: 0

Views: 103

Answers (2)

DevlshOne
DevlshOne

Reputation: 8457

    <ul class="nav">
        <li><a href="" data-page="home">Home</a></li>
        <li><a href="" data-page="about">About Us</a></li>
        <li><a href="" data-page="exchange">Exchanges</a></li>
        <li><a href="" data-page="photos">Photos</a></li>
        <li><a href="" data-page="contact">Contact</a></li>
    </ul>

$(function() {
    $('.nav').on('click', 'a', function(e) {
        e.preventDefault();
        var pageToLoad = $(this).data('page');
        $.get('contents/' + pageToLoad + '.html'), null, function(response) {
            $("#content").html(response);
        });
    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Since you are calling load_about on click of home page link, I don't think the if condition is necessary. Also the use of dom ready is wrong in this case

It should be

    function load_about() { // Loads About Us
        $("#content").load("contents/about.html");
    }

If it is upto me, I may do it slightly differently

<div id="wrapper">
    <div id="header">
        <ul class="nav">
            <li><a href="contents/home.html" onclick="load_home()">Home</a></li>
            <li><a href="contents/about.html" onclick="load_about()">About Us</a></li>
            <li><a href="contents/a.html" onclick="load_exchange()">Exchanges</a></li>
            <li><a href="contents/b.html" onclick="load_photos()">Photos</a></li>
            <li><a href="contents/c.html" onclick="load_contact()">Contact</a></li>
        </ul>
    </div>

    <div id="content">

    </div>

And

$(document).ready(function(){
    $('#header ul.nav li').click(function(){
        $("#content").load($(this).find('a').attr('href'));
        return false;
    })
});

Upvotes: 1

Related Questions