Include PHP, Loading page with ajax (without refresh the page)

Question

i'm new here so i want to be more specific as possibile XD ok let's start:

i've created a template with div+css,and with php i've created a script That include a file that you call from the menu Links with "index.php?modul=modulename" this is the code:

<div id="contenuto"><br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />
</div>

So...i would that when i click on a menu link it will include the specific module without refresh the page...sorry for my bad english xD

Please check the content of the vaiables so that you're prepared when $_GET['modul'] is "../../../../var/spool/ftp/pub/incoming/free_virus_scan" or similar. — ott--
– ott--, Commented Sep 5, 2011 at 23:12

Bahadır Birsöz · Accepted Answer · 2011-09-06 00:55:10Z

4

Let's say this is your menu links list :

<ul id="menulist">
  <li><a href="index.php?modul=mod1" rel="mod1">Module 1</a></li>
  <li><a href="index.php?modul=mod2" rel="mod2">Module 2</a></li>
  <li><a href="index.php?modul=mod3" rel="mod3">Module 3</a></li>
  <li><a href="index.php?modul=mod4" rel="mod4">Module 4</a></li>
  <li><a href="index.php?modul=mod5" rel="mod5">Module 5</a></li>
</ul>

You can achieve what you need with a simple jquery request and another "module bringer" php file :

<script>
    $(document).ready(function(){
        $('#menulist li a').click(function(e){
            e.preventDefault(); // This will prevent the link to work.
            $('#contenuto').load('module_bringer.php?mod=' +  $(this).attr('rel'););  // You get the moule from rel attribute
            // You should keep the actual link so bots can crawl.
        });
    });
</script>

Detailed Explanation Edit Below

0 - Ok. First of all you should make everything keep working without js and jquery. Bots do not crawl via a browser, they just take the source code and crawls through the code. (Assuming that you care for seo)

1 - Make an extra attribute to your menu links (in this case i've added rel attribute). The value of this attr is the module parameter value.

2 - Include jquery library (if you haven't included before - You can download it from here.

3 - You can use the second code part that i've wrote. You just need to change the triggering part. In the jquery code $('#menulist li a').click gets triggered when the explample menu items that's in the first code block. You have to change this according to your menu structure. This part is the one that makes the httprequest and puts the results into #contenuto div.

4 - You need to create another file for including the content which will be the target file of the jquery httprequest. (in this case i've named it module_bringer.php ). Contents should be like this :

<?php
    // You probably need to include some files here like db connection, class definitions etc.
?>
<br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />

edited Sep 6, 2011 at 0:55

answered Sep 5, 2011 at 22:58

Bahadır Birsöz

1811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

LdB Over a year ago

Sorry if i haven't understood one thing xD what should i put on module_bringer.php ? xD

Bahadır Birsöz Over a year ago

so you can bring the content for the link without refreshing the page. This file "module_bringer.php" will only print the new content of the "#contenuto" div when client clicks to a menu item.

LdB Over a year ago

ok, sorry me, can you write the code for me? xD cause i'm a noob on Jquery and my bad english knowledge don't help me xD sorry again :(

LdB Over a year ago

i've did all as you wrote..but isn't working... it still load refreshing the page.. and don't change the #contenuto ç_ç, there is way for chat with you? XD like skype/msn or facebook? and thanks again!!

LdB Over a year ago

Thanks man!!! i fixed it!! there was an error in your code;) on the ";" next (rel) but i solved it and now work!! thanks

|

brian_d · Accepted Answer · 2011-09-05 22:50:27Z

2

To achieve new functionality without a page refresh you will need to use ajax. I recommend using the jQuery library.

You will need to make calls to functions such as jQuery.ajax or load. Both functions take a url as the first argument which can be a PHP page.

answered Sep 5, 2011 at 22:50

brian_d

11.4k5 gold badges51 silver badges73 bronze badges

Comments

Robert · Accepted Answer · 2011-09-05 23:11:50Z

You'll want the links to look like <a href="#" onClick="getPage(module_name)>link text</a>. Replace module_name with the module name that you want each link to get. Ajax is all about the javascript `xmlHttpRequest'.

function getPage(modul){

    // This will create the XmlHttpRequest in modern browsers
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();                   
    }
    // This will create the XmlHttpRequest in older versions of Internet Explorer
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    // This is how you tell the script what to do with the response from the request
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("contenuto").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "moduli.php?modul="+modul, true);
    xmlhttp.send();
}

In this example you would need another file, moduli.php to recieve the xmlhttp request and include the correct file. It might look something like this.

$modul = $_GET['modul'];

include('moduli/'.$modul.'.php');

That's the first way to do it via AJAX that comes to mind but I'm no veteran so there's probably a much easier way to do it.

Edit: Other people have responded with much simpler ways to accomplish this using jQuery so I recommend taking a look at that. The only benefit to my version is that you wouldn't have to call to include the library (even though it's simple to do).

Collectives™ on Stack Overflow

Include PHP, Loading page with ajax (without refresh the page)

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related