CODEWITHSUNDEEP
ajaxjquery
Accore LTD
Accore LTD

Reputation: 287

jquery ajax page load how?

i tried many code but not successfull yet. mainly i am looking jquery ajax load page. its very simple but i can't figure out prople. see bellow sample html code. how i want.

    <div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5">page 5</a></li>
    </ul>
    </div>


 <div class="contentarea" id="response">

        </div>

bellow is js code i tried many other also no work properly....

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    // load index page when the page loads
    $("#response").load("page1.html");
    $("#page1").click(function(){
    // load home page on click
        $("#response").load("page1.html");
    });
    $("#page2").click(function(){
    // load about page on click
        $("#response").load("page2.html");
    });
    $("#page3").click(function(){
    // load contact form onclick
        $("#response").load("page3.html");
    });
});

</script>

if you guys know any good solution for that type loading page. please share with me.

thanks

Upvotes: 3

Views: 23060

Answers (4)

Abijeet Patro
Abijeet Patro

Reputation: 2884

Try this, while making sure that the path of the html files are accurate - 

<div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1" title="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2" title="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3" title="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4" title="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5" title="page5">page 5</a></li>
    </ul>
    </div>
 <div class="contentarea" id="response">
 </div> 


<script>
$(document).ready(function(){
     $(".menu a").click(function(){
        var title = this.title;
        var responseDiv = $("#response");
        $(responseDiv).empty().load(title + ".html", function(response, status, xhr){
            // function to call after the load.
            if (status == "error") {
                // Error occured
            }
            else {
                // Success
            }
        });
    });
});

</script>

Upvotes: 2

user2741277
user2741277

Reputation: 1

This way, you can do it. I'm using it in www.sambook.ir on flag icons.

$('li a').click(function(){
            var address = $(this).attr('href')+ " #id(every section you want. be careful about the space before numbersign#)";
            $("#previews").empty("#response");
            $("#previews").load(address);
    });

Upvotes: 0

Routhinator
Routhinator

Reputation: 3809

I've taken your code and tidied it up a bit, and switched the .load() out for .html() for testing in a jsFiddle. The code is working as you'll see here:

http://jsfiddle.net/Routh/cqJ6Q/

$(document).ready(function () {
    // load index page when the page loads
    $("#response").html("DEFAULT");
    $("#page1").click(function () {
        // load home page on click
        $("#response").html("TESTING 1");
    });
    $("#page2").click(function () {
        // load about page on click
        $("#response").html("TESTING 2");
    });
    $("#page3").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 3");
    });
    $("#page4").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 4");
    });
    $("#page5").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 5");
    });
});

The output changes with every button press. The only reason I can see that it's not working for you is that the HTML files aren't referenced properly.

Do you have any console output?

UPDATED

Here is the jsFiddle modified to have the content fade in rather than just loading:

http://jsfiddle.net/Routh/cqJ6Q/1/

I changed this:

$("#response").html("TESTING 1");

To this: 

$("#response").hide().html("<h1>Page 1</h1><p>Page 1 has been loaded</p>").fadeIn('slow');

There are many more effects and combinations of tricks you can use, but that is outside the scope of this Q&A forum. Please check http://api.jquery.com/category/effects/ for more functions.

Upvotes: 3

sudhansu63
sudhansu63

Reputation: 6200

You can try like this.

$(document).ready(function(){

    $("#page1").click(function(){
    // load home page on click
        $("#response").html($('body').load("page1.html"));
    });

});

Upvotes: 1

Related Questions