How to change part of a web page without reloading a whole page correctly?
Question
I tried to invoke a function of javascript to make a php page change with the navigation bar, without realoading the whole page, but the closes i've been into is I succed to do that with a button command but the javascript inside the page is turned off, what did I do wrong?
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion();
$('#button_1, #button_2, #button_3, #button_4').click(function(){
var which_to_load = ( $(this).attr('id')+"" ).replace('button_', ''),
source_of_file = 'content'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
});
</script>
Link part:
<div id="content_changing_buttons">
<form method="get" id="change_content_buttons" action="">
<p>
<li><input value="1" type="submit" id="button_1" name="page" /> Reggiani presents at frankfurt Light + Build 2012</a><br/><br /></li>
<li><input value="2" type="submit" id="button_2" name="page" /> Reggiani presents at frankfurt Light + Build 2012</a><br/><br /></li>
<li><input value="3" type="submit" id="button_3" name="page" /> Reggiani presents at frankfurt Light + Build 2012<br/><br /></li>
<li><input value="4" type="submit" id="button_4" name="page" /> Reggiani presents at frankfurt Light + Build 2012<br/><br /></li>
</p>
</form>
</div>
And the content part:
// default number of page to load
$defaultPageNumber = '2';
// check if content number is set
$numberOfPageToInclude = isset($_GET['page']) ? $_GET['page'] : $defaultPageNumber;
$options = array(
'options' => array(
'min_range' => 1,
'max_range' => 4,
));
if (filter_var($numberOfPageToInclude, FILTER_VALIDATE_INT, $options) !== FALSE) {
include ('content' . $numberOfPageToInclude . '.php');
} else {
echo '<span style="color:red;">Wrong page number, including default page!</span><br />';
include 'content1.php';
}
?>
</div>
Now I have done like it was suggested, but when i invoke the code, at first the default php page showed up, then when i clicked the button to change the php side of the page, it worked but somehow it turned off the rest of the javascript, even my accordion js and blinds js (that it reffered from another php page) suddenly turned off.
Anyone can suggest how to fix this problem?
1 answers
solution1
0 2012-06-06 07:35:48
<html>
<head>
<script language="javascript" type="text/javascript">
function showentry()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("right").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","details.php",true);//whatever the contents of file details.php displayed in right div
xmlhttp.send();
}
</script>
<style type="text/css">
#left{width:500px;height:100%; float:left;}
#right{width:500px; float:left;}
</style>
</head>
<div id="left">
<input type="button" name="GET" value="show" onclick="showentry()"/>
</div>
<div id="right">
</div>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.