I know sort of the same question has been asked before, but whatever I read and tried I just can't get my code to work.. I'm still sort of a noob and I have the feeling I'm doing it all wrong
So, right now I have a limit of 10. I want the limit to be 50 when I click the button 'view more', without refreshing the page.
This is my html:
<?php
require_once 'php/connection.php';
include 'includes/head.php';
?>
<body>
<?php include 'includes/header.php'; ?>
<section class="wrapper" id="projectshow">
<?php
$limit = '10';
$query = mysql_query("SELECT * FROM expodetails order by rating desc LIMIT $limit");
$counter = 1;
while($row = mysql_fetch_array($query)){
$id = $row['id'];
$projectname = $row['projectname'];
?>
<article class="project-wrapper">
<div class="project">
<h3><?php echo "$projectname"; ?></h3>
</article>
<?php
}
?>
<a href="#" class="submit viewmore" onclick="bekijkmeer('a');">View more</a>
</section>
</body>
This is my file named ajax.js:
function check(){
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
function bekijkmeer(x)
{
var xmlHttp = check();
xmlHttp.open("GET","/expoproject/php/changelimit.php?appeltje="+x+"",true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById('topchange').innerHTML=xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
And this is my file named changelimit.php:
<?php
$limit = '50';
$query = mysql_query("SELECT * FROM expodetails order by rating desc LIMIT $limit");
$counter = 1;
while($row = mysql_fetch_array($query)){
$id = $row['id'];
$projectname = $row['projectname'];
?>
<article class="project-wrapper">
<div class="project">
<h3><?php echo "$projectname"; ?></h3>
</article>
<?php
}
?>
