jquery ajax page load how?

Question

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

Routhinator · Accepted Answer · 2013-09-07T15:54:19.937

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.

thanks thanks ... its work.. actually my code also worked.. i never tried before in localhost.. when i tried it work also... so both code work... so any idea how could e add loading animation and fade or slide effect — Accore LTD, Sep 07 '13 at 07:25
Since you are feeding in templates to these tab views, I might add that you should look at [UnderscoreJS](http://underscorejs.org/), [RequireJS](http://requirejs.org/) and [TextJS](https://github.com/requirejs/text) for preloading and processing your templates for these tabs. I will update my example for fadeIn as an example for animation. — Routhinator, Sep 07 '13 at 15:47

score 2 · Answer 2 · edited Mar 13 '20 at 03:08

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>

score 1 · Answer 3 · answered Sep 07 '13 at 07:11

1

You can try like this.

$(document).ready(function(){

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

});

answered Sep 07 '13 at 07:11

sudhAnsu63

5,510
4
34
50

thanks ... its work.. actually my code also worked.. i never tried before in localhost.. when i tried it work also... so both code work... so any idea how could e add loading animation and fade or slide effect – Accore LTD Sep 07 '13 at 07:23
for sliding effect or animation you can show an image in beforesend and close in success of the ajax call. – sudhAnsu63 Sep 07 '13 at 07:25
have any exmple for that ? actually i am new jquery and ajax so i don't know much yet. just want to add loading animation (gif file) and fade effect – Accore LTD Sep 07 '13 at 07:31
$('#loadingDiv') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ; http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – sudhAnsu63 Sep 07 '13 at 07:32
@AccoreLTD there are 5 types of ajax call.http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ Check here: you can do any animation in before send and complete. http://www.bennadel.com/resources/presentations/jquery/demo21/ http://spyrestudios.com/jquery-part-two-selectors-animation-and-ajax/ – sudhAnsu63 Sep 07 '13 at 07:35

score 0 · Answer 4 · answered Jan 10 '14 at 23:01

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);
    });

jquery ajax page load how?

4 Answers4