Benjamin Benjamin - 4 years ago 60
PHP Question

Load content within div without refreshing main page

Hello i have a 3 pages i want to run within one main page (

index.html
) sort of "app style"

the pages are:
form.html
, the form
results.php
and a
link.html
page

i want it to load like this demo: http://dancingfox.co.nz/ but not using embed or iframe.

Once the form on
form.html
is submitted it goes to the
results.php
page and that page pretends to load and then after 5 seconds or so it goes to the
link.html
page And i want this all to happen without reloading
index.html


I have looked at dynamic pages & trying to hide/show things using jQuery
But i can't seem to get anything to work with the timer and the form submit making things hard for me.

Any help would be Unbelievably Appreciated I've been messing around with this for awhile and i only really know html and css and have only played around with JavaScript and php a bit.

I would be great to see some-working code with a form and timer using the script below. but even getting pointed in the right direction could be helpful. thanks & sorry if this question not appropriate for this site.

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

Answer Source

You can achieve this by having three divs with say ids as '#home-page', '#result-page' and 'link-page'. Keep the last two pages hidden. Then make an ajax call on form submit and display the response to the #result-page div and hide the form. After few secs, you show the #link-page and hide the #result-page.

Here is a jsfiddle for you. I hope this is what you want.

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>


On load of page, attach an event for form submit where in you make an ajax call and append the response into the result-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);
        }
    });
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download