Hi. Im trying to update a page with a form using AJAX but it isn't working. Nothing happens.

I have a table and one of the columns has an anchor tag like this<td><a href='#' value='$name' class='request' onclick='request(".$name.")'>$status</a></td> so when the user clicks on Request a form opens up via ajax. In the console this appears : Uncaught SyntaxError: missing ) after argument list page.php:64

ive probably gone blind looking at the code for too long coz i can't find anything missing. thanks in advance

This is the AJAX:

<script type="text/javascript">
        function request(str)
        {   
            if (window.XMLHttpRequest)
            {
                // Create the object for browsers
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // Create the object for browser versions prior to IE 7
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                // if server is ready with the response
                if (xmlhttp.readyState==4) 
                {
                    // if everything is Ok on browser
                    if(xmlhttp.status==200) 
                    {    
                        //Update the div with the response
                        document.getElementById("requestForm").innerHTML=xmlhttp.responseText;
                        $("#cancel-requestform").on("click", function(){
                            location.reload(true);
                        });
                    }
                }
            }
            //send the selected option id to the php page 
            xmlhttp.open("GET","userRequest.php?request="+str,true);
            xmlhttp.send();
            $(".requestForm").show();
        }
        </script>

This is the table:

<table>
    <thead>
        <th>Name</th>
        <th>Username</th>
        <th>Number</th>
        <th>Action</th>
    </thead>
    <tbody>
        <?php
        if(isset($_SESSION['sess_admin_id']))
        {
            require "connection.php";
            $user = $dbh->prepare("SELECT * FROM users ORDER BY name ASC");
            $user->execute();
            if($user->rowCount() > 0)
            {
                $user->setFetchMode(PDO::FETCH_ASSOC);
                while($rows = $user->fetch())
                {
                    $name = $rows['name'];
                    $username = $rows['username'];
                    $number = $rows['number'];
                    $status = $rows['status'];
                    echo "<tr><td>$name</td><td>$username</td><td>$number</td><td><a href='#' value='$name' class='request' onclick='request(".$name.")'>$status</a></td></tr>";
                }
            }
        }
        ?>
    </tbody>
</table>

userRequest:

<?php

    $request = $_GET['request'];

    require "connection.php";

    $getrequest = $dbh->prepare("SELECT * FROM users WHERE name = ? LIMIT 1");
    $getrequest->bindParam(1, $request, PDO::PARAM_INT);
    $getrequest->execute();
    if($getrequest->rowCount() > 0)
    {

        $getrequest->setFetchMode(PDO::FETCH_ASSOC);
        while($row = $getrequest->fetch()) 
        {
            $name = $row['name'];
            $username = $row['username'];
            $email = $row['email'];
            $phone = $row['number'];

            $newname = htmlspecialchars($name,ENT_QUOTES);
            $newusername = htmlspecialchars($username,ENT_QUOTES);
            $newemail = htmlspecialchars($email,ENT_QUOTES);

            echo 
            "<form method='post' action='userRequest.php'>
                <fieldset style='border:none'>
                    <input type='hidden' value='$name' name='name'>
                    <div style='height:0;width:100px'><label>Name </label></div>
                    <div style='margin-left:100px'>
                        :&nbsp;<label>$newname</label>
                    </div><br>
                    <div style='height:0;;width:100px'><label>Username </label></div>
                    <div style='margin-left:100px'>
                        :&nbsp;<label>$newusername</label>
                    </div><br>
                    <div style='height:0;;width:100px'><label>Email </label></div>
                    <div style='margin-left:100px'>
                        :&nbsp;<label>$newmail</label>
                    </div><br>
                    <div style='height:0;;width:100px'><label>Phone Number</label></div>
                    <div style='margin-left:100px'>
                        :&nbsp;<label>$phone</label>
                    </div><br>
                    <input type='submit' name='acceptRequest' class='submit-request' value='Accept Request'>
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type='button' id='decline-request' value='Decline Request'>
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type='button' id='cancel' value='Cancel'>
                </fieldset>
            </form>";
        }
    }
?>

Post the relevant part of the generated HTML for the table.

pritaeas, aren't the codes i posted relevant?

If I can see the generated HTML output for the table, then I think it'd be easier to spot the issue.

oh okay. well the table isn't much here :

table.jpg

In your question you said, in the console this appears : Uncaught SyntaxError: missing ) after argument list page.php:64, but the codes you have posted ends on line 52. Can you please show all your codes?

<!DOCTYPE>
<html>
    <head>
        <title>Admin | EMS</title>
        <link rel="stylesheet" type="text/css" media="all" href="admin.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
        function userrequest(str)
        {   
            if (window.XMLHttpRequest)
            {
                // Create the object for browsers
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // Create the object for browser versions prior to IE 7
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                // if server is ready with the response
                if (xmlhttp.readyState==4) 
                {
                    // if everything is Ok on browser
                    if(xmlhttp.status==200) 
                    {    
                        //Update the div with the response
                        document.getElementById("requestForm").innerHTML=xmlhttp.responseText;
                        $("#cancel").on("click", function(){
                            location.reload(true);
                        });
                    }
                }
            }
            //send the selected option id to the php page 
            xmlhttp.open("GET","userRequest.php?request="+str,true);
            xmlhttp.send();
            $(".requestForm").show();
        }
        </script>
    </head>
<body>

    <div id="header-wrap">
        <h2 id="welcome-admin">Hello, Administrator!&nbsp;&nbsp;&nbsp;<a href="../logout.php" id="logout">Logout</a>&nbsp;&nbsp;</h2>
    </div>

    <img src="settings.png" height="40" width="40" style="float:right;margin-right:30px;margin-top:10px" class="settings">

    <div id="table-container">
        <label>List of users</label>
        <br>
        <table>
            <thead>
                <th>Name</th>
                <th>Username</th>
                <th>Number</th>
                <th>Action</th>
            </thead>
            <tbody>


<tr><td>Test One</td><td>test1</td><td>012365478</td><td><a href='#' class='request' onclick='userrequest(Test One)'>Request</a></td></tr>          </tbody>
        </table>
    </div>

    <form method="post" action="admin.php">
        <div class="requestForm" id="requestForm">

        </div>
    </form>
</body>
</html>

line 64 <tr><td>Test One</td><td>test1</td><td>012365478</td><td><a href='#' class='request' onclick='userrequest(Test One)'>Request</a></td></tr> </tbody>

onclick='userrequest(Test One)'

If you pass a string as parameter, it needs to be in quotes, e.g.:

onclick="userrequest('Test One')"

So try changing to:

echo "<tr><td>$name</td><td>$username</td><td>$number</td><td><a href='#' value='$name' class='request' onclick='request(\"".$name."\")'>$status</a></td></tr>";
commented: Yh, pritaeas +2

thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.