CODEWITHSUNDEEP
jqueryajaxhtml
Tay
Tay

Reputation: 53

Changing the content of a webpage without refreshing

i have volunteered to make a website for my local animal shelter and they wanted one very similar to http://fsasri.com/. i really like what they do with the buttons and how when you click only the center div changes. iv tried to accomplish this many ways using innerhtml and the jquery version i can't remember it off the top of my head. not matter what i do i can't put that much new content in and internet explore pops up with a security warning and won't let the changes happen unless you allow blocked scripts and activeX. help on how you guys would accomplish this effect and ways to avoid this pop up internet explore would help bundles. iv been doing alot of researchs and have had no luck so far

Upvotes: 2

Views: 7692

Answers (3)

daryl
daryl

Reputation: 15237

HTML:

<a href="http://path.com/to/page.html" data-ajax>Home</a>

JS:

$(function() {
    var box = $('#loadtodiv');
    $(document).on('click', 'a[data-ajax]', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: $(this).attr('href'),
            success: function(data) {
                box.html(data);
            }
        });
    });
});

Something like this should do it, providing that the content on the pages is only meant for the boxes, otherwise you'll have to target the element on the page speficically.

Upvotes: 2

Steven Vanden Broucke
Steven Vanden Broucke

Reputation: 139

Try using ASP.net?

Your own VB/C# code will update or change any content of the website page you like to change.

Upvotes: 0

liliumdev
liliumdev

Reputation: 1179

The website at the http://fsasri.com uses frames which I really wouldn't recommend due to a lot of security concerns if not used correctly.

What you can do, however, is to change the content of your 'main' div using jQuery's Ajax functions. Your buttons should look something like this:

<a href="javascript:void(0);" class="button" onclick="getPage('home')">Home</a>

And with the following function you can make it work properly:

<script>    
function getPage(page)
{
   $.ajax({

     type: "GET",
     url: 'www.yourweb.com/' + page + '.html',
     success: function(data) {
          $('#maindiv').html(data);
     }

   });

}
</script>

Upvotes: 0

Related Questions