11499 sujets

JavaScript, DOM et API Web HTML5

DOM, Fonction LOAD ou AJAX

Bonjour,

Je souhaiterai introduire le contenue de mes pages PHP dans ma DIV sans que le site recharge toute la page complete pour mon panneau admin.

Je n'ai aucune connaissance en Jquery, je suis limité qu'en php pour le moment mais j'essaie d'apprendre.

Voici le menu : 
<div class="nav">
        <div class="table">
       
        <ul  class="select"><a href="index.php?page=home"><b>Home</a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
    <?php if ($loggedin == 1) {
                                                                for ($i=0;$i<count($pages);$i++)
                                                                {
                                                                    $thispage = $pages[$i];
                                                                    if (array_search($thispage[2], explode(":", $rights)) !== false && $rights != "")
                                                                    {
                                                                        $pagelink = $thispage[0];
                                                                        $pagetitle = $thispage[1];
                                                                        if ($thispage[0] == $page)
                                                                            $class = "active";
                                                                        else
                                                                            $class = "";
                                                                        if (file_exists("modules/$pagelink/page.php") == true)
                                                                        {
                                                                            echo "";
                                                                        }
                                                                    }
                                                                }
                                                            } ?>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
       
        <ul class="select"><li><a href=""><b>Admin</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li id="lienload" ><a href="?page=admin">Admin du Staff</a></li>
                <li id="lienload" ><a href="?page=staff">Tracker du Staff</a></li>
                <li id="lienload"><a href="?page=settings">Setting de la VA</a></li>
                <li id="lienload"><a href="?page=partners">Sponsors</a></li>
                <li id="lienload"><a href="?page=liveboard">liveboard</a></li>
                <li id="lienload"><a href="?page=downloads">Coins du t&eacute;l&eacute;chargement</a></li>
                <li id="lienload"><a href="?page=website">Web site</a></li>
                <li id="lienload"><a href="http://www.morava-airlines.com/manager/index.php?page=awards">Awards</a></li>

        </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
                           
        <ul class="select"><li><a href=""><b>Staff</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub"><li><a href="?page=events">Coin Events</a></li>
                <li><a href="?page=tours">Nos Tours</a></li>
                <li><a href="?page=pilots">Nos Membres</a></li>
                <li><a href="?page=aircraft">Aircraft</a></li>
                <li><a href="?page=fleet">Matricules Aircraft</a></li>
                <li><a href="?page=hub">Hubs</a></li>
           
              <li><a href="?page=timetable">Nos vols</a></li>
              <li><a href="?page=suggest">Suggestions de vols</a></li>
              <li ><a href="?page=flightlogs">Pireps</a></li>
              <li><a href="?page=bookings">R&eacute;servations</a></li>
              <li ><a href="?page=mail">Envoyer Mails</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href=""><b>Plugins</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">

                <li><a href="?page=phpbb">Forum</a></li>
                <li><a href="?page=galeriepictures">Galerie Photos</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href=""><b>Le site</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
               
                <li><a href="?page=webpage">Editeur de page</a></li>
                <li><a href="http://www.morava-airlines.com/">Le Site</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href="?page=news"><b>News</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
           
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="clear"></div>
        </div>



Je voudrais que le titre des pages se fasse dans ma div :


<div id="page-heading"><h1>Page: <?php echo $pageheader ?></h1></div>



Et le contenue doit se charger dans ma div : 
<div id="table-content">


J'ai lu plusieurs tutoriel mais rien n'est bien clair pour la structure de mon menu, certain dissent que AJAX n'est pas une solution, que faire et comment?

Voici la page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $charset ?>" />
<title>MORAVA - Admin panel</title>
<link rel="shortcut icon" HREF="favicon.ico" type="image/x-icon" />
<!-- <script type="text/javascript" src="http://radio.fr/info/player/player.js?apiKey=268c19238648a478efa2a25c6ac44cbcdc78061c"></script><a href="http://funradio.radio.fr" class="radio-config" playerVariant="embedded" playerSize="400x68">Fun Radio</a><noscript><a href="http://www.radio.fr/">Radio en ligne, plus de 10.000 stations radio sur internet : radio.fr  - écoutez, c’est simple</a></noscript> -->

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
    document.write('<script src=third-party-libs/' +
    ('__proto__' in {} ? 'zepto' : 'jquery') +
    '.min.js><\/script>')
  </script>
  <script src="js/jquery/jquery.magnific-popup.min.js?v={{site.mfpversion}}"></script>
 
