CODEWITHSUNDEEP
jqueryajax
cfz
cfz

Reputation: 343

How to load external page using ajax

i have a link button that supposed to link to another page. The content of that page should be displayed to the current page. I'm using the bootstrap framework, however the function I created doesn't seem to work.

here's my code;

<a href="" id="reslink">link1</a>

<div class="span8" id="maincont"></div>

javascript;

$('#reslink').click(function(){
    $.ajax({
        type: "GET",
        url: "sample.html",
        data: { },
        success: function(data){
            $('#maincont').html(data);
        }
    });

});

Upvotes: 4

Views: 37514

Answers (4)

Akbarali
Akbarali

Reputation: 904

None of the above methods worked for me. It worked for me.

$(document).ready(function() {
    $(document).on('click', 'a', function(e) {
        e.preventDefault();
        //ajax load page
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            dataType: 'html',
            data: {
                type: 'ajax'
            },
            success: function(data) {
                //find body and replace
                $('#content').html(data);
                setStyle();
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
});

Note that you should not send the entire html in this. You only need to indicate where the body should be changed.

Place this code in the head section

Example

Upvotes: 0

Pranav
Pranav

Reputation: 81

body onload="abc()" in the loaded page should work when rendered from ajax.

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

You have following ways.

First

use html as below,.

<a href="Javascript:void(0);" id="reslink">link1</a>

Javascript:void(0); work as return false from script.

Second

Do not change anything in html code but make below change in jQuery code.

$('#reslink').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "sample.html",
        data: { },
        success: function(data){
            $('#maincont').html(data);
        }
    });
});

e.preventDefault(); prevent the default behavior of the HTML so you can execute your code.

Upvotes: 6

SomeShinyObject
SomeShinyObject

Reputation: 7821

Maybe load() would be a better choice for you?

$("#reslink").click(function() {
    $("#maincont").load("sample.html");
});

Be mindful that loading content in this way could potentially break History and Favorites.

Upvotes: 2

Related Questions