CodingForums.com - refresing page without reload using ajax and php

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - refresing page without reload using ajax and php (http://www.codingforums.com/showthread.php?t=108877)

refresing page without reload using ajax and php

I want to make a comment for visitors where they can add comments and it will get updated without refreshing .

I have gone though a lot of tutorial but they dont tell how to code the .js file or .php file

Please help.

what is hard about it?

Making the request

Code:

var req;



function SendData(name,comment) {

    var url = "yourPage.php";

    req = false;

    // branch for native XMLHttpRequest object

    if(window.XMLHttpRequest && !(window.ActiveXObject)) {

            try {

                        req = new XMLHttpRequest();

        } catch(e) {

                        req = false;

        }

    // branch for IE/Windows ActiveX version

    } else if(window.ActiveXObject) {

               try {

                req = new ActiveXObject("Msxml2.XMLHTTP");

              } catch(e) {

                try {

                          req = new ActiveXObject("Microsoft.XMLHTTP");

                } catch(e) {

                          req = false;

                }

                }

    }

        if(req) {

                         var params = "name" + name + "&" + "comment=" + comment;

                req.open("POST", url, true);

                req.onreadystatechange = processReqChange;

                req.send(params);

        }

             else{

               //you need to do a normal form submission

             }

}

So you would call that like
SendData("Eric","Foo Bar Candy");

Getting the request back you set the innerHTML with the responseText where you want it to show up.

Code:

function processReqChange() {

    // only if req shows "loaded"

    if (req.readyState == 4) {

        // only if "OK"

        if (req.status == 200) {

          document.getElementById("youroutputid").innerHTML = req.responseText;

        } else {

            alert("There was a problem retrieving the XML data:\n" +

                req.statusText);

        }

    }

}

On the server

You handle the Post like any other form submission and spit out the HTML that you want to show up. (I know almost zippo about php)

Code:

print "Your elephant's name is: " . $_POST['name'];

Eric

CAN U PLEASE EXPLAIN WHICH FILE IS .js and which one is php., as i am new to this...

SendData() and processReqChange() are the javascript codes, they can be put in a .js file and the last code which is labeled "On the server" is the php.

instead of

PHP Code:


		
			
print "";

you should use

PHP Code:


		
			
echo "";

hey i got the same problem but i cant fix it.. i tried the above but it dont help

i got several files.. projecten.php, projecten.incl.php and selectuser.js and some more but u dont need them for the problem

true AJAX i get a variable "q" (in projecten.php and he shows every think i want to see that works great now i want from another file to call the ajax (go to a new page with a link) and i send a POST or GET with it.. but then does the ajax dont pick it up.. does anybody got a solution here for?

i now way it wound work. i call the file projecten.php with a variable in GET but i need to call selectuser.js with a var.. how can i do that with a link.. or somethink like that..?

i hope u get the problem.. else just ask

i will post the code below.. i hope u can find what i need to change

selectuser.js

Code:

var xmlHttp



function showUser(str)

{

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)

     {

         alert ("Browser does not support HTTP Request")

         return

     }

    var url="includes/projecten.incl.php"

    url=url+"?q="+str

    url=url+"&sid="+Math.random()

    xmlHttp.onreadystatechange=stateChanged

    xmlHttp.open("GET",url,true)

    xmlHttp.send(null)

}



function stateChanged()

    {

        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

             {

             document.getElementById("txtHint").innerHTML=xmlHttp.responseText

             }

    }



function GetXmlHttpObject()

    {

        var xmlHttp=null;

        try

             {

             // Firefox, Opera 8.0+, Safari

             xmlHttp=new XMLHttpRequest();

             }

        catch (e)

             {

             //Internet Explorer

             try

                  {

                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

                  }

             catch (e)

                  {

                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }

             }

        return xmlHttp;

    }

projecten.incl.php

Code:

<?php     $project = $_GET['q'];  ?>



    <table border="0" >

        <tr>

            <td valign="top">

                <?php include "projecten.project.php"; ?><br><br>

                <?php     include "projecten.fase.php";    ?>

            </td >

                   

            <td valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

       

            <td valign="top">

                <?php include "projecten.opmerking.php"; ?>

            </td>

       

        </tr>

    </table>

   

<?php

    if ( $project !== "")

        {

            echo "<p>In de toekomst komen hier meerdere opties voor het project bij.</p>";

        }

    else {echo "<p>Selecteer een project</p>";}

?>

projecten.php

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

<html>

<head>

<script src="selectuser.js"></script>



<LINK HREF="includes/stijl.css" REL="stylesheet" TYPE="text/css" MEDIA="screen, print">

       <title>Projecten</title>



<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function popUp(URL) {

day = new Date();

id = day.getTime();

eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=220,left = 490,top = 362');");

}

// End -->

</script>



</head>

<body>

<h3>Projecten</h3>

<br>

 

 

<?php

$project = $_GET['project'];

$budget = $_GET['budget'];



 if     ( $_GET['date2'] == "" )

        {$date = $_GET['date'];}

 else     {$date = $_GET['date2'];}







?>

    <form method="get" action="projecten.php">

    <select name="project" onchange="showUser(this.value)">

    <option value="">Maak uw keuze</option>

<?php

             

    include "includes/connect_weekbrief.php";                    

    $query = "

            SELECT DISTINCT (projectuser.code) as code

            FROM projectuser

            WHERE     projectuser.user = 'planner'

            AND projectuser.id > '100'

            ORDER BY projectuser.code asc

            ";

   

    $sql = mysql_query($query) or die ( mysql_error( ) );       



    while($record = mysql_fetch_object($sql))     {       

                $project_code = "$record->code";                  // project_code aanmaken



    echo "<option value=". $project_code .">Project: ".$project_code."</option>"; // alles neerzetten

                                            }   

    echo "</select></form>";



    echo "<p><div id=\"txtHint\">Hier zal informatie over het project komen.</div></p>";

?>

</body>

</html>

Look how I handle the response, you NEED to check for the status code. Open up Firefox and load Firebug [http://getfirebug.com/]. Watch the XMLHttpRequest.

Eric

Quote:

Originally Posted by A1ien51 (Post 544784)

Look how I handle the response, you NEED to check for the status code. Open up Firefox and load Firebug [http://getfirebug.com/]. Watch the XMLHttpRequest.

Eric

i tried to read the code.. and find it out by myself but i cant find it

i did find out that i need to get the GET variable to the .js file.. if that can be done i can change the variable and the ajax will work:)

so i got projecten.php?projecten=testproject

now i need that variable to the selectuser.js file without doing anythink ( so i want to be compleetly automatic) do u now how i can do that?

Call the function with window.onload?

Eric

i tried somethings with it but nothing worked, i looked on the web but what i saw from it i dont think that is the think i need.

it could be that my code was to buggy it that way it dont worked.. but im afraid it is not what im looking for

I am not sure what you are talking about exactly.. am taking a guess that you want to call the function when the page load to load what ever is selected?

The JavaScript would look something like:

Code:

window.onload = function()

  var sel = document.forms[0].project;

  showUser(sel.options[sel.selectedIndex].value);

}

Eric

Quote:

Originally Posted by A1ien51 (Post 544934)

I am not sure what you are talking about exactly.. am taking a guess that you want to call the function when the page load to load what ever is selected?

The JavaScript would look something like:

Code:

window.onload = function()

  var sel = document.forms[0].project;

  showUser(sel.options[sel.selectedIndex].value);

}

Eric

uhm not realy i got that part working:) with ajax true a pull down list

now i got some links on another page. when i press the link i want to go to

http://localhost/planning/index.php?...&project=OCV27

the page projecten (that works) and then i want to activate the ajax (automatic) and that the variable project into the ajax get so that ajax maken the stuff visable.

i will try to set the page online so u can see it by ure self (uhm i cant do it now .. i will try it again to night.

i hope u get the problem now.. else just ask:)

thnx for the time u try to help me

-------------------------

update i fixed the problem

$proj = $_GET['project'];
if( isset( $proj ) )
{
echo"<script type=\"text/javascript\">showUser('" . $proj . "');</script>";
}

was the code i needed:)

Relaod page for every user

Hi

How can we refresh a page for every user same like

http://www.telebid.com/

using ajax and php

Anyone can help me with code /Sample

Thanks
Davinder

Quote:

Originally Posted by davinder16 (Post 695632)

Anyone can help me with code /Sample

There is a code sample in the 15-month old post to which you've replied.

can you tell me how can i

Quote:

Originally Posted by tomws (Post 695683)

There is a code sample in the 15-month old post to which you've replied.

Plz help me .
i want to refresh page using ajax periodically

Thanks