<!--  checkbox styling script -->
<script src="js/jquery/ui.core.js" type="text/javascript"></script>
<script src="js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="js/jquery/jquery.bind.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    $('input').checkBox();
    $('#toggle-all').click(function(){
     $('#toggle-all').toggleClass('toggle-checked');
    $('#mainform input[type=checkbox]').checkBox('toggle');
    return false;
    });
});
</script> 

<![if !IE 7]>

<!--  styled select box script version 1 -->
<script src="js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.styledselect').selectbox({ inputClass: "selectbox_styled" });
});
</script>
 

<![endif]>


<!--  styled select box script version 2 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
    $('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
});
</script>

<!--  styled select box script version 3 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

<!--  styled file upload script -->
<script src="js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
    $("input.file_1").filestyle({
    image: "images/forms/upload_file.gif",
    imageheight : 29,
    imagewidth : 78,
    width : 300
    });
});
</script>

<!-- Custom jquery scripts -->
<script src="js/jquery/custom_jquery.js" type="text/javascript"></script>
 
<!-- Tooltips -->
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('a.info-tooltip ').tooltip({
        track: true,
        delay: 0,
        fixPNG: true,
        showURL: false,
        showBody: " - ",
        top: -35,
        left: 5
    });
});
</script>

<!--  date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="js/jquery/date.js" type="text/javascript"></script>
<script src="js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
        $(function()
{

// initialise the "Select date" link
$('#date-pick')
    .datePicker(
        // associate the link with a date picker
        {
            createButton:false,
            startDate:'01/01/2005',
            endDate:'31/12/2020'
        }
    ).bind(
        // when the link is clicked display the date picker
        'click',
        function()
        {
            updateSelects($(this).dpGetSelected()[0]);
            $(this).dpDisplay();
            return false;
        }
    ).bind(
        // when a date is selected update the SELECTs
        'dateSelected',
        function(e, selectedDate, $td, state)
        {
            updateSelects(selectedDate);
        }
    ).bind(
        'dpClosed',
        function(e, selected)
        {
            updateSelects(selected[0]);
        }
    );
   
var updateSelects = function (selectedDate)
{
    var selectedDate = new Date(selectedDate);
    $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
    $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
    $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
    .bind(
        'change',
        function()
        {
            var d = new Date(
                        $('#y').val(),
                        $('#m').val()-1,
                        $('#d').val()
                    );
            $('#date-pick').dpSetSelected(d.asString());
        }
    );

// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());

// and update the datePicker to reflect it...
$('#d').trigger('change');
});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){


$(document).pngFix( );
});
</script>

</head>
<body id="home-bg">
<!-- Start: page-top-outer -->
<div id="page-top-outer">   

<!-- Start: page-top -->
<div id="page-top">

    <!-- start logo -->
    <a href=""><img src="images/logo.png"  alt="" width="300" height="72" /></a>
    <div id="logo"></div>
    <!-- end logo -->
   
    <!--  start top-search -->
    <div id="top-search">
    <!--    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td><input type="text" value="Search" onblur="if (this.value=='') { this.value='Search'; }" onfocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
        <td>
        <select  class="styledselect">
                    <option value="">News</option>
                        <option value="">Events</option>
            <option value=""> Pilop (Callsing)</option>
            <option value=""> Flight (Flight Number)</option>
        </select>
        </td>
        <td>
        <input type="image" src="images/shared/top_search_btn.gif"  />
        </td>
        </tr>
        </table> -->
    </div>
     <!--  end top-search -->
     <div class="clear"></div>

</div>
<!-- End: page-top -->

</div>
<!-- End: page-top-outer -->
   
<div class="clear">&nbsp;</div>
 
<!--  start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat">
<!--  start nav-outer -->
<div class="nav-outer">

        <!-- start nav-right -->
        <div id="nav-right">
       
            <div class="nav-divider">&nbsp;</div>
            <div class="showhide-account"><img src="images/shared/nav/nav_myaccount.gif" width="93" height="14" alt="" /></div>
            <div class="nav-divider">&nbsp;</div>
            <a href="index.php?action=logout" id="logout"><img src="images/shared/nav/nav_logout.gif" width="64" height="14" alt="" /></a>
            <div class="clear">&nbsp;</div>
       
            <!--  start account-content -->   
            <div class="account-content">
            <div class="account-drop-inner">
                <a href="http://www.morava-airlines.com/editaccount" id="acc-settings">
