Question

When clicked on, a link should run PHP code that pulls info from a database on the same page.

I have achieved this using AJAX, a form and a button but really wish to use a link instead of button.

I have managed to get the link to work but the table from the database that the PHP script creates only flashes up for a second as the browser is refreshed.

How do I stop the refresh so the table is displayed?

I would be very grateful for any help.

My code is:

    <script language="javascript" type="text/javascript">

    function myFunction(){
    var ajaxRequest;  

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 has Failed");
            return false;
        }
    }
}

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('ajaxDiv1');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}

    document.proffForm.submit();
ajaxRequest.open("GET", "proff/all_proff.php");
ajaxRequest.send(null); 


    }

    </script>

    <form name='proffForm' >
    <a href="#" onclick='myFunction()' >List All Professions</a>
    </form>

    <div id='ajaxDiv1'></div></p>

php

     <?php 
     include '../dbc.php';



     $allprof1 = mysql_query("SELECT *  
                    FROM users 
                    ORDER BY profession" );

    $qry_result = mysql_query($allprof1) or die(mysql_error());
    ?>
    <?php     
    $display_string = "<table border='1' cellpadding='5' width='100%'               bordercolor='000099'border='solid'>";
    $display_string .= "<tr align='left' bgcolor='009966'>";
    $display_string .= "<th><span class='titlehdr3'>Profession</span></th>";
    $display_string .= "<th><span class='titlehdr3'>Business Name</span></th>";
   $display_string .= "<th><span class='titlehdr3'>Profile</span></th>";
   $display_string .= "</tr>";


   while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td><span class='tabs'>$row[profession]</span></td>";
$display_string .= "<td><span class='tabs'>$row[full_name]</span></td>";
$display_string .= "<td><span class='tabs'>$row[url]</span></td>";
$display_string .= "</tr>";

   }

   $display_string .= "</table>";
   echo $display_string;

   ?> 

Answer 1

I can see, you have added submit function on the form. In ajax request we don’t need any submit action, so remove the line

document.proffForm.submit();

from your code. It will work perfectly.