I have a little project going on that started and finished nicely, where I used ajax to load a number of hotels onto the page by looking at what the user was typing into the form search bar. That worked very well, an d then came the second part of the development that I have been looking at, and I’m stumped. I can get it so far but I cant work out the last bit so that after it loads what Ive set as 9 as the limit, when they click the show more bar the next 9 loads and so on.
I have the inital index page with the code below
<script>
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch(this.type) {
case 'text':
$(this).val('');
break;
}
$("#displayDiv").css('display','none');
$("#desc").css('display','block');
});
}
</script>
<form name="myForm" >
<input type="radio" name="rdio" value="region" checked onclick="clear_form_elements(this.form)" class="radio-buttons" data-hint="eg. Cancun" ><label>City or Region</label>
<input type="radio" name="rdio" value="hotel" onclick="clear_form_elements(this.form)" class="radio-buttons" data-hint="eg. Barceló Bávaro Beach..." ><label>Hotel</label>
</div>
<input type="text" onkeyup="ajaxFunction(this.value);" name="username" placeholder="Cancun" style="width:370px; height:27px; margin-top:6px;" class="text" id="myMessage" />
<div id="msg"></div>
<div id="displayDiv"></div>
</form>
<script type="text/javascript">
function ajaxFunction(str)
{
var httpxml;
try {
httpxml=new XMLHttpRequest();
} catch (e) {
try {
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged() {
if ($('#myMessage').val() == ''){
$("#infoSearch").css('display','block');
$("#displayDiv").css('display','none');
$("#desc").css('display','block');
}
if (httpxml.readyState==1){
$("#desc").css('display','none');
}
if (httpxml.readyState==4){
document.getElementById("displayDiv").innerHTML=httpxml.responseText;
document.getElementById("msg").style.display='none';
$("#displayDiv").css('background-color','#FFF');
}
}
if ($("input[name='rdio']:checked").val() == 'region')
genderValue= "region"
if ($("input[name='rdio']:checked").val() == 'hotel')
genderValue= "hotel"
var url="ajax-search-demock_3.php";
url=url+"?txt="+str+"";
url=url+"&radio="+genderValue;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
document.getElementById("msg").innerHTML="Please Wait ...";
document.getElementById("msg").style.display='inline';
document.getElementById("displayDiv").style.display='block';
}
</script>
When typing as you can see it then calls the other page ajax-search-demock_3.php, which is below
require "config2.php";
if(isset($_GET['radio'])){$radioB=$_GET['radio'];}else{$radioB='';}
if(isset($_GET['txt'])){$in=$_GET['txt'];}else{$in='';}
if(isset($_GET['sid'])){$sid=$_GET['sid'];}else{$sid='';}
$msg="";
if(strlen($in)>0 and strlen($in) <40 ){
if ($radioB == "region") {
$sqlAll="select COUNT(*) as num_rows from tbl_hotels LEFT JOIN tbl_resorts ON (tbl_resorts.Id_Rsrt=tbl_hotels.IdRsrt_Hot) where tbl_resorts.Nom_Rsrt like '%$in%' AND Act_Hot=1";
$result = $dbo->prepare($sqlAll);
$result->execute();
$num_rows = $result->fetchColumn();
$showLimit = 9;
$sql="select Nom_Hot, IdType_Hot, Id_Hot, IdRsrt_Hot, Dir_Hot, IdCat_Hot, Act_Hot, Foto1_Hot from tbl_hotels LEFT JOIN tbl_resorts ON (tbl_resorts.Id_Rsrt=tbl_hotels.IdRsrt_Hot) where tbl_resorts.Nom_Rsrt like '%$in%' AND Act_Hot=1 LIMIT $showLimit";
} elseif ($radioB == "hotel") {
$sql="select Nom_Hot, IdType_Hot, Id_Hot, IdRsrt_Hot, Dir_Hot, IdCat_Hot, Act_Hot, Foto1_Hot from tbl_hotels where Nom_Hot like '%$in%' AND Act_Hot=1";
}
foreach ($dbo->query($sql) as $nt) {
$msg .="<div class='obj'><a href='#'><p class='text'>REQUEST REPORT</p><div class='item'><img src=http://www.checksafetyfirst.com".$nt['Foto1_Hot']." alt='pepsi' width='360' height='239'><div class='item-overlay top'></div></div></a><p class='nameHotel'>".$nt['Nom_Hot']."</p><p class='addressHotel'>".$nt['Dir_Hot']."</p></div>";
}
if($num_rows > 0){
echo $msg;
}
if($num_rows > $showLimit){ ?>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
<div class="show_more_main" id="show_more_main<?php echo $tutorial_id; ?>">
<span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts">SHOW MORE</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading….</span></span><br/><br/>
</div>
<?php } }
?>
And here is where I am working on it, but I cant work out how to get the show more working, it maybe too much to look at, so thank you if you do. Its only working on the ‘Region’ radio button for the time being, so leave it at that, and you can type ‘Cancun’ or ‘Phuket’ to get some results showing.
I’d been following this tutorial, but got lost trying to work it into what I had, as its different