Modifier mon compte
</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="http://www.morava-airlines.com/dashboard" id="acc-details">Mon bureau de vol </a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="http://www.morava-airlines.com/flightbook" id="acc-project">Mon carnet de vol</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="index.php?page=Inbox" id="acc-inbox">Inbox</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="http://www.morava-airlines.com/stats" id="acc-stats">Statistics</a>
            </div>
        </div>
        <!--  end account-content -->
       
        </div>
        <!-- end nav-right -->
 

        <!--  start nav -->
       
                <div class="nav">
        <div class="table">
       
        <ul  class="select"><a href="index.php?page=home"><b>Home</a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
    <?php if ($loggedin == 1) {
                                                                for ($i=0;$i<count($pages);$i++)
                                                                {
                                                                    $thispage = $pages[$i];
                                                                    if (array_search($thispage[2], explode(":", $rights)) !== false && $rights != "")
                                                                    {
                                                                        $pagelink = $thispage[0];
                                                                        $pagetitle = $thispage[1];
                                                                        if ($thispage[0] == $page)
                                                                            $class = "active";
                                                                        else
                                                                            $class = "";
                                                                        if (file_exists("modules/$pagelink/page.php") == true)
                                                                        {
                                                                            echo "";
                                                                        }
                                                                    }
                                                                }
                                                            } ?>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
       
        <ul class="select"><li><a href=""><b>Admin</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li id="lienload" ><a href="?page=admin">Admin du Staff</a></li>
                <li id="lienload" ><a href="?page=staff">Tracker du Staff</a></li>
                <li id="lienload"><a href="?page=settings">Setting de la VA</a></li>
                <li id="lienload"><a href="?page=partners">Sponsors</a></li>
                <li id="lienload"><a href="?page=liveboard">liveboard</a></li>
                <li id="lienload"><a href="?page=downloads">Coins du t&eacute;l&eacute;chargement</a></li>
                <li id="lienload"><a href="?page=website">Web site</a></li>
                <li id="lienload"><a href="http://www.morava-airlines.com/manager/index.php?page=awards">Awards</a></li>

        </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
                           
        <ul class="select"><li><a href=""><b>Staff</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub"><li><a href="?page=events">Coin Events</a></li>
                <li><a href="?page=tours">Nos Tours</a></li>
                <li><a href="?page=pilots">Nos Membres</a></li>
                <li><a href="?page=aircraft">Aircraft</a></li>
                <li><a href="?page=fleet">Matricules Aircraft</a></li>
                <li><a href="?page=hub">Hubs</a></li>
           
              <li><a href="?page=timetable">Nos vols</a></li>
              <li><a href="?page=suggest">Suggestions de vols</a></li>
              <li ><a href="?page=flightlogs">Pireps</a></li>
              <li><a href="?page=bookings">R&eacute;servations</a></li>
              <li ><a href="?page=mail">Envoyer Mails</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href=""><b>Plugins</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">

                <li><a href="?page=phpbb">Forum</a></li>
                <li><a href="?page=galeriepictures">Galerie Photos</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href=""><b>Le site</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
               
                <li><a href="?page=webpage">Editeur de page</a></li>
                <li><a href="http://www.morava-airlines.com/">Le Site</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="nav-divider">&nbsp;</div>
       
        <ul class="select"><li><a href="?page=news"><b>News</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
           
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
       
        <div class="clear"></div>
        </div>
        <div class="clear"></div>
        </div>
        <!--  start nav -->

</div>
<div class="clear"></div>
<!--  start nav-outer -->
</div>
<!--  start nav-outer-repeat................................................... END -->

  <div class="clear"></div>
 
<!-- start content-outer ........................................................................................................................START -->
<div id="content-outer">
<!-- start content -->
<div id="content">

    <!--  start page-heading -->
<div id="page-heading"><h1>Page: <?php echo $pageheader ?></h1><br/><h3><?php

setlocale (LC_ALL,"fr");

echo "Aujourd'hui nous sommes le: ".strftime("%A %d %B %Y",time());

// Retourne -> Aujourd'hui nous sommes le: vendredi 11 novembre 2005

?>

</h3>

    </div>
    <!-- end page-heading -->

