www.webdeveloper.com
Results 1 to 14 of 14

Thread: paging with ajax doesn't work

  1. #1
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7

    paging with ajax doesn't work

    I am trying to make ajax paging, but it does not work continuously.

    this my code :
    index.html
    Code:
    <body onload=paging('start')>
    <span id='txtHint'></span>
    </body>
    snippet code of paging.js
    Code:
    function paging(str){
    xmlhttp = GetXmlHttpObject();
    var url = "paging.php";
    var page;
    var begin;
    if (str != start'){
    page = myForm.page.value;
    begin = myForm.begin.value;
    }
    //alert(str+" "+page+" "+begin);
    url=url+"?q="+str;
    url=url+"&page="+page;
    url=url+"&begin="+begin;
    url=url+"&sid="+Math.random();
    //alert(url);
    xmlhttp.onreadystatechange = stateChange;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }
    and snippet code of paging.php
    Code:
    $limit = 1;
    $result = mysql_query("select * from mytable");
    $totalrow = mysql_num_rows($result);
    $totalpage = $totalrow / $limit;
    if((int)$totalpage < $totalpage){
    $totalpage = (int)$totalpage + 1;
    }
    $q = $_GET['q'];
    $page = $_GET['page'];
    $begin = $_GET['begin'];
    if($q == "start"){
    $page = 1;
    $begin=0;
    } else {
    if ($q == "next"){
    $page = $page + 1;
    $begin = $begin + $limit;
    }
    if ($q == "back"){
    $page = $page - 1;
    $begin = $begin - $limit;
    }
    }
    echo "<form name='myForm' onSubmit='paging(this.form)'>
    <input type='hidden' name='page' id='page' value=$page>
    <input type='hidden' name='begin' id='begin' value=$begin>";
    $result = mysql_query("select * from mytable order by id limit $begin, $limit");
    while($row = mysql_fetch_array($result)){
    echo $row[text];
    }
    if($page<$totalpage){
    echo "<input type='button' name='next' id='next' value='next' onClick='paging(this.value)'>";
    }
    if($page>1){
    echo "<input type='button' name='back' id='back' value='back' onClick='paging(this.value)'>";
    }
    echo "</form>";
    it work only one click.
    any idea ?

    best regards !

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    And where's your stateChange function?. Should be something like:
    Code:
    function stateChange(){
    if (xmlhttp.readyState==4&&xmlhttp.status==200){
    var response=xmlhttp.responseText;
    
    // now do whichever you want with the response
    
    }
    }
    PS. You should better echo a final response only once, at the end of your PHP code.

  3. #3
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7
    my stateChange is there.., its only snippet code

    here my complete paging.js

    Code:
    function paging(str){
        xmlhttp = GetXmlHttpObject();
        var url = "paging.php";
        var page;
        var begin;
        if (str != 'start'){
    	 page = myForm.page.value;
    	 begin = myForm.begin.value;
    	 alert(myForm.page.value+" "+myForm.begin.value);
    	 //alert(str);
        }    
        //alert(str+" "+page+" "+begin);
        url=url+"?q="+str;
        url=url+"&page="+page;
        url=url+"&begin="+begin;
        url=url+"&sid="+Math.random();
        //alert(url);
        xmlhttp.onreadystatechange = stateChange;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
    
    function GetXmlHttpObject(){
    	try{
    		xmlhttp = new XMLHttpRequest();
    	} catch (e){
    		try{
    			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e){
    			try {
    				xmlhttp = new ActiveXObjec("Microsoft.XMLHTTP");
    			} catch (e){
    				alert("Your browser does not support Ajax !");
    				return false;
    			}
    		} 
    	}
    	return xmlhttp;
    }
    
    function stateChange(){
    	if(xmlhttp.readyState == 4){
    	    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    	}
    }

  4. #4
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7
    may be my explanation is confusing. this the simple one :

    so now the problem not about the paging, but in the variable that doesn't send continuously, it's why the paging does not work

    this the code :

    phpajax.html
    Code:
    <script type="text/javascript" src="phpajax.js"></script>
    <html>
    <body onLoad="phpajax('start')">
    <div id="txtHint"></div>
    </body>
    </html>

    phpajax.js
    Code:
    function phpajax(str){
    xmlhttp = GetXmlHttpObject();
    var url = "phpajax.php";
    var page;
    if (str != 'start'){
    page = myForm.page.value;
    alert("str : "+str+" myForm.page.value : "+myForm.page.value+" page : "+page);
    }
    url=url+"?str="+str;
    url=url+"&page="+page;
    url=url+"&sid="+Math.random();
    xmlhttp.onreadystatechange = stateChange;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }
    function GetXmlHttpObject(){
    try{
    xmlhttp = new XMLHttpRequest();
    } catch (e){
    try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e){
    try {
    xmlhttp = new ActiveXObjec("Microsoft.XMLHTTP");
    } catch (e){
    alert("Your browser does not support Ajax !");
    return false;
    }
    }
    }
    return xmlhttp;
    }
    function stateChange(){
    if(xmlhttp.readyState == 4){
    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    }
    }
    phpajax.php
    Code:
    <?php
    $str = $_GET['str'];
    $page = $_GET['page'];
    
    if($str == "start"){
    $page = 1;
    } else {
    $page = $page + 1;
    }
    
    echo "<form name='myForm'>";
    echo "<input type='text' name='page' id='page' value='$page'>";
    echo "<input type='button' id='proses' name='proses' value='proses' onclick='phpajax(this.value)'>";
    echo "</form>";
    echo "str : ".$str." myForm.page.value : ".$page." page : ".$page;
    ?>
    i have no idea, why it can be like that..

    any idea ?

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Try something like this:
    Code:
    if(xmlhttp.readyState == 4){
    if(xmlhttp.status==200){
    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    }
    }
    and
    Code:
    $str = $_GET['str'];
    $page = $_GET['page'];
    
    if($str == "start"){
    $page = 1;
    } else {
    $page = $page + 1;
    }
    $response='';
    $response.='<form name="myForm">';
    $response.='<input type="text" name="page" id="page" value="'.$page.'">';
    $response.='<input type="button" id="proses" name="proses" value="proses" onclick="phpajax(this.value)">';
    $response.='</form>';
    $response.='str : '.$str.' myForm.page.value : '.$page.' page : '.$page;
    echo $response;
    


    By short: you should check the status of the response and should better echo a single PHP variable, once, at the end.

  6. #6
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7
    still same buddy..

    is it possible issue with my php version, or something else, not about the wrong logical code ?

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    What happens if you go directly to the PHP page? Do you get the expected results? Check Firebug's Net tab to see what the httprequest is actually being built as (and if it is being sent at all). That will also allow you to snoop into the PHP response.

    @Kor, There is not really a difference between multiple "echo" statements and a single one. I've rarely reduced my scripts to a single echo.

  8. #8
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7
    still same buddy..

    is it possible issue with my php version, or something else, not about the wrong logical code ?

  9. #9
    Join Date
    Jan 2009
    Posts
    3,346
    This problem might be solved easier using JSON (json_encode, json_decode) since I don't think form elements put into a page using innerHTML are added to the DOM properly. Also:
    page = myForm.page.value;
    If the element was in the DOM you'd need to access it using either the document.element.sub_element.attribute or document.getElementById(elementID) syntax to get at the value. A couple of "alert(variable)" should let you know if you've got the value you are looking for.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Let's take it otherwise:
    Quote Originally Posted by argonz
    but it does not work continuously.
    What do you mean by that? Explain. In which browser? Have you tested in all the major browsers?

  11. #11
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7
    Sorry for my double posting..!

    Finally it's work in IE, but it doesn't work in MF

    it's the first time I get the suck issue in my first experience in web development.

    any suggestion for it, how do I make it compatible cross-browser ?
    Last edited by argonz; 11-24-2010 at 12:42 AM. Reason: addition

  12. #12
    Join Date
    Jul 2005
    Location
    Tangerang, Indonesia
    Posts
    171
    Quote Originally Posted by criterion9
    If the element was in the DOM you'd need to access it using either the document.element.sub_element.attribute or document.getElementById(elementID) syntax to get at the value.
    criterion9, you're right

    @argonz, your script should be :
    Code:
    page = document.myForm.page.value;
    or
    Code:
    page = document.getElementById("page").value;

  13. #13
    Join Date
    Nov 2010
    Posts
    1
    Here is some sample code for php ajax paging. I hope you get something from it.

  14. #14
    Join Date
    Nov 2010
    Location
    Makassar, Indonesia
    Posts
    7

    Thumbs up

    Quote Originally Posted by yearbass View Post
    criterion9, you're right

    @argonz, your script should be :
    Code:
    page = document.myForm.page.value;
    Finally...! this code is working fine in both browser

    @yearbass : thanku !

    Thanku All !

    I Appreciate for All kind to help me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles