#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    [AJAX] Update Multiple Variables


    New user and I apologize if this is the wrong forum.

    I’ve been asked to develop a new web program that searches 2 databases for the existence of a network device name. The requirements are relatively simple;

    1 – Provide a way for a user to enter a network device name to search for.
    2 - Search both company databases.
    3 – Provide a real time feedback method on the database search status.


    My prototype main HTML page looks like this:

    Enter a device name: ___________ [Submit Button]

    (Below in in a table format)
    Database Found Not Found
    Database 1
    Database 2


    The HTML is:

    <!DOCTYPE html PUBLIC>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Look For Device</title>
    </head>

    <body>
    <form name = "getDeviceName" method = "post" action = "checkAllDBs.jsp" >

    Enter a device name: <input type = "text" name = "deviceToCheck">

    <input type = "submit" name = "submit" value = "Submit">

    <table style = "border: 1px solid; border-collapse: collapse">
    <tr>
    <th style = "border: 1px solid; border-collapse: collapse">Database</th>
    <th style = "border: 1px solid; border-collapse: collapse">Found</th>
    <th style = "border: 1px solid; border-collapse: collapse">Not Found</th>
    </tr>
    <tr>
    <td style = "border: 1px solid; border-collapse: collapse">Database 1</td>
    <td style = "border: 1px solid; border-collapse: collapse"></td>
    <td style = "border: 1px solid; border-collapse: collapse"></td>
    </tr>
    <tr>
    <td style = "border: 1px solid; border-collapse: collapse">Database 2</td>
    <td style = "border: 1px solid; border-collapse: collapse"></td>
    <td style = "border: 1px solid; border-collapse: collapse"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>



    Now, my plan is to call the “checkAllDBs.jsp” program to do the heavy lifting. It will call 2 other jsp or php scripts that will query each individual database and return the results independently. I would like to have the “Found” / “Not Found” fields updated as each search process is completed with an "X" or checkmark.

    I’m thinking of using AJAX to accomplish this but I’m not sure how to implement it. I have used AJAX before but not to this degree. I am familiar with AJAX basics like XMLHttpRequest & ActiveXObject objects, “onreadystatechange” property, readyState “state” values, and open/send methods. But trying to use it to update multiple variables asynchronously is proving to be a bit of a challenge.

    Can anyone point me to a tutorial or anything where I can test the concept? Or provide another alternative?



    Thanks in advance.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    One way to go about this, would be to use jQuery. In jQuery there is an utility, called a "Deferred Object" and "it can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function". (http://api.jquery.com/category/deferred-object/)

    Here is a tutorial, as well: How to Run Multiple AJAX Requests.

    Good Luck
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Hey Web_Loone08, thanks a ton. After a quick look at your URLs I think this might be what I'm looking for.

IMN logo majestic logo threadwatch logo seochat tools logo