<table border="0" width="100%" bgcolor="#FFFFFF"  cellpadding="0" cellspacing="0" id="content-table">
<tr  >
    <th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>

    <th class="topleft"></th>
    <td id="tbl-border-top">&nbsp;</td>
    <th class="topright"></th>
    <th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
    <td id="tbl-border-left"></td>
    <td>
   

    <div id="content-table-inner">   
      <!--  start content-table-inner ...................................................................... START -->
      <!--  start table-content  -->
            <div id="table-content">

       
       
           
            <?php
if ($page == "home")
{ ?>
<h2><div align="center">Ceci est le panneau d'administrateur r&eacute;serv&eacute; aux membres du Staff.</div></h2><br />
<?php if ($loggedin == 0) { ?>
<form action="index.php?action=login" method="post">
<body id="login-bg">
 
<!-- Start: login-holder -->
<div id="login-holder">

    <!-- start logo -->
    <div id="logo-login">
   
    </div>
    <!-- end logo -->
   
    <div class="clear"></div>
   
    <!--  start loginbox ................................................................................. -->
    <div id="loginbox">
   
    <!--  start login-inner -->
    <div id="login-inner">
        <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>Mail</th>
            <td><input type="text" name="username" class="login-inp" /></td>
        </tr>
        <tr>
            <th>Password</th>
            <td><input type="password" name="password" value="************"  onfocus="this.value=''" class="login-inp" /></td>
        </tr>
        <tr>
            <th></th>
            <td valign="top"><input type="checkbox"  name="remember" class="checkbox-size" id="login-check" /><label for="login-check">Remember me</label></td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" class="submit-login"  /></td>
        </tr>
        </table>
    </div></form>
     <!--  end login-inner -->
    <div class="clear"></div>




<?php } else { ?>
<br/><div align="center"><span id="result_box2" lang="fr" xml:lang="fr">Bonjour </span>:<br/><br/> <?php
$id = $_SESSION[$sessionid];
if ($id == "admin")
{
    echo "Administrator";
}
else
{
    if ($row = mysql_fetch_array(mysql_query("SELECT * FROM {$dbprefix}Users WHERE ID=$id")))
    {
        echo $row["Name"];
    }
}
?>
<br/><br/>
Voici le nouveau panneau d'administration de MORAVA-Airlines, version 2.0.
<br/>
           
           
    <div >
           
           </div>
           
           
            <br /><br />
<form action="index.php?action=logout" method="post">
<div align="center"><input type="submit" value="Deconnection" /></div><br/><br/><br/><br/><br/><span style="color: #F00">Si vous n'etes pas "<?php
$id = $_SESSION[$sessionid];
if ($id == "admin")
{
    echo "Administrator";
}
else
{
    if ($row = mysql_fetch_array(mysql_query("SELECT * FROM {$dbprefix}Users WHERE ID=$id")))
    {
        echo $row["Name"];
    }
}
?>" , merci de bien vouloir d&eacute;connecter cette session.</span>
</form>
<?php } ?>
<?php }
if ($page != "home")
{
    if (file_exists("../installer") == true) echo "<span style=\"color:#FF0000;font-size:20px\">Attention:</span> The installation directory still exists, please delete this directory as it imposes mayor security risks!<br /><br />";
    include("modules/$page/page.php");
}
?>
           
           
           
            </div>
            <!--  end table-content  -->
</td>
        <td id="tbl-border-right"></td>
    </tr>
    <tr>
        <th class="sized bottomleft"></th>
        <td id="tbl-border-bottom">&nbsp;</td>
        <th class="sized bottomright"></th>
    </tr>
    </table>
    <div class="clear">&nbsp;</div>

</div>
<!--  end content -->
    <div class="clear">&nbsp;</div>
</div>
<!--  end content-outer........................................................END -->

<div class="clear">&nbsp;</div>
   
   
<!-- start footer -->        
<div id="footer">
    <!--  start footer-left -->
    <div id="footer-left">
    Copyright &copy; 2010-<?php echo gmdate("Y"); ?>, <a href="http://www.jbussemaker.com/">jBussemaker Websites</a> - Design by HESS Gregory.</li>
                            <li class="last">All rights reserved.</div>
    <!--  end footer-left -->
    <div class="clear">&nbsp;</div>
</div>
<!-- end footer -->
 
</body>
</html>

