Charger le contenu dans la div sans rafraichissement de la page principale

Bonjour, j'ai 3 pages que je veux exécuter à l'intérieur d'une page principale ( index.html ), sorte de "app style"

les pages sont: form.html, la forme results.php et un link.html page

je veux qu'il se charge comme cette démo: retiré (site), mais pas à l'aide d'intégrer ou iframe.

Une fois le formulaire sur form.html est soumis, il va à la results.php page et de la page prétend à charger, puis au bout de 5 secondes ou si elle va à l' link.html page Et je veux que cela tout cela sans avoir à recharger index.html

J'ai regardé les pages dynamiques, & en essayant de cacher/montrer les choses à l'aide de jQuery
Mais je n'arrive pas à trouver quelque chose à travailler avec la minuterie et le formulaire de soumission de rendre les choses plus difficiles pour moi.

Toute aide serait Incroyablement Apprécié, j'ai été déconner avec ce pendant un certain temps et je n'ai vraiment connaître le html et le css et ont seulement joué un peu avec le JavaScript et le php un peu.

Je serait bien de voir quelques-code de travail avec une forme et d'une minuterie à l'aide du script ci-dessous. mais même se fait dans la bonne direction pourrait être utile. merci & désolé si cette question n'est pas approprié pour ce site.

Mon code: index.html

<html>
<head>
<title>index main page</title>
<style>
/** http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}
body{
background-image:url(http://i.imgur.com/z69OCGn.png);
background-repeat:repeat; 
height:100%;
width:100%;
position:fixed;
}
#wrap{
background-image:url(http://i.imgur.com/Xuyys5X.png);
background-repeat:repeat; 
width:800px;
height:100%;
}
#header{
width:600px;
height:100px;
}
#load{
background-color:#fff;
margin-top:100px;
width:600px;
height:300px;
}
.centre{
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrap" class="centre">
<div id="header">
</br></br></br></br>
<p align="center" style="color:#fff;"> The Page doesn't refresh or reload </p>
</div>
<div id="load" style=""  class="centre">
<embed src="form.html" width="600px" height="300px" style="border:1px solid">
</div>
</div>
</body>
</html>

form.html

<html>
<head>
<title>Page 1</title>
</head>
<body>
<div id="div3">
<div id="form">
<form action="results.php" method="post" >
<input id="field" name="field" required>
<input id="submit" name="submit" type="submit" value="submit">
</form>
</div>
</div>
</body>
</html>

result.php

<html>
<head>
<title>Page 2</title>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)>=100) {
location.href = 'link.html';
clearInterval(t);
exit;
}
i.innerHTML = parseInt(i.innerHTML)+1;
}
var t = setInterval(function(){ countdown(); },100);
</script>
</head>
<body>
<div id="div1">
<p>this will be displayed on the results page. its not, just for reference. </p>
<p>Submit: </p>
<font color="#33CC00"><?php echo $_POST["field"]; ?> </font>
<div style="margin-left:55px; margin-top:20px;">
<p>Page change in: <font color="#33CC00"><span id="counter"> 10</span></font></p>
</div>
<img src="http://i.imgur.com/LLzENHe.gif">
</div>
</body>
</html>

link.html

<html>
<head>
<title>Page 3</title>
</head>
<body>
<div id="div3">
<p>this is a link <a href="#">Link</a></p>
</div>
</body>
</html>
InformationsquelleAutor Benjamin | 2013-04-01
  1. 3

    Vous pouvez atteindre cet objectif en ayant trois divs avec dire ids comme '#home-page", "#résultat-page " et "lien-page". Garder les deux dernières pages cachées. Ensuite, faire un appel ajax sur le formulaire de soumission et d'affichage de la réponse à la #suite-page div et masquer le formulaire. Après quelques secondes, vous montrez le lien du n ° de page et de cacher le #résultat-page.

    Ici est un jsfiddle pour vous. J'espère que c'est ce que vous voulez.

    HTML

    <form method="post" action="results.php"> 
<h2>Form Page</h2>
Your form elements here
</form>
<div id="result-page" style="display:none">
<h2>Result Page:</h2>
Result of the ajax call here
</div>
<div id="link-page" style="display: none;">
<h2>Link page:</h2>
Link page content here
</div>


    Au chargement de la page, l'attacher à un événement pour soumettre le formulaire où vous faites un appel ajax et ajouter de la réponse dans la suite-page div

    JS

    $("form[ajax=true]").submit(function (e) {
$.ajax({
url: 'results.php',
type: 'POST',
success: function (data) {
$("#result-page").append(data).show(); //appending data response to result-page div
$('form').hide();  //hiding form
setTimeout(function () {
$("#result-page").hide(); 
$("#link-page").show();
}, 5000);
}
});
});
    • C'est exactement ce que je voulais, merci beaucoup d'avoir pris de votre temps à faire cela pour moi, je l'apprécie vraiment! surtout avec le jsfiddle démo trop! Merci encore! j'espère que vous avez eu une bonne journée 🙂
    • Im ayant un peu de mal à essayer de "localiser" le script off jsfiddle? des idées?
    • Ne vous obtenez une erreur?
    • vous avez besoin de changer l'attribut action="/echo/html/" pour le nom d'un fichier que le formulaire est soumis à
    • oui mais sa semble charger ce fichier/page alors? ne peut-il pas soumettre sur lui-même? est ce que cela a quelque chose à voir avec le lien div charge pas ou est-ce un autre problème?
    • Je ne sais pas si je suis d'accord avec vous. Dites-vous après la soumission, il ne reste pas sur la même page? Aussi pouvez-vous mettre à jour le lien que vous avez donné avec une bonne action, vous serez en aide afin que je puisse voir le problème.
    • fait, mais le résultat n'est pas visible ?
    • vérifier si le champ est reçu en php comme dans le succès de la méthode 'responsehtml' est vide.
    • Son dit: returnhtml si je le modifier à vide, il vient de charges pour toujours sur la soumettre le formulaire.
    • Ce que je voulais dire, c'est faire un print_r dans le results.php et de vérifier si le fichier reçoit les données transmises.
    • ce code exact recommandez-vous ?
    • voir ici pour savoir comment déboguer.
    • grâce vient avec "Array ( [html] => demotext )" demotext être ce que j'ai écrit dans la forme.
    • ok cool. print_r imprime le tableau. Remplacez la par echo. Espérons que cela résout tout
    • Yeap merci tas utilisés: <?php echo $_POST["html"]; ?>, et fonctionne très bien merci à tous pour vous aider, j'ai vraiment vraiment l'apprécier 🙂

    InformationsquelleAutor anpsmn