Onclick page should not reload

Question

Hi how can i make my page don't reload every time i click another link?

function myFunctionD(id) { 
   var x=document.getElementById(id);   
   var myURL = "http:www.sample.php";
   document.location = myURL + "?t_id=" + x.id ;
 return false
}

HTML:

<a href="docview.php?id=26" id="3" onclick="myFunctionD('3')" target="iframe_a" >July 17, 2013</a>

 <a href="docview.php?id=26" id="4" onclick="myFunctionD('4')" target="iframe_a" >July 18, 2013</a>

Answer 1

You can change the target to open the link in new tab or window . Use window.open() instead of window.location

Answer 2

Actually you don't even need to use Ajax. You can simply load content of another page in your current page with Jquery's $.get function

 //Inserting a div for holding another page content. On click of button, this div will update content
 <div id="contentdiv"></div>
 <input type="button" value="Page 1 Load Content" onclick="loadContent('page1.html')"/>
 <input type="button" value="Page 2 Load Content" onclick="loadContent('page2.html')"/>
 <input type="button" value="Page 3 Load Content" onclick="loadContent('page3.html')"/>

 <script type="text/javascript">
     function loadContent(page)
     {
         //Empty contentdiv for new content and add new page content with jquery's $.get
         $('#contentdiv').empty();
         $.get('http://www.example.com/'+page, function(data) { $("#contentdiv").append(data); });    
         //This will load page content in your contentdiv
         //for more info about $.get visit this http://api.jquery.com/jQuery.get/
     }
 </script>

In your other pages, just put that content which you want to load into contentdiv. Do not make complete html page with html and body tags etc. Just content you want to appear in you contentdiv.

Answer 3

You can use ajax something like this

<script type="text/javascript">
    $(function(){ myFunctionD('3'){
            var form = $(this).parent("form");
            $.ajax({
                type: "POST",
                url: form.attr("yourform"),
                data: form.serialize()
            })

            return false;
        });
    });
</script>