cette page est nommé index.php
salut,
c'est une question qui revient souvent et apparemment on ne donne pas de réponse assez précise. Je vais essayer de me lancer en essayant de faire simple...

Le principe serait déjà de fractionner tes pages pour isoler le contenu que tu souhaiteras charger via Ajax. Tu placerais ce contenu dans un fichier que tu nommerais "fichier.inc.php".
Par exemple, ce contenu serait dans le fichier susnommé ^^

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>


Ensuite, il faut prendre en considération le fait que le JS peut être désactivé et que donc, tu dois laisser la possibilité d'accéder à tes lien via la navigation normale. Tu créerais donc des liens dont le "href" pointerait vers la page correspondante.
Pour faire correspondre tout ça, on nommerait chaque page de la même manière que la partie ".inc.php". Si on a donc appelé la partie fractionnée "fichier.inc.php", ta page s'appellera "fichier.php".
Dans ta page nommée "fichier.php", tu inclurais la partie fractionnée via un simple include :

<!DOCTYPE html> 
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Page secondaire</title>
	</head>	
	<body>
	<?php include("fichier.inc.php") ?>
	</body>
</html>


Une fois qu'on a tout ça, on peut faire un chargement via Ajax à partir d'une autre page.
La structure de la page serait très simple :

<!DOCTYPE html> 
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Page principale</title>
	</head>	
	<body>
		<div id="content"></div>
		<a href="fichier.php">Charger</a>
	</body>
</html>

On pourrait même mettre plusieurs liens pour voir différents contenus mais bon...

Une fois qu'on a tout ça de prêt, on peut écrire le script à proprement parlé:

	<script>
		function addEvent(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent('on'+b,c);}	// Compatibilité de l'écoute d'évènements

		var a = document.querySelectorAll("a");	// On récupère tous les liens

		function loadContent(e){
			e.preventDefault ? e.preventDefault() : (e.returnValue = false);	// On annule l'action du lien qui serait de cibler son "href"
			
			var that = e.target || e.srcElement,	// On récupère le lien qui a déclanché le clic pour récupérer son attribut "href"
				sendObj;
			
			// On crée ensuite l'objet XMLHttpRequest avec une compatibilié des différents navigateurs
			(window.XMLHttpRequest) ? (sendObj = new XMLHttpRequest()) : (window.ActiveXObject) && (sendObj = new ActiveXObject("Microsoft.XMLHTTP" ));

			// Lorsqu'il y a un changement d'état de la requête
			sendObj.onreadystatechange = function(){
				// Si la requête est terminée et qu'on a une réponse, alors on la charge dans l'élément don l'ID est : content
				if (sendObj.readyState==4) document.getElementById("content").innerHTML = sendObj.responseText;
			}
			
			// On établie notre requête et on spécifie le fichier ciblé
			sendObj.open("POST", that.href.replace(".php", ".inc.php"), true);
			sendObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			sendObj.send();
		}

		for(var i=0, l=a.length; i<l; i++) addEvent(a[i], "click", loadContent, false);
	</script>

et ça devrait marcher.
C'est une manière très simple et directe de faire cela mais on pourrait pousser un peu plus les choses.
Bien sûr pour tester tout cela en local il te faut un serveur virtuel.[/i]
Oui mais le probléme c'est que l'index.php se situe dans un dossier (manager), et dans ce dossier il y a un autre dossier nommé "modules" , chaque modules contient 3 fichiers : pages.php /table.php / action.php

Lorsque l'on clique dans le menu de l'index.php, ca fait appel à la page.php du module en question que l'on souhaite afficher..
Cette structure ne peu pas etre modifé malheureusement .


upload/53142-Capture.JPG
Modifié par morava (06 May 2014 - 22:12)
C'est bien sûr un exemple que j'ai donné et non solution clé en main. On peut toujours récupérer une partie d'un contenu textuel de différentes manières. Le "sendObj.responseText" contiendra dans ce cas toute ta page et à toi d'extraire ce qui t'intéresse.
Zelalsan a écrit :
C'est bien sûr un exemple que j'ai donné et non solution clé en main. On peut toujours récupérer une partie d'un contenu textuel de différentes manières. Le &quot;sendObj.responseText&quot; contiendra dans ce cas toute ta page et à toi d'extraire ce qui t'intéresse.

Aie c'est un peu chinois pour moi Smiley decu
Sujet clos
Aller à