CODEWITHSUNDEEP
phpjqueryhtml
user634850
user634850

Reputation: 515

click a link or click submit without refreshing

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!

Upvotes: 1

Views: 4931

Answers (6)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

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.

Upvotes: 0

arturo
arturo

Reputation: 1

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

Upvotes: 0

fabrik
fabrik

Reputation: 14365

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

Upvotes: 0

Narmatha Balasundaram
Narmatha Balasundaram

Reputation: 877

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/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

There are two ways to do this:

1) Target your form to a hidden iframe

2) use AJAX

Upvotes: 1

Starx
Starx

Reputation: 78991

Here, try these 

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

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

Upvotes: 0

Related Questions