using proxy file with html

Hi,

I have been given a project to do, and on the surface it seems it should be pretty simple. they have given me a sample file called proxy.php and the a js library, but I am not sure precisely how to configure the proxy file or the js file to utilise the proxy file.

essentially what the pages should do once they are working, is as I begin to type characters into search boxes, it searches the remote website, and starts returning possible results via json to the search boxes.

I have attached the proxy file and the JS file, could someone please help me out?
totalcheck.js
proxy.php.txt
mavmanauNetwork Engineer/SysadminAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Those two files look like they came from separate projects.  And I believe they are incomplete.  I don't see anywhere that the 'js' file calls the 'php' file.  Did they give you URLs to use?
mavmanauNetwork Engineer/SysadminAuthor Commented:
I am using this as the endpoint address in the proxy.php file,

https://stage-api.ext.sensisdata.com.au/rest/current

This is the example they use:
<html>
    <head>
        <script src="cripts/jquery-ui-1.10.3/jquery.js"> </script>
        <script src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"> </script>
        <script src="totalcheck.js"></script>
   
    </head>
    <body>
            <div id="splitStreetContainer">
        <input type="text" placeholder="Subpremise" data-address-attr="subpremise"/>
        <input type="text" placeholder="Street Number" data-address-attr="street_number"/>
        <input type="text" placeholder="Street Name" data-address-attr="street_name"/>
        <input type="text" placeholder="Street Type" data-address-attr="street_type"/>
        <input type="text" placeholder="Suburb" data-address-attr="suburb"/>
        <input type="text" placeholder="State" data-address-attr="state"/>
        <input type="text" placeholder="Postcode" data-address-attr="postcode"/>
    </div>
    <script>
        $(document).ready(function() {
           //  $.endPoint = "<path-to-proxy>";
		    $.endPoint = "proxy.php";

            $("#splitStreetContainer").totalCheckAddress({
              nameFuzzySearch: true,
              includeListing: true,
              includePaf: false,
              criteria :  {
                    country: "AU"
              },
              onSelectName: function(el, data) {
                // Handle response data
              },
              onSelectAddress: function(el, data) {
                // Handle response data
              }
            });
        });
    </script>
    </body>
</html>

Open in new window


but in the proxy file it appears in dreamweaver that there is an error on line 10.

I don't think i really need a seperate file for authorising connections to the service, but am unable to proceed.

Any light you can shed would be greatly appreciated.
Dave BaldwinFixer of ProblemsCommented:
Dreamweaver is not going to like "placeholder" and "data-address-attr" because they are not standard attributes.  You may have to use a plain text code editor for this like HTML-Kit http://www.chami.com/ or NotePad++ http://notepad-plus-plus.org/ .   "totalcheck.js" is supposed to pop up a 'modal' window for you to enter some info.  

All of this must be run on a web server that supports PHP or else "proxy.php" won't run and the AJAX code can't make a request to it.  You can't just open it from a file on your computer and expect it to work.  You do need to enter your 'username' and 'password' for the service in the "proxy.php" file.
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

Ray PaseurCommented:
This line is probably wrong:

        <script src="cripts/jquery-ui-1.10.3/jquery.js"> </script>

"placeholder" is valid HTML5 for the text to show in the form input controls.  It looks like the "data-address-attr" would be something used with jQuery to address elements of the form.
mavmanauNetwork Engineer/SysadminAuthor Commented:
The username and password in the proxy.php file have the correct one in, I just omitted them in the copy I uploaded here.

Here is the current html page I have.


<html>
    <head>
        <script src="scripts/jquery-ui-1.10.3/jquery-1.9.1.js"> </script>
        <script src="scripts/jquery-ui-1.10.3/ui/jquery-ui.js"> </script>
        <script src="totalcheck.js"></script>
   <link rel="stylesheet" type="text/css" href="dist/totalcheck.css"/>
   <style type="text/css">
   body {
	background-color: #D3E7F4;
}
   </style>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
            <div id="splitStreetContainer"><input type="text" placeholder="Name" data-address-attr="primary_name" />
        <input type="text" placeholder="Subpremise" data-address-attr="subpremise"/>
        <input type="text" placeholder="Street Number" data-address-attr="street_number"/>
        <input type="text" placeholder="Street Name" data-address-attr="street_name"/>
        <input type="text" placeholder="Street Type" data-address-attr="street_type"/>
        <input type="text" placeholder="Suburb" data-address-attr="suburb"/>
        <input type="text" placeholder="State" data-address-attr="state"/>
        <input type="text" placeholder="Postcode" data-address-attr="postcode"/>
    </div>
    <script>
        $(document).ready(function() {
           //  $.endPoint = "<path-to-proxy>";
		    $.endPoint = "proxy.php";

            $("#splitStreetContainer").totalCheckAddress({
              nameFuzzySearch: true,
              includeListing: true,
              includePaf: true,
              criteria :  {
                    country: "AU"
              },
              onSelectName: function(el, data) {
                // Handle response data
              },
              onSelectAddress: function(el, data) {
                // Handle response data
              }
            });
        });
    </script>
</body>
</html>

Open in new window


When i turn on the developer tools, I can see this:
Screenshot of page in action
I am getting an error 304 in the javascript, does that help at all?
Ray PaseurCommented:
Try making a Google search for "jQuery Autocomplete."  I think you'll find your answer quickly if the question is phrased that way.  Best of luck with the project, ~Ray

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
304 is not an error, it is a response code that tells the browser to use the copy of that file that is in it's cache, that it does not need to be reloaded from the server.
mavmanauNetwork Engineer/SysadminAuthor Commented:
Thank you for your help.  It was much appreciated.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.