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

PHPWeb Development Software

Last Comment

mavmanau

8/22/2022 - Mon

Dave Baldwin

1/11/2014

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?

mavmanau

1/11/2014

ASKER

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 Baldwin

1/11/2014

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

Ray Paseur

1/12/2014

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.

mavmanau

1/12/2014

ASKER

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>