Solved

using proxy file with html

Posted on 2014-01-11
8
320 Views
Last Modified: 2014-05-12
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
0
Comment
Question by:mavmanau
  • 3
  • 3
  • 2
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39774275
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?
0
 

Author Comment

by:mavmanau
ID: 39774292
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.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39774325
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39774855
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.
0
 

Author Comment

by:mavmanau
ID: 39775197
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?
0
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 39775289
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
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39775297
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.
0
 

Author Closing Comment

by:mavmanau
ID: 40060844
Thank you for your help.  It was much appreciated.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question