Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Question on Basic AJAX

    Hi,

    I am new to web development. Learning new stuff.

    Today I learnt about AJAX (with PHP) and did the first example listed in the
    w3scools.com.

    Its, typing the employee number in the HTML form and displaying the first/last name and city of that employee. Just simple.

    But I encountered a problem, to display the first/last name and the city I have defined a DIV and in the beginning, I have put a default message, and upon receiving the first/last name from the server, I am replacing that default message with the first/last name and city using :

    Code:
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    But its showing the first/last name of the employee for less than a second and disappearing and showing the default message again.

    I am copying my HTML and the PHP code here :

    HTML :
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
            <title>My First Ajax Example</title>
            
            <script>        
                function showEmployee(str)
                {
                    var xmlhttp;    
                    if (str==="")
                      {
                      document.getElementById("txtHint").innerHTML="";
                      return;
                      }
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                    xmlhttp.onreadystatechange=function()
                      {
                      if (xmlhttp.readyState===4 && xmlhttp.status===200)
                        {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                        }
                      };
                    xmlhttp.open("GET","getEmployee.php?q="+str,true);
                    xmlhttp.send();
                }
            </script>        
            
    
            
        </head>
        <body>
            
            <form action="" onsubmit="return showEmployee(empid.value);"> 
                <input type="text"   id="empid" name="empid" />
                <input type="submit" name="submit" value="Submit" />
            </form>        
            
            
            <div id="txtHint">Employee info will be listed here...</div>
    
        </body>
    </html>

    PHP Code (getEmployee.php) :

    Code:
    $pID = intval($_GET['q']);
    
     $con = mysqli_connect("localhost","user_name","password" , "database name");
     if (!$con)
       {
       die('Could not connect: ' . mysqli_error($con));
       }
    
     $sql="SELECT * FROM Employees WHERE EmployeeID = '".$pID."'";
    
     $result = mysqli_query($con,$sql);
    
     while($row = mysqli_fetch_array($result))
       {
       echo $row['EmployeeID'] . " " . $row['FirstName'] . " " . $row['LastName'] . " " . $row['City'];
       echo "<br />";
       }
    
     mysqli_close($con);

    Please throw some light on it. I just followed exactly what is done in w3schools.com (http://www.w3schools.com/php/php_ajax_database.asp) except the database name/user/pwd....


    Thanks a lot,


    thanks again,


    Isaac

  • #2
    New Coder
    Join Date
    Nov 2013
    Location
    Athens, Greece
    Posts
    14
    Thanks
    0
    Thanked 1 Time in 1 Post
    Its very old way that ajax code that you use.
    Better do it with jquery.

    //////
    var your_variable = $.ajax({
    url: "tha_page_that_you_want_totake_yourvar..php?itemid="+itemid,
    async: false
    }).responseText;

    $('#id').html(your_variable );

  • #3
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Quote Originally Posted by Isaac Sureshkum View Post
    But its showing the first/last name of the employee for less than a second and disappearing and showing the default message again.
    Indicating that this is not a problem with the PHP code. Moving to Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #4
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Just a wild guess !

    The form will refresh the same page again after successfully
    executing the showEmployee.

    Try and return false; as a result of the function, this should
    inhibit the refresh.

    Regards
    My site
    If you’re doing software development right, you’re probably doing Agile wrong.
    -- Isaac Schlueter

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    The w3school site shows how to do ajax with a seperate php file. Yours (Isaac Sureshkum) has the php added to the top of your HTML code. A horse of a different color.

    And markos.ioannou, is wrong jqury is not a newer or better way of doing ajax. It's a different way that comes with a lot of overhead.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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