click a link or click submit without refreshing

Question

i have header, main_content, footer, right, and 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!

It's called AJAX: http://api.jquery.com/jQuery.ajax/ add more details about your scenario to get more detailed answers. — fabrik, Mar 18 '11 at 12:51

score 1 · Answer 1 · answered Mar 18 '11 at 12:55

1

There are two ways to do this:

1) Target your form to a hidden iframe

2) use AJAX

answered Mar 18 '11 at 12:55

Diodeus - James MacFarlane

112,730
33
157
176

1

IMHO, AJAX should be your first choice, not iframes. – Mike DeSimone Mar 18 '11 at 12:57

score 0 · Answer 2 · answered May 15 '13 at 21:39

0

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">

answered May 15 '13 at 21:39

arturo

1

score 0 · Answer 3 · edited May 23 '17 at 12:05

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.

score 0 · Answer 4 · answered Mar 18 '11 at 12:51

0

Here, try these

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

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

answered Mar 18 '11 at 12:51

Starx

77,474
47
185
261

1

Just an answer based on the title ;) – Starx Mar 18 '11 at 12:59

score 0 · Answer 5 · answered Mar 18 '11 at 12:57

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/

score 0 · Answer 6 · answered Mar 18 '11 at 12:57

0

bind an event handler to your element like this:

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

click a link or click submit without refreshing

6 Answers6