|
JavaScript - Paging Httprequest
hi, At the moment when I select a county from the dropdown list, they show in the <div id="ajaxDiv"> - HttpRequest is loading apage, I'd like to do this with the pagination?!
JavaScript Code: function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var rsCounty = document.getElementById('rsCounty').value;
var rsTown = document.getElementById('rsTown').value;
var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&rsTown=" + rsTown;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var rsCounty = document.getElementById('rsCounty').value;
var rsTown = document.getElementById('rsTown').value;
var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&rsTown=" + rsTown;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true);
countyRequest.send(null);
}
form shows list of counties: Code: <form name="form3" method="post" action="">
<!--<select name="menu2" onChange="MM_jumpMenu('parent',this,0)" class="textbox">-->
<select name="menu2" onChange="countyFunction();" class="textbox" id="rsCounty">
<option value="">Search by County...</option>
<?
$county_pubs = mysql_query("SELECT DISTINCT RSCOUNTY, COUNT(PUBID) As PubCount1 FROM pubs GROUP BY RSCOUNTY ORDER BY RSCOUNTY ASC")
?>
<?php while($row1 = mysql_fetch_array($county_pubs))
{
echo '<option value="'.$row1['RSCOUNTY'].'">'.$row1['RSCOUNTY'].' ('.$row1['PubCount1'].')</option>';
}
?>
</select>
<input type='hidden' id='name' />
<input type='hidden' id='rsCounty' />
<input type='hidden' id='rsTown' />
</form>
where I place: <div id="ajaxDiv"></div> this shows the countypubs.php page countypubs.php page Code: <?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
if ($msg <>"")
{
echo "<div class=\"ui-widget\">
<div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\">
<p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span>
<strong>Alert:</strong> $msg</p>
</div>
</div>";
}
$county = $_GET["rsCounty"];
echo $county .'<br />';
$tableName="pubs";
$targetpage = "default.php";
$limit = 20;
$query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages['num'];
$stages = 3;
$page = mysql_escape_string($_REQUEST['page']);
if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) {
$page = (int) $_GET['page'];
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<span class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</span>";
} echo 'Pubs found: '.$total_pages;
// pagination
echo $paginate;
?>
<div id="ajaxCountylist">
<div id="accordion">
<?php
while($row = mysql_fetch_array($result))
{
echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />';
echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>';
echo '</div></div>';
}
echo '<span style="float:right;">'.$paginate.'</span>';
?>
</div>
</div>
how do I do the same as what I am doing here to my pagination? here is the URL: http://www.mypubspace.com Similar TutorialsHi Guys, I am having a small problem in my Javascript when I am using HTTPRequest. I am unable to recieve my Response back from server (Java Servlet) in time. I am using following code; Code: // Following function will simply goes to the Server and check if provided class is present
function verifyClass(clsName)
{
var url = "checkServlet?className=" + clsName;
var chkResult = "";
var httpReq = null;
// Create an ActiVEX control object according to BRowser we are using
httpReq = GetXmlHttpObject();
if (httpReq == null)
{
alert ("AJAX Request Failed!!! - Your browser does not support AJAX - Skipping CLASS Check.");
}
else
{
// First prepare ourself to recieve a response from server
// Following code will simply wait untill server finish its response
httpReq.onreadystatechange = function(){
if(httpReq.readyState == 4){
chkResult = httpReq.responseText;
}
}
// Setup a request parameters
httpReq.open("GET", url, true);
// Send the request
httpReq.send(null);
}
// Return the response recieved
return chkResult;
}
I am using FireBug (plugin with my Firefox) to debug the HTML and I can see the response in it but when I am putting 'alert' before return the variable 'chkResult' is empty. Your suggestion will be appreciated; Thanks, -- SJunejo I'm trying to display a widget that is called through another page. The "test" word shows up, but the WIDGET portion does not. I know the address works, I can call it through the url and it displays fine so that's not the problem. It's something within the javascript. Here's my code: Code: <script type="text/javascript">
httpRequest("addressto/xxx/xxx/recent-widget.php", showrecent);
//Function to call HTTPRequest
function httpRequest(url, callback) {
var httpObj = false;
if (typeof XMLHttpRequest != 'undefined') {
httpObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
httpObj = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try{
httpObj = new ActiveXObject('iMicrosoft.XMLHTTP');
} catch(e) {}
}
}
if (!httpObj) return;
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4) { // when request is complete
callback(httpObj.responseText);
}
};
httpObj.open('GET', url, true);
httpObj.send(null);
}
//Function to display the widget within innerHTML
function showrecent(WIDGET){
d = document.getElementById('recent-widget');
d.innerHTML = "test" + WIDGET;
}
</script>
</head>
<body>
<div id="recent-widget"></div>
</body>
</html>
Can anyone see what's wrong with it? hi, in my page he http://www.mypubspace.com/dashtest/order.html I would like this working Cross Domain and output in JSON? Can anyone please help me? thanks code: Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
countyRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
I am developing simple quiz page using php and JavaScript. i have 24 questions in 6 pages which i was loaded from a xml file. i just want to do the validation page by page. those pages loading from JavaScript paging functions. Now the validations happen to all 24 questions. i need to do the validations only in the current page then the other page.. here is a sample link which i want to develop...(the quiz thing) http://www.careerpath.com/career-tests/career-quiz/ please help me... Code: <table border=0 width=520px>
<tr>
<td >
<div style=" border:0px solid gray;">
<br>
<div style="width:400px;height:52px;background:url(images/head-careerpath-quiz-test.gif ) no-repeat;valign:middle;margin-left:25px;line-height:52;"></div>
<div style="width:500px;padding-left:10px;">
<fieldset>
<form id="formID" class="formular" action="result.php" method="get">
<b>Getting Started</b> <br> <br>
There are 24 pairs of statements below. As you read each pair, click the one statement in each pair that has the most appeal for you. As you select, assume that each choice is equal in pay, prestige, and challenge. If you are uncertain of a job title, select the one that has the most appeal for you.
<br><br><div style="width:470px;height:31px;valign:middle;line-height:31px; color:#FFF;background:url(images/question_header_single_test.gif) no-repeat;"> <b>Please respond to the following statements.</b>
</div>
<div style="width:470px; background:#ece6f8;">
<table id="results" border=0>
<tr>
<th></th>
<th></th>
</tr>
<?php
// set name of XML file
$file = "question.xml";
// load file
$xml = simplexml_load_file($file) or die ("Unable to load XML file!");
?>
<?php foreach ($xml->question as $section) {$quesionindex++; ?>
<tr>
<td valign="top"> <?php echo $section->qno.".";?></td>
<td valign="top">
<input class="validate[required] radio" type='radio' id="answer1_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='0' ><?php echo $section->answer1->answer;?> <br />
<input class="validate[required] radio" type='radio' id="answer2_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='1'><?php echo $section->answer2->answer;?>
</td>
</tr>
<?php } ?>
</table>
<br><br>
<div id="pageNavPosition"></div>
<br>
<div><input class="submit" type="submit" /><input type="reset" /></div>
</div>
</form>
<script type="text/javascript"><!--
var pager = new Pager('results', 6);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>
</fieldset>
</div>
</div>
</div>
</td>
</tr>
</table>
here is the javascript i am using for paging Code: function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var i=1;
var pagerHtml = '<span onclick="' + pagerName + '.prev();i--;" class="pg-normal"> « Prev </span> | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';
//pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';
pagerHtml += '<input value="Continue" type="submit" onclick="'+pagerName+'.next();" class="pg-normal"/> ';
element.innerHTML = pagerHtml;
}
}
Hi all, I'm having trouble paging from six to six the search results coming from a webservice, hope someone can help : Let's see it with an example: The variable that stores the number of elements of the search results array is called contentLenght. Let's say that contentLenght equals 9. Then I need a div showing 6 elements an another sowing 3 elements. If contentLenght equals 7, I need a div showing 6 elements an another showing one element. If the value of contentLenght is 18, then I need three divs containing 6 elements each.. and so on. Now the paging itself: if I have just one div there's no need for paging, but if I have two of more I have to show the page's numbers. Then when a number is clicked the present div must hide and the div containing the elements for the page number should show. Am I right with the approach? I was about to paste some code but the only way I've come out with the six to six paging is with a long if else structure, and I'm sure there's a smarter way of doing it. Thanks a ton in advance hi i am doing a project and now i am try to work on paging, however i am stuck. I want to put in a list of links of website in the itemfilereadstore. So when show, i want to be able to click on any one of the link in the page, which will bring you to the selected website reference guide: http://dojotoolkit.org/reference-gui...agination.html |
|||||||