click a link or click submit without refreshing

i have header, main_content, footer, right, and 开发者_JS百科left content

my right content has a random link

i don't want my right content to be refresh when I click a random link and the main_content would be the output

is it possible that a web page without refreshing the page when you click a link or click submit button and still you can see the url on your browser what you have clicked? how do to that?

thanks!

There are two ways to do this:

1) Target your form to a hidden iframe

2) use AJAX

Here, try these

<a href="#"> Your Link </a>

<input type="submit" onClick"return false;" />

Ajax helps you do exactly that. So the skeleton will work like this - When you submit a link, that posts to the server side using Ajax and the page does not get refreshed. Ajax is essentially a xmlhttprequest submitted to the backend. You may decide to hand code your own xmlhttprequest or take the jquery route(def, the easiest of the 2. You pick your battles, right?)

Here's some help with using jquery http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

bind an event handler to your element like this:

$('#yourBtn').live('click', function(e){
    //do the AJAX thingy
    e.preventDefault();
}

Read more about jQuery's AJAX solution

The page does not refresh when you try to call a javascript function like this:

<a href="javascript:func()"> Your Link </a>

<form action="javascript:func()" method="post">

This answer is based on the title.

click a link (pure javascript):

<a href="javascript:functionName()"> Your Link </a>
<script type=text/javascript">
    function functionName(){
        // Do the job...
        return false;
    }
</script>

click a link (using jQuery):

<a id="myId" href="#"> Your Link </a>
<script type=text/javascript">
    $(document).ready(function(){
        $("#myId").on("click", function(){
            // DO the job...
            return false;
        });
    });
</script>

In other words set a click listener for your link and inside the listener's function return false.

You can avoid the refresh page functionality for the submit button on the same way.

On another stackoverflow